Student Resources

Week Outline and Class Objectives

• Personal Site
Personal Site Home Page- Rubric (due Wednesday, January 7th)
Personal Site, Rubric used for page 3 (due Thursday, January 15th)
Personal Site All Pages- Rubric (due during Final Exam Block, Teacher will Print)
Content Peer Editing Feedback Form (due during Final Exam Block, Teacher will Print)
Guardian Rubric (due duringFinal Exam Block)

---

Finding your home page (depending on your class):
* This Web address will only work if your home page is saved as index.html
1. www.natickhighwebdesign.com/web5fall2014/firstnamelastname
2. www.natickhighwebdesign.com/web7fall2014/firstnamelastname

• Project Management

Project Management, Site Map & Wireframe

Project Management Example

Color Combos for color combo

Adobe Kuler for color combos

---

Site Resources

http://templated.co/- attractive
themeforest.net - attractive
www.webpagesthatsuck.com - not so attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site
http://www.templatemonster.com/demo/48160.html - responsive site

• Dreamweaver
Dreamweaver Handbook (to be updated)
Adobe TV- Dreamweaver

- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen
----
File Structure
Setting up FTP
Connecting to FTP

Homework #1: Work on content for personal site

No bi-weekly exit slip or blog, focus on Personal Site

Week Outline and Class Objectives

File Structure Post-Assessment, Web 7
Ted Talk Link, for Importance of Coding assignment

• Personal Site
Personal Site Home Page- Rubric (due Wednesday, January 7th)
Personal Site, Rubric used for page 3 (due Tuesday, January 13th)
Personal Site All Pages- Rubric (due during Final Exam Block, Teacher will Print)
Content Peer Editing Feedback Form (due during Final Exam Block, Teacher will Print)
Guardian Rubric (due duringFinal Exam Block)

---

Finding your home page (depending on your class):
* This Web address will only work if your home page is saved as index.html
1. www.natickhighwebdesign.com/web5fall2014/firstnamelastname
2. www.natickhighwebdesign.com/web7fall2014/firstnamelastname

• Project Management

Project Management, Site Map & Wireframe

Project Management Example

Color Combos for color combo

Adobe Kuler for color combos

---

Site Resources
themeforest.net - attractive
www.webpagesthatsuck.com - not so attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site
http://www.templatemonster.com/demo/48160.html - responsive site

• Dreamweaver
Dreamweaver Handbook (to be updated)
Adobe TV- Dreamweaver

- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen
----
File Structure
Setting up FTP
Connecting to FTP

Homework #1: Work on content for personal site

Homework #2: Study for File Structure, Post- Assessment

No bi-weekly exit slip or blog, focus on Personal Site

Week Outline and Class Objectives

File Structure Fitness

• Dreamweaver
Dreamweaver Handbook (to be updated)
Adobe TV- Dreamweaver

- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen
----
File Structure
Setting up FTP
Connecting to FTP

• Project Management

Project Management, Site Map & Wireframe

Project Management Example

Color Combos for color combo

Adobe Kuler for color combos

---

Site Resources
themeforest.net - attractive
www.webpagesthatsuck.com - not so attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site
http://www.templatemonster.com/demo/48160.html - responsive site

• Personal Site
Personal Site Home Page- Rubric
Personal Site, Rubric used for page 3
Personal Site All Pages- Rubric
Content Peer Editing Feedback Form
Guardian Rubric

Homework #1: Work on content for personal site

Homework #2: Enjoy the hoilday break!

No bi-weekly exit slip or blog, Happy Holidays!

Week Outline and Class Objectives

• Dreamweaver
Dreamweaver Handbook (to be updated)
Adobe TV- Dreamweaver

- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen
----
File Structure
Setting up FTP
Connecting to FTP

• Project Management

Project Management, Site Map & Wireframe

Project Management Example

Color Combos for color combo

Adobe Kuler for color combos

---

Site Resources
themeforest.net - attractive
www.webpagesthatsuck.com - not so attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site
http://www.templatemonster.com/demo/48160.html - responsive site

• Personal Site
Personal Site Home Page- Rubric
Personal Site, Rubric used for page 3
Personal Site All Pages- Rubric
Content Peer Editing Feedback Form
Guardian Rubric

Homework #1: Project Management Example, complete with resource site, color combination and home page wireframe

Helpful Resources

Color Combos for color combo

Adobe Kuler for color combos

---

Site Resources
themeforest.net - attractive
www.webpagesthatsuck.com - not so attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site
http://www.templatemonster.com/demo/48160.html - responsive site

CLICK HERE FOR WHAT TO DO WHILE I AM OUT - directions on file

CLICK HERE FOR WHAT TO DO WHILE I AM OUT- directions in video

Week Outline and Class Objectives

• Dreamweaver
Dreamweaver Handbook (to be updated)
Adobe TV- Dreamweaver

- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen
----
File Structure
Setting up FTP
Connecting to FTP

• Project Management

Project Management, Site Map & Wireframe

Homework #1: Web writing/reading assignment

Week Outline and Class Objectives

• Dreamweaver
Dreamweaver Handbook (to be updated)
Adobe TV- Dreamweaver

- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen
----
File Structure
Setting up FTP
Connecting to FTP

• Project Management

Project Management, Site Map & Wireframe

Homework #1: Web writing/reading assignment

Week Outline and Class Objectives

• Dreamweaver
Dreamweaver Handbook (to be updated)
Adobe TV- Dreamweaver

- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen
----
File Structure
Setting up FTP
Connecting to FTP

• Project Management

Project Management, Steps #1-4

Homework #1: None, Enjoy the Holiday Break!

Week Outline and Class Objectives

CLICK HERE FOR WHAT TO DO WHILE I AM OUT

Resources While I am Out

---

Reset CSS

Skeleton for start of HTML and CSS page

HTML Code from cullenlearn, index.html

CSS Code from cullen learn, mystyles.css

• Intro. HTML & CSS
Videos to Inspire
Mitch Resnick, Let’s Teach Kids to Code
What Most Schools Don't Teach, Inspiration in Coding

---

Web5, Our CSS Library Document

Web7, Our CSS Library Document

Combination

Building Our First Page Togther:

CSS Defaults
Reset CSS

Skeleton for start of HTML and CSS page

---

Review for Unit Exam

Unit Exam (to be linked)

Homework #1: Study for Exam, from group study notes

Week Outline and Class Objectives

• Intro. HTML & CSS
Videos to Inspire
Mitch Resnick, Let’s Teach Kids to Code
What Most Schools Don't Teach, Inspiration in Coding

---

Web5, Our CSS Library Document

Web7, Our CSS Library Document

Combination

Building Our First Page Togther:

CSS Defaults
Reset CSS

Skeleton for start of HTML and CSS page

---
- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen

Homework #1: None at this time

Week Outline and Class Objectives

• Intro. HTML & CSS
Videos to Inspire
Mitch Resnick, Let’s Teach Kids to Code
What Most Schools Don't Teach, Inspiration in Coding

---

File Structure Pre-Assessment, Web5

File Structure Pre-Assessment, Web7

HTML
HTML Handbook
Codecademy, Introduction to HTML chapter assignment
Introduction to HTML worksheet (use w3schools.com as a reference)

CSS

CSS Video Intro
Introduction to CSS
CSS Worksheet (use www.w3schools.com as a reference)

Web5, Our CSS Library Document

Web7, Our CSS Library Document

Combination

Building Our First Page Togther:

CSS Defaults
Reset CSS

Skeleton for start of HTML and CSS page

---
- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen

Homework #1: Complete any worksheets assigned in class

Week Outline and Class Objectives

• Intro. HTML & CSS
Videos to Inspire
Mitch Resnick, Let’s Teach Kids to Code

One Paragraph Reflection (4-6 sentences): The importance of learning how to read and write code. How can this new skill help you beyond this classroom.
What Most Schools Don't Teach, Inspiration in Coding

---

File Structure Pre-Assessment, Web5

File Structure Pre-Assessment, Web7

HTML
HTML Handbook
Codecademy, Introduction to HTML chapter assignment
Introduction to HTML worksheet (use w3schools.com as a reference)

CSS

CSS Video Intro
Introduction to CSS
CSS Worksheet (use www.w3schools.com as a reference)

Combination

Building Our First Page Togther:

CSS Defaults
Reset CSS

Skeleton for start of HTML and CSS page

---
- Dreamweaver Video Tutorial #1 by Mrs. Cullen
- Dreamweaver Video Tutorial #2 by Mrs. Cullen
- Dreamweaver Video Tutorial #3 by Mrs. Cullen
- Dreamweaver Video Tutorial #4 by Mrs. Cullen

Homework #1: Mitch Resnick, Let’s Teach Kids to Code

One Paragraph Reflection (4-6 sentences): The importance of learning how to read and write code. How can this new skill help you beyond this classroom.

Homework #2: Complete any worksheets assigned in class

Week Outline and Class Objectives

• Intro. HTML
Videos to Inspire
Mitch Resnick, Let’s Teach Kids to Code
What Most Schools Don't Teach, Inspiration in Coding

Resources
HTML Handbook
Notepad Lesson with Mrs. Cullen (in the Classroom)

Assignments
Codecademy, Introduction to HTML chapter assignment
Introduction to HTML worksheet (use w3schools.com as a reference)

Week Outline and Class Objectives

• Copyright

Copyright Assignment

Copyright Links

• Design Principles

Design Principles, Pre-Assessment Assignment (to complete while out, only step #1)
Design Principles, Presentation & Exam (to complete while out)
---
Photography Composition
Food Photography Tricks

Color Combination Builder:
- Kuler
- Color Combos
- Color meanings in Business/Marketing

Site Resources
themeforest.net - attractive
www.webpagesthatsuck.com - not so attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site
http://www.templatemonster.com/demo/48160.html - responsive site

• Intro. HTML
Videos to Inspire
Mitch Resnick, Let’s Teach Kids to Code
What Most Schools Don't Teach, Inspiration in Coding

Resources
HTML Handbook
Notepad Lesson with Mrs. Cullen (in the Classroom)

Assignments
Codecademy, Introduction to HTML chapter assignment
Introduction to HTML worksheet (use w3schools.com as a reference)

Week Outline and Class Objectives

CLICK HERE FOR WHAT TO DO WHILE I AM OUT- .pdf Version (Oct. 8, 2014)

CLICK HERE FOR WHAT TO DO WHILE I AM OUT- Video Version (Oct. 8, 2014)

• Express Yourself
Indiv. Photos to Load in Class
Express Yourself Project Directions

Express Yourself Rubric

• Copyright

Copyright Assignment

Copyright Links

• Design Principles

Design Principles, Pre-Assessment Assignment (to complete while out, only step #1)
Design Principles, Presentation & Exam (to complete while out)
---
Photography Composition
Food Photography Tricks

Color Combination Builder:
- Kuler
- Color Combos
- Color meanings in Business/Marketing

Site Resources
themeforest.net - attractive
www.webpagesthatsuck.com - not so attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site
http://www.templatemonster.com/demo/48160.html - responsive site

Week Outline and Class Objectives

• Photoshop

Photoshop Disasters (for your entertainment)

Photoshop Interface (very basics)

• Express Yourself
Indiv. Photos to Load in Class
Express Yourself Project (empty rubric)
---
Web5: EYP, Pre-Assessment Analysis
Web7: EYP, Pre-Assessment Analysis

• Copyright

Copyright Assignment

Copyright Links

Week Outline and Class Objectives

• Photoshop

Photoshop Disasters (for your entertainment)

Photoshop Interface (very basics)

---
Content- Aware, Video and Content-Aware, Image to Load

--
Photoshop Worksheet

---

• Express Yourself
Indiv. Photos to Load in Class
Express Yourself Project (empty rubric)
---
Web5: EYP, Pre-Assessment Analysis
Web7: EYP, Pre-Assessment Analysis

Week Outline and Class Objectives

•  Key Word Building
Key Word Building Assignment
Example Project: https://twitter.com/css_web
Presentation Room

---

Exam, Web5
Exam, Web7

•  Photoshop

Next Revolution in Beauty, A-dobe Fotoshop (entertaining commercial)

Photoshop Interface (very basics)

Photoshop Copy Cat Drill
- The Killers, Process Example
---
- Taylor Swift Example
- Taylor Swift, to Load
---
- The Killers Example
- The Killers, to Load
---
- Photoshop Worksheet

Week Outline and Class Objectives

•  Forms to Fill Out & Info to Know

Sharing a Google Doc

Adobe to Load

•  Key Word Building
Key Word Building Assignment
Example Project: https://twitter.com/css_web
Presentation Room

---

Exam, Web5

•  Photoshop

Next Revolution in Beauty, A-dobe Fotoshop (entertaining commercial)

Photoshop Interface (very basics)

Photoshop Copy Cat Drill
- The Killers, Process Example
---
- Taylor Swift Example
- Taylor Swift, to Load
---
- The Killers Example
- The Killers, to Load
---
- Photoshop Worksheet

Week Outline and Class Objectives

• Forms to Fill Out & Info to Know
Flash Drive
Welcome Letter

Sharing a Google Doc

•  Poster Gallery

Directions for Exploring, Creating & Sharing

•  Key Word Building
Key Word Building Assignment
Example Project: https://twitter.com/css_web
Presentation Room

Week Outline and Class Objectives

• Forms to Fill Out & Info to Know
Computer Experience Survey
Welcome Letter

Fire Escape Plan from room 201
Natick High Web Design, Gallery Site

• Vidoes to Influence
Here is to the Crazy Ones
Smart is Sexy
Above and Beyond by: Peter Reynolds
Why I Create, by: Adobe
What Most Schools Don't Teach, Inspiration in Coding

•  Poster Gallery

Directions for Exploring, Creating & Sharing

•  Key Word Building
Key Word Building Assignment
Example Project: https://twitter.com/css_web
Presentation Room