Web Development 1

Web Development 1

1 Quarter Prerequisite: None

This class starts with code.org Chapter 2 in CS Discoveries. Students will learn about the reasons for developing websites, basic HTML, basic CSS, and build their own personal website displaying their learning of their basic skills. At about mid-term the students will be finished with the CS Discoveries and move on to more enhanced learning of HTML in Code Academy as they are working towards front end engineering. The Code Academy lessons and projects will expose them to more advanced concepts of HTML and new element tags for better organization and accessibility of websites.

Grading:

Grading: Weekly Points will be 50% of total Grade.

Weeks 1 – 5 will contain 60% of the student’s weekly grade.

Each Week is Graded on 100 pts for completed Challenges/Projects during that week.

- If student does not finish all challenges/projects in the week, they must finish the missing challenges/projects before the end of the following week to be eligible for the full points in that current week.

- Student will be provided two days a week of make-up time to get caught up or progress ahead if available per class – these days are also setup in schedule to give extra time if student is absent per school policy.

- Grades for each week will not fall be 70pts in a week but the student cannot get more than 70pts in a week until they are fully caught up.

Weeks 6 – 8 will contain 40% of the student’s weekly grade. (Week 6 starts over at 100pts)

Each Week 6 – 8 is Graded on 100 pts for completed Challenges during that week.

- If student does not finish all challenges/projects in the week, they will be graded on work completion for each of the last 3 weeks.

- Student will be provided two days a week of make-up time to get caught up or progress ahead – these days are also setup in schedule to give extra time if student is absent per school policy.

- Grades for these last 3 weeks, can and will fall below the 70pts (unlike week 1 – 5) in each week grades can result in a “0” for the week if the student does not do any of the assigned work in the week.

Other 50% of grade

Computer Programming 1 – (50% - Projects, 50% - Lessons/Daily)

Students will only be able to move on to the next step in programming classes if they get an “A” in this course.

Course Grading

92% - 100% - A

90% - 91.99 - A-

88% - 89.99% - B+

82% - 87.99% - B

80% - 81.99% - B-

78% - 79.99% - C+

72% - 77.99% - C

70% - 71.99% - C-*

68% - 69.99% - D+*

60% - 67.99% - D*

59.99% & Below – NG* - Does keep student off Honor Roll

*For introduction to programming and Web Development 1 –

These categories will be changed to “S” – as to not negatively affect student GPA.

Week 1 Lesson Videos and PDF help sheets:

Use PDF if you miss lesson and just need help with what was done

Lesson_1-HTML – Just look at the Example Websites

Lesson 2 HTML.pdf

Lesson 3 HTML.pdf

Lesson 4 HTML.pdf

Use Videos if you miss lesson or need a review

Lesson_2-HTML (2:46)– to make multiple cursors: Hold down the ctrl-key as you click

Lesson_3-HTML (6:14)

Lesson_4-HTML (4:47)– ONLY DO: “HTML Review” a-f & “HTML Lists” a-b Skip 3 & 4 and do end of block lesson in assignments

Week 2 Lesson Videos and PDF help sheets:

Use PDF if you miss lesson and just need help with what was done

Lesson 4 HTML.pdf

Lesson 6 CSS.pdf

Use Videos if you miss lesson or need a review

Lesson_4-HTML (4:47)– ONLY DO: “HTML Review” a-f & “HTML Lists” a-b Skip 3 & 4 and do end of block lesson in assignments

Lesson_6-CSS-Text (12:24)

Start personal Website: You need to watch the whole video to setup correctly

Setting_up_Website-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)

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

Video: Adding CSS.Text elements

Resource: Other Font-Families

Week 3 Lesson Videos and PDF help sheets:

Use PDF if you miss lesson and just need help with what was done

Lesson 9 Images HTML.pdf

Lesson 11 CSS.pdf

Use Videos if you miss lesson or need a review

Lesson_9-Images HTML (9:09)

Lesson_11-CSS-Images (12:49)

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

Video: Inserting Images direct from internet

Resource:https://giphy.com/

Week 4 Lesson Videos and PDF help sheets:

Use PDF if you miss lesson and just need help with what was done

Lesson 19 Links HTML.pdf

Use Videos if you miss lesson or need a review

Lesson_19-Link-Pages (7:38)

Add at least 3 more style elements discussed in lessons to <img> tag and background-color or Image

Video: CSS Image elements

Add 2 more webpages with at least 3 pictures and have written material around at least 100 words – Do not forget Navigation

Video: Nav Bar and adding pages

Reference: Symbol codes HTML

Week 5 Lesson Videos and PDF help sheets: Code Academy

Lesson 1&2 info

Overall, you want to on the first 2 days get to section 3 which will take most of your time, so do not get caught up too much on 1 and 2.

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.

Add 2 more webpages with at least 3 pictures and have written material around at least 100 words – Do not forget Navigation

Video: Nav Bar and adding pages

Reference: Symbol codes HTML

Week 6 Lesson Videos and examples:

LESSON 3 Projects

Website Examples:

Fashion Blog

Video Walk Throughs:

Fashion Blog Video Walkthrough

Week 7 Lesson Videos and PDF help sheets:

LESSON 3 Projects

Website Examples: