Web Development

This class will use code.org. to start learning the basic elements of coding in HTML & CSS than they will apply their skills by developing a personal web page. To enhance their understanding the second half of the term, this class will go into Code Academy and under Front-End-Engineering will get more enhanced lessons on HTML & CSS fundamentals. Starting them on the path of becoming a FEE Web Developer.

Currently your Website needs to have: Video Basic Set up

5 pts. <h1>Title of Website</h1>
5 pts. <p>Wiki - intro of your topic</p>
10 pts. <h2>Statement Question</h2>
5 pts. <html> Document standards are followed one <ol or ul> list

Total:25 pts.

Video Lessons	PDF help sheets
Lesson 2-HTML Lesson 3-HTML Lesson 4-HTML ONLY DO: HTML Review a-f & HTML Lists a-b Skip 3 & 4 and do end of block lesson in assignments Setting Up Peersonal Website	Lesson 2-HTML Lesson 3-HTML Lesson 4-HTML

You will need to add CSS text elements to each of your headings and Paragraphs at least 3 for each heading and paragraphs (Watch Video)

ex. color, font-size, text-decoration, text-alignment, font-family

5pts. 2 tags with different colors
5pts. reset 2 tags with different font-sizes
10pts. have 2 different font-families
5pts. 2 tags with align, shadowing, decoration or spacing

Total: 25pts.

Video Lessons	PDF help sheets
Lesson 6-CSS Adding CSS Elments to Personal Website Lesson 9 Images	Lesson 6-CSS Other Font-Familes Lesson 9 Images

Currently your Website needs to have: Video Basic Set up

5 pts. <h1>Title of Website</h1>
5 pts. <p>Wiki - intro of your topic</p>
10 pts. <h2>Statement Question</h2>
5 pts. <html> Document standards are followed one <ol or ul> list

Total:25 pts.

You will need to add CSS text elements to each of your headings and Paragraphs at least 3 for each heading and paragraphs (Watch Video)

ex. color, font-size, text-decoration, text-alignment, font-family

5pts. 2 tags with different colors
5pts. reset 2 tags with different font-sizes
10pts. have 2 different font-families
5pts. 2 tags with align, shadowing, decoration or spacing

Total: 25pts.

15 pts. You will also need to add 3-5 pictures to the webpage one of them must be a *.gif look at giphy.com is a great place to find one - they insert the same as normal pictures

Total: 15pts.

Other Resources: Other Font-Familes

Video: Inserting images from Internet

Website for .gif Images:giphy.com

Video Lessons	PDF help sheets
Lesson 9 Images	Lesson 9 Images

Currently your Website needs to have: Video Basic Set up

5 pts. <h1>Title of Website</h1>
5 pts. <p>Wiki - intro of your topic</p>
10 pts. <h2>Statement Question</h2>
5 pts. <html> Document standards are followed one <ol or ul> list

Total:25 pts.

You will need to add CSS text elements to each of your headings and Paragraphs at least 3 for each heading and paragraphs (Watch Video)

ex. color, font-size, text-decoration, text-alignment, font-family

5pts. 2 tags with different colors
5pts. reset 2 tags with different font-sizes
10pts. have 2 different font-families
5pts. 2 tags with align, shadowing, decoration or spacing

Total: 25pts.

15 pts. You will also need to add 3-5 pictures to the webpage one of them must be a *.gif look at giphy.com is a great place to find one - they insert the same as normal pictures

Total: 15pts.

15 pts. adding at leaast 3 CSS elements to your general images: CSS Image Elements

Total: 15pts.

30 pts. Add 2 more webpages with at least 3 pictures and have written material around at least 100 words − Do not forget Navigation: Adding pages and Navaigation

Total: 30pts.

Other Resources: Other Font-Familes

Video: Inserting images from Internet

Website for .gif Images:giphy.com

Video Lessons	PDF help sheets
Lesson 11 CSS Images Lesson 19 Linking Pages	Lesson 11 CSS Images Lesson 19 Linking Pages

You will need to login as a Student

When it asks you for district name be sure you choose Cheney District 360 - You can click any of our schools

Then Click − Log in with Google

Go to G.Horvath Page and click Code Academy Icon

Lesson: Introduction to Front-End Engineer Career Path

Lesson 1 & 2 info Code Academy

Introduction to Front-End Engineer Career Path

In this section just skim over the documentation and answer a few questions when needed − Look to bottom right and click “Next” when done examining information.

Overview of Web Development

In this section just skim over the documentation and answer a few questions when needed − Look to bottom right and click “Next” when done examining information.
There are a couple of Videos explaining Front-End & Languges for Web Development

Lesson: Fundamentals − Elements of HTML & Quiz

Lesson 3 Code Academy

In this section you will quickly review the most common HTML tags that we have used in code.org − you will be introduced to a few new tags

Final Scoring of Website:

Home Page Elements: − 30 pts

3 different Heading <h1> − <h6> (10pts)
100 words of Text (10pts)
1 set of list elements <ol> or <ul> (10pts)

Text CSS Code: − 30 pts

Must use 2 different font−families (10pts)
8 other CSS elements for text from lessons (20pts)

Add Images: − 45 pts

Home page (index.html) must have 3 - 5 pictures & 1 must be a .gif (15pts)
Other 2 pages needs 3 - 5 pictures each (30pts)

Total minium Number of pictures 8 plus 1 .gif :45 pts.

Add Navigation to website: − 20pts

Need to have working navigation between all 3 pages(20pts)

Add Advanced CSS: − 15pts

3 rule sets image, buttton or background CSS(15pts)

The 2 more web pages must have: − 20pts

Web page title <h1> 2 times 5 (10pts)
Web page needs 100 words copied and pasted 2 times 5 (10pts)

Overall attractivness of the website and few to no errors (40pts)

Total final score of Website is 200 points max

Navigation: Adding pages and Navaigation

Other Resources: Other Font-Familes

Video: Inserting images from Internet

Website for .gif Images:giphy.com

You will need to login as a Student

When it asks you for district name be sure you choose Cheney District 360 - You can click any of our schools

Then Click − Log in with Google

Go to G.Horvath Page and click Code Academy Icon

Project: Fashion Blog & Lesson: Tables

Website Example	Video Walkthrough
Fashion Blog	Fashion Blog

You will need to login as a Student

When it asks you for district name be sure you choose Cheney District 360 - You can click any of our schools

Then Click − Log in with Google

Go to G.Horvath Page and click Code Academy Icon

Project: Wine Festival Schedule & Lesson: Semantic HTML

Website Example	Video Walkthrough
Wine Festival Schedule	Wine Festival Schedule

You will need to login as a Student

When it asks you for district name be sure you choose Cheney District 360 - You can click any of our schools

Then Click − Log in with Google

Go to G.Horvath Page and click Code Academy Icon

Project: New York City Blog & Lesson: Setup and Syntax & Selectors

Website Example	Video Walkthrough
New York City Blog	New York City Blog

Week 1: Web Development Code.org

Currently your Website needs to have: Video Basic Set up

Total:25 pts.

Week 2: Web Development Code.org

You will need to add CSS text elements to each of your headings and Paragraphs at least 3 for each heading and paragraphs (Watch Video)

ex. color, font-size, text-decoration, text-alignment, font-family

Total: 25pts.

Week 3: Web Development Code.org

Currently your Website needs to have: Video Basic Set up

Total:25 pts.

You will need to add CSS text elements to each of your headings and Paragraphs at least 3 for each heading and paragraphs (Watch Video)

ex. color, font-size, text-decoration, text-alignment, font-family

Total: 25pts.

15 pts. You will also need to add 3-5 pictures to the webpage one of them must be a *.gif look at giphy.com is a great place to find one - they insert the same as normal pictures

Total: 15pts.

Other Resources: Other Font-Familes

Video: Inserting images from Internet

Website for .gif Images:giphy.com

Week 4: Web Development Code.org

Currently your Website needs to have: Video Basic Set up

Total:25 pts.

You will need to add CSS text elements to each of your headings and Paragraphs at least 3 for each heading and paragraphs (Watch Video)

ex. color, font-size, text-decoration, text-alignment, font-family

Total: 25pts.

15 pts. You will also need to add 3-5 pictures to the webpage one of them must be a *.gif look at giphy.com is a great place to find one - they insert the same as normal pictures

Total: 15pts.

15 pts. adding at leaast 3 CSS elements to your general images: CSS Image Elements

Total: 15pts.

30 pts. Add 2 more webpages with at least 3 pictures and have written material around at least 100 words − Do not forget Navigation: Adding pages and Navaigation

Total: 30pts.

Other Resources: Other Font-Familes

Video: Inserting images from Internet

Website for .gif Images:giphy.com

Week 5: Web Development Code Academy

You will need to login as a Student

When it asks you for district name be sure you choose Cheney District 360 - You can click any of our schools

Then Click − Log in with Google

Go to G.Horvath Page and click Code Academy Icon

Lesson: Introduction to Front-End Engineer Career Path

Lesson 1 & 2 info Code Academy

Introduction to Front-End Engineer Career Path

Overview of Web Development

Lesson: Fundamentals − Elements of HTML & Quiz

Lesson 3 Code Academy

Final Scoring of Website:

Home Page Elements: − 30 pts

Text CSS Code: − 30 pts

Add Images: − 45 pts

Total minium Number of pictures 8 plus 1 .gif :45 pts.

Add Navigation to website: − 20pts

Add Advanced CSS: − 15pts

The 2 more web pages must have: − 20pts

Overall attractivness of the website and few to no errors (40pts)

Total final score of Website is 200 points max

Navigation: Adding pages and Navaigation

Other Resources: Other Font-Familes

Video: Inserting images from Internet

Website for .gif Images:giphy.com

Week 6: Web Development Code Academy

You will need to login as a Student

When it asks you for district name be sure you choose Cheney District 360 - You can click any of our schools

Then Click − Log in with Google

Go to G.Horvath Page and click Code Academy Icon

Project: Fashion Blog & Lesson: Tables

Week 7: Web Development Code Academy

You will need to login as a Student

When it asks you for district name be sure you choose Cheney District 360 - You can click any of our schools

Then Click − Log in with Google

Go to G.Horvath Page and click Code Academy Icon

Project: Wine Festival Schedule & Lesson: Semantic HTML

Week 8: Web Development Code Academy

You will need to login as a Student

When it asks you for district name be sure you choose Cheney District 360 - You can click any of our schools

Then Click − Log in with Google

Go to G.Horvath Page and click Code Academy Icon

Project: New York City Blog & Lesson: Setup and Syntax & Selectors

Week 9: Web Development Code Academy

You will need to login as a Student

When it asks you for district name be sure you choose Cheney District 360 - You can click any of our schools

Then Click − Log in with Google