Web 2
3-31-25
Objective: Students will be able to create a basic login system with user authentication using HTML5, CSS3, PHP, & SQL on the student server.
Here’s a high-level approach:
Create a Users Table in MySQL
Store id, username, password_hash (hashed with password_hash()), and user roles (if needed).
Build a Registration & Login Form
A PHP form where users can enter credentials.
Validate input and compare the password using password_verify().
Use Sessions for Authentication
Start a session on login and store user details ($_SESSION['user_id']).
Protect pages by checking $_SESSION['user_id'] at the top of each page.
Restrict Access to Protected Pages
Use a PHP check at the top of pages:
php
CopyEdit
session_start();
if (!isset($_SESSION['user_id'])) {
header("Location: login.php");
exit();
}
Logout Functionality
Destroy the session to log users out.
3-25-25
Objective: Students will be able to complete the Minecraft Hour of Code (Voyage Aquatic).
3-27-25
Objective: Students will be able to create a very basic HTML5, CSS3, PHP, & SQL CRUD application on the student server. Pay attention, because this is mostly for practice, but we will be building some Database Driven apps.
3-12-25
Objective: Students will be able to clean up & organize their Desktop / Downloads / Documents folders. Wait for instructions!
3-4-25
Objective: Students will be able to begin Exploring Generative AI in Code.org using the link provided in Google Classroom (Lesson 2 Input & Training Data).
Graphic Organizer - click on the link below
https://docs.google.com/presentation/d/1L-NZa63NatGczunX-58GlPNwHnNxD_XQxQSSbqlhP_Y/view#slide=id.p
Exemplar (Activity Buide)
3-3-25
Objective: Students will be able to begin Exploring Generative AI in Code.org using the link provided in Google Classroom. (Lesson 1: Introduction to Generative AI).
Graphic Organizer - click on the link below
https://docs.google.com/presentation/d/1L-NZa63NatGczunX-58GlPNwHnNxD_XQxQSSbqlhP_Y/view#slide=id.p
***Web Design***
2-24
Objective: Students will be able to create spaceship fighting game using code.org. Have Fun!
First you must create your account at https://code.org/
https://ctconline.certification-partners.com/ctconline-ciw/pages/logout.action
Objective: Students will be able to prepare to take and pass the certification exam!
2-13 to 2-14
Objective: Students will be able to continue working hard on mastering the Cert practice test in Quia and completing Gmetrix/CIW.
Not Randomized
https://www.quia.com/quiz/8524365.html
Randomized
You have a quiz today in Quia!
2-6 to 2-6
Objective: Students will be able to revisit Gmetrix/work on completing CIW.
Next week we will be working hard on mastering the Cert practice test in Quia and completing Gmetrix/CIW.
https://www.quia.com/quiz/8543200.html
1-27 to 1-28
Objective: Students will be able to inspect and dissect the function updateHandler code block found in Google Classroom. We will discuss this in class!
1-17-25
Objective: Students will be able to complete their quiz project. See Google Classroom.
1-13-25
Objective: Students will be able to upload last week's assignment by following the instructions in the video in Google Classroom. All assignments must be uploaded to Google Classroom on 1-13-25 to receive a grade.
This week's assignment will be introduced in the video in Google Classroom.
Instructions: Access your assignment in Google Classroom!
USE: Shift + Command + 4 to create screenshots of your work.
I don't need to see the code, just the view in the web browser.
1-8-25
Objective: Students will be able to create a web page that includes links, photos, and basic CSS3 animations to enhance user interaction and design. All assignments must be uploaded to Google Classroom to receive a grade.
4th Period https://classroom.google.com/c/NzAzMTg3NTQ0NFpa?cjc=jgw6g53
https://www.quia.com/quiz/8532625.html
12-16 to Continued...
Objective: Students will be able to continue dissecting the code blocks in quia. Learning the answer only, is a big mistake. You must learn and understand the code in each code block.
12-9 to Continued...
Objective: Students will be able to continue dissecting the code blocks in quia. Learning the answer only, is a big mistake. You must learn and understand the code in each code block.
https://www.quia.com/quiz/8526422.html
11-18
Objective: Students will be able to continue working in uCertify.
Remember that I will take a progress grade from CIW/Gmetrix, and you will have a test with approximately 5 detailed question at the end of this week.
https://www.quia.com/quiz/8524365.html
11-12-24
Objective: Students will be able to work on analyzing/disecting the questions provided in the practice test via the link. Let me know if you have any questions.
10-21
Objective: Students will be able to continue working in uCertify.
Remember that I will take a progress grade from CIW/Gmetrix, and you will have a quiz this week.
10-15-24
Objective: Students will be able to use the HTML canvas to draw shapes to create stuff as shown in the photos below. Start by creating simple shapes.
10-9
Objective: Students will be able to continue working in uCertify.
9-25
Objective: Students will be able to learn how not to commit copyright infringement, and plagiarism. Write a one page paper on how to avoid committing Copyright Infringement, and Plagiarism.
Copyright infringement includes the unauthorized or unlicensed copying of a work subject to copyright. ( Tech Law Journal) Plagiarism is using someone else's work or ideas without giving proper credit.
What is Plagiarism and How Do I Avoid it?
https://www.youtube.com/watch?v=EbWKUiLjGBs
Copyright Infringement - What if Someone Infringes Your Copyright?
https://www.youtube.com/watch?v=uxdrzOz0A0A
9-18 through ?
Objective: Students will be able to brush up on their HTML5 & CSS3 skills. The HTML Form with the JavaScript is for Web 3 only...at this time.
Link to Starter Files
https://drive.google.com/file/d/1Qe9Ku14sSrjmC842B9QMK99hS-dfKmx1/view?usp=sharing
Practice using 3 different fonts.
Adding custom fonts: https://www.w3schools.com/cssref/css3_pr_font-face_rule.php
Basics of CSS Grid:
Grid Container and Items:
The container with display: grid; becomes a grid container.
Direct children of the container become grid items.
Grid Lines and Cells:
A grid is divided into horizontal and vertical lines called grid lines.
The spaces between two adjacent horizontal and vertical lines form grid cells.
Grid Template:
Use grid-template-columns and grid-template-rows to define the size of columns and rows.
Example: grid-template-columns: 100px 200px auto;
Grid Gaps:
Set the gap between columns and rows using grid-column-gap and grid-row-gap, or shorthand grid-gap.
Example: grid-gap: 10px;
Placing Items:
Grid Area:
Use grid-template-areas to assign names to grid areas.
Place items in these areas using grid-area property.
Grid Column and Row:
Use grid-column and grid-row to place items in specific columns and rows.
Example: grid-column: 2 / 4; (item spans from column line 2 to column line 4)
Auto Placement:
Items can be automatically placed using grid-auto-columns and grid-auto-rows.
Responsive Design:
Media Queries:
Utilize media queries to make your grid responsive.
Adjust the grid structure or sizes based on the screen width.
Alignment and Justification:
Alignment:
Use justify-items and align-items for aligning items within their grid cells.
Example: justify-items: center; align-items: center;
Justification:
Use justify-content and align-content for justifying the entire grid.
Example: justify-content: center; align-content: center;
CSS Grid Functions:
Repeat Function:
Use repeat() function to simplify the definition of columns or rows.
Example: grid-template-columns: repeat(3, 1fr); (three columns with equal width)
Minmax Function:
Combine minmax() function with auto-fill or auto-fit for flexible sizing.
Example: grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
Browser Support:
Browser Compatibility:
CSS Grid is widely supported but check compatibility on caniuse.com for specific features.
9-9-24
Objective: Students will be able to complete JS lessons at w3schools by creating an account (see the link).
Web1- Quiz1 - 2024
https://www.quia.com/quiz/8505862.html
9-3-24
Objective: Students will be able to complete HTML exercises at w3schools by creating an account (see the link). Note: You will be quizzed on some of the basics that you should know.
8-26-24
Objective: Students will be able to create Gmetrix accounts and login to access HTML and CSS exercises. Note: You will be in Gmetrix all this week.
8-20-24
Objective: Students will be able to create a basic HTML page by using the code example as well as w3schools.
Add a background color
Add an <h2> tag
Add an unordered list
Add a photo
Add a video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/jhGHXAnNNzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
8-14-24 to 8-16-24
Objective: Students will be able to create a Snowman using graphic design tools. All students must be familiar with these tools. Your grade this week will come from submitting your Classroom Guidelines online form.
***4th Period
8-14-2024
Objective: Students will be able to practice writing HTML by setting up the file structure and placing the HTML file in the root folder, etc.
Learn by Doing
Beginning HTML
File Structure
Learning file structure is a very important aspect of learning HTML. This will focus on file structure.
I would like to explain how a website is structured in layman’s terms. A website consists of a root folder that contains files with code in them (HTML, CSS, JS, etc.) that can be linked to one another. I will further condense this explanation to ‘Code inside of Files inside of Folders’.
We will now create a root folder for our website. Follow the steps below exactly.
1) Right click (on the desktop) > New Folder
2) Rename your folder to: Root_Folder (FYI, you will have to double click on the name of the folder to rename it).
3) Open TextEdit or any text file editor > Create a new file and save it as: index.html
4) Type the code shown below in your index.html file that you just created.
How do I write HTML on Mac?
Create an HTML file
In the TextEdit app on your Mac, choose File > New, then choose Format > Make Plain Text.
Enter the HTML code.
Choose File > Save, type a name followed by the extension . html (for example, enter index. html), then click Save.
When prompted about the extension to use, click “Use . html.”
HTML headings are defined with the <h1> to <h6> tags:
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="http://www.w3schools.com">This is a link</a>
***Google how to add a header, a footer and some menu links.***
From w3schools - Example:
A header for an <article>:
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
TBA
Objective: Students will be able to create the webpages below and make sure the code works properly.
