Web 1
4-22-24
Objective: Students will be able to create a Contact Us page that uses form submission for their WP website. This will have to be configured.
Use - Jotform Online Forms
First Name
Last Name
Email
Phone Number
Captcha
4-15-24
Objective: Students will be able to create a gallery page and a about us page for their WP website.
Gallery Page
Thumbnail Grid:
Descriptions or Captions:
About Us Page
Company Overview
Team Members
Company Culture
Achievements and Milestones
Client Testimonials
Community Involvement
Media Coverage
Contact Information
Visual Content
Call to Action (CTA)
4-1-24
Objective: Students will be able to create the Footer section for their WP website.
Copyright
Address
Phone Number
Social Media Links
3-26-24 continued
Objective: Students will be able to come up with a theme for their website and create custom header images for the image slider (at least 3).
3-11-24 continued
Objective: Students will be able to come up with a theme for their website and create custom header images for the image slider (at least 3).
3-7-24
Objective: Students will be able to develop practical skills and knowledge necessary for effectively managing a WordPress website.
Introduction to Hosting Plans
https://www.youtube.com/watch?v=aHt5uRT6OQM
Understanding PHP and Its Importance
Updating PHP Version
Introduction to Smart Slider 3 Plugin
Installing and Configuring Smart Slider 3 Plugin
https://www.youtube.com/watch?v=DEMP0A8mr9k
Formative assessment via Kahoot!
Join at www.kahoot.it
Quick Recap and Review
3-4-24 through 3-6-24
Objective: Students will be able to login to their Wordpress sites and become more familiar with the WP backend.
2-26-24 through 3-1-24
Objective: Students will be able to log into Knowledge Pillars and continue practicing in Exam Sim Mode.
https://platform.knowledge-pillars.com
Go to https://wordpress.com/
If you have an account, log in.
If you don't have an account, create one by clicking on Get Started on the top right.
2/20/2024 continued
Objective: Students will be able to recreate the lion shown below. This is a Photoshop lesson.
This is a graded assignment! Do your own work, save as you go, don't rush perfection.
fwbh-c72b-1c7a
2/12/2024 continued
Objective: Students will be able to log into Knowledge Pillars and continue practicing in Exam Sim Mode.
https://platform.knowledge-pillars.com
Go to https://wordpress.com/
If you have an account, log in.
If you don't have an account, create one by clicking on Get Started on the top right.
fwbh-c72b-1c7a
2/5/2024 continued
Objective: Students will be able to log into Knowledge Pillars and continue practicing in Exam Sim Mode.
Preliminary Check at this link
2/2/2024 continued
Objective: Students will be able to log into Knowledge Pillars and continue working on the lessons. Your Test in Exam Sim mode is Today!
1-8-24 Continued thru 1-16-24
Objective: Students will be able to customize for the Ice Cream Shop website.
Customize the website colors (it looks too generic)
Create the product pages (there should be 3 individual pages with information about that product only - Do Research On Your Products)
Link to the product pages
Create a contact page
Add 3 social media icons in the footer section (find them online)
If you finish early, create the Zoom In
12-18 Continued
Objective: Students will be able to prepare for their semester exam by reviewing lessons 1 through 3 in Knowledge Pillars. Your exam will be in Quia. Make sure that you have an account and that you can log in. Your exam will have 70 questions.
11-27 Continued
Objective: Students will be able to create practice tests for lessons 3 & 4 in Knowledge Pillars. Complete one section at a time (3 then 4).
Wordpress Notes:
Upgrade Theme to 2023 (see your site)
11-6 through 11- 9
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.
10-30 continued
Objective: Students will be able to log into the student Wordpress Site to continue working on the Knowledge Pillars lessons.
https://www.photoshopessentials.com/photoshop-text/text-effects/image-in-text-photoshop-cs6/
10-19
Objective: Students will be able to Create a practice test for lesson one & lesson two. Once you have created the practice test, you will complete it.
10-10 continued
Objective: Students will be able to log into student web hosting and install Wordpress. You will use Wordpress to complete your lessons starting with Lesson 2.
9-25
Objective: Students will be able to gain a basic understanding of how wordpress works. https://www.youtube.com/watch?v=kYY88h5J86A
https://platform.knowledge-pillars.com
The test will be postponed until Monday! Keep working in Code.org
https://www.quia.com/quiz/8412346.html
9-11 to 9-18
Objective: Students will be able to create content on web pages, and learn how to structure and style web pages using HTML and CSS. You will have to create a Code.org account. CLICK HERE
9-6-23
Objective: Students will be able to learn HTML & CSS by completing the tutorials located at CodeCademy.
8-30-23
Objective: Students will be able to complete the HTML & CSS layout project by using web design skills learned thus far. Refer to your previous assingments for help. Happy Coding :-)
8-28-23
Objective: Students will be able to gain a solid understanding of HTML5, and file structure. The link below has additional HTML5 tags.
https://drive.google.com/file/d/15o5XU6utzCqb7_X1rURxK-MOpzpSwKbn/view?usp=sharing
Learn by Doing
Beginning HTML
File Structure
Learning file structure is a very important aspect of learning HTML.
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 from one to 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 Dreamweaver or any HTML text 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.
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>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
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>
8-22-23
Objective: Students will be able to create a basic website menu using HTML and CSS. Your site is not done until you have duplicated the pages and made the menu work (link to other pages).
https://www.w3schools.com/css/css_navbar.asp
8-21-23
Objective: Students will be able to complete the 'HTML & CSS project' by following the code example.
Download starter files here:
https://drive.google.com/file/d/1jJShTT8Lugo8N25h3IpgDb7VSEhYXJm5/view?usp=sharing
https://www.quia.com/quiz/8376701.html
https://drive.google.com/file/d/1Dt3syVZ2wrdxFV2DyD5D1-IimiSecYqC/view?usp=sharing
5-8-23 - Continued - This project is for a grade.
Objective: Students will be able to create a custom grid layout for their website by following the tutorial. Once you have your layout, create a five page website beginning with your home page. Don't forget your (header, nav, main, aside, & footer). Create the site about some fictious business that you like.
Certified Students Only - Click on the Certified Students tab to view your lesson.
https://www.quia.com/quiz/8363874.html?AP_rand=737426700
4-19
Objective: Students will be able to conitnue to prepare for their certification exam. We will be switching to PLAN B. I will have a new practice test very soon.
We will also utilize the additional study curriculum specified for the certification exam.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 30px;
grid-row-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-column-gap property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
2-28 to 3-3
Objective: Students will be able to prepare for their certification exam. ***Your progress will be graded on Wednesday and you will have a cert-prep evauation on Friday.*** Your goal should be 90 or higher!
Part 1 - https://www.quia.com/quiz/8338452.html
2-21-23
Objective: Students will be able to learn and practice writing HTML5, CSS, and JS code.
2-6
Objective: Students will be able to practice for their certification exam. ***Your progress will be graded on Wednesday and you will have a cert-prep Quiz on Friday.*** Your goal should be 90 or higher!
Part 1 - https://www.quia.com/quiz/8338452.html
Part 2 - https://www.quia.com/quiz/8341347.html
1-30
Objective: Students will be able to complete CIW and move on to the practice test for the certification exam. You will be graded on your progress this Wednesday. ***Your progress will be graded on Wednesday and you will have a cert-prep Test on Friday.*** Your goal should be 90 or higher!
1-23 to 1-27
Objective: Students will be able to complete CIW. You will be graded on your progress this Wednesday (Cards, Quizzes, & Knowledge Checks). ***You will have a 20-question QUIZ on Friday on lessons 9 & 10.***
1-17
Objective: Students will be able to work towards completing CIW. You will be graded on your progress this Wednesday (Cards, Quizzes, & Knowledge Checks). ***You will have a 25-question test Friday on lessons 7 & 8.***
1-13-23 QUIZ
Objective: Students will be able to complete the Web Quiz.
Download the starter files
Swap out the Abominable Snowman gif with the Dancing Banana gif
Add a repeating background image https://www.w3schools.com/cssref/pr_background-repeat.php
Make the page resizable the easy way using basic CSS
Add your favorite holiday and why! :-)
1-9 to 1-13 2nd Semester
Objective: Students will be able to create an advanced CSS menu by following the video tutorial in Step 1. In Step 2, students will build a webpage using a CSS Grid Layout. Remember to duplicate your home page to create additional pages. Scroll down to access the CSS Grid link.
Step 1
Click Here to access the tutorial.
Step 2
12-12 to 12-21
Objective: Students will be able to take / prepare for their Semester Exams.
12-5 to 12-9
Objective: Students will be able to prepare for their Semester Exams.
11-28 to 12-2
Objective: Students will be able to brush up on their web design skills using the code.org platform.
Here is a join link if you need it: https://studio.code.org/join/KMKKZP
The begining lesson links are below. You may go to the next lesson when done.
https://studio.code.org/s/csd2-2021/lessons/6/levels/1?login_required=true
https://studio.code.org/s/csd2-2021/lessons/7/levels/1?login_required=true
11-14
Objective: Students will be able to prepare for the retake of the test. Others should continue working in CIW/uCertify focusing on completing all unfinished lessons.
11-7
Objective: Students will be able to continue working in CIW/uCertify focusing on completing all unfinished lessons. You need all green dots all the way across.
https://ito.itocsd.com:2083
11-1 to 11-4
Objective: Students will be able to continue creating a 3 page website about a fictitious business.
https://ito.itocsd.com:2083
10-31
Objective: Students will be able to create a timeclock & a weather forecaster using App Lab at code.org.
10-18 to 10-26
Objective: Students will be able to continue working in CIW focusing on completing lessons 3, 4, & 5. You will be graded on 3, 4, & 5 this week (Cards, Quizzes, & Knowledge Checks). ***You will have a 40-question test next week on lessons 1 through 5.***
10-17
Objective: Students will be able to continue working in CIW focusing on completing all unfinished lessons. You need all green dots all the way across.
10-11
Objective: Students will be able to modify an image slider and add an extra slide by following the w3schools tutorial and experimenting with the code. You will have to locate or create your own photos for your slider.
10-3
Objective: Students will be able to complete Lessons 1, 2, & 3 in uCertify. Your test grade will be taken from your quiz scores in lessons 1, 2, & 3. https://ciw.ucertify.com
Objective: Students will be able to complete Lesson 1, and move on to Lesson 2. I will collect a Quiz grade from your quiz average for Lessons 1 & 2 this week. NEXT WEEK you will have a test on Lessons 1, 2, & 3. https://ciw.ucertify.com
9-19 thru 9-20
Objective: Students will be able to create the webpages below and make sure the code works properly. We should have access to our curriculum this week.
9-16
Objective: Students will be able to practice their Photoshop skills by following the Blending Images PS tutorial below.
9-12
Objective: Students will be able to gain a better understanding of HTML & CSS by following along in the lesson.
9-8 thru 9-10
Objective: Students will be able to complete the HTML & CSS layout project by using web design skills learned thus far. You will need to use background-color, border-radius, padding, margin, text-align: center, and 3 article tags nested inside of your main tags.
Use w3schools for help! Happy Coding :-)
9-7
Objective: Students will be able to pick up where they left off yesterday creating a simple HTML & CSS website layout. Next, duplicate your page 3 times, modify the colors of the squares on the newly created pages, and lastly, link the pages together. Note: Some students will need the help of w3schools to complete this (website links, etc.). All four pages should look like different checker boards.
9-6
Objective: Students will be able to create a simple HTML & CSS website layout.
Download your Root Folder: Download Root Folder & Code
Connect your Root Folder to Dreamweaver > Site > New Site > Select the folder
Duplicate the Basic Website Structure page and name it: index.html
Modify your code using the example code that has been provided. The example code is in your root folder.
Your webpage should look like the example below once it has been completed.
8-29
Objective: Students will be able to create a basic website menu using HTML and CSS.
HTML5 & CSS Quiz 2022 https://www.quia.com/quiz/6072014.html
8-24 to 8-26
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-22-22
Objective: Students will be able to practice HTML by following the tutorial located at w3schools.
https://www.w3schools.com/html/default.asp
8-23 through 8-24
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>
9-7 thru 9-10
Objective: Students will be able to complete the HTML & CSS layout project by using web design skills learned thus far. You will need to use background-color, border-radius, padding, margin, text-align: center, and 3 article tags nested inside of your main tags. Happy Coding :-)
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. Continue this lessson by adding a menu to your page. You will also need a header section and a footer section. This is a graded assignment!
4-1-24
Objective: Students will be able to create the Footer section for their WP website.
Copyright
Address
Phone Number
Social Media Links