INTRODUCTION TO
WEB DESIGN

Objectives

Agenda

HTML & CSS Exam (During Final Exam Block)
Hand in Guardian Rubric (Due during Final Exam Block)
Final Website Gallery Walk - Final Project Rubric
Publish your site. Instructions for publishing using Dreamweaver
When your site is VERIFIED PUBLISHED, Clean up your desktop computer - files in the trash, log off accounts.

Extra Credit: Share your website with a friend. Form must be submitted by noon on 1/15 for 10pts extra credit.

Advanced Web Permission Form

Objectives

Agenda

Student Survey
Publish Final Website
HTML & CSS Unit Exam Study Guide: nothing to submit - prepare for exam block
HTML & CSS Unit Exam Jeopardy Game (Download and open in PowerPoint to play)

Final Project Due dates and Rubrics

Week 17: 1st Draft Home Page - Home Page Feedback Rubric
Week 17: Side Pages - Content Peer Grading Rubric
Week 18: Completed Site Due. Share Guardian Rubric (Due on Final Exam Block)
Submit Final Website on teacher flash drive.
Exam Block: Final Website Gallery Walk (no changes to your site can be made during or after the exam block) - Final Project Rubric

Resources for Final Project

Validator
Reset CSS
www.w3schools.com
Web fonts
Inspiration Websites at Templated.co
Adobe Color for web colors
Color Safe
Contrast Checker
Slideshow generator
Vertical Centering
100% Vertical Height Div
How to make a background image
Saving for the Web in Photoshop CC

Objectives

Agenda

HTML & CSS Unit Exam Study Guide: nothing to submit - prepare for exam block

Final Project Due dates and Rubrics

Week 17: 1st Draft Home Page - Home Page Feedback Rubric
Week 17: Side Pages - Content Peer Grading Rubric
Week 18: Completed Site Due. Share Guardian Rubric (Due on Final Exam Block)
Submit Final Website on teacher flash drive.
Exam Block: Final Website Gallery Walk (no changes to your site can be made during or after the exam block) - Final Project Rubric

Resources for Final Project

Validator
Reset CSS
www.w3schools.com
Web fonts
Inspiration Websites at Templated.co
Adobe Color for web colors
Color Safe
Contrast Checker
Slideshow generator
Vertical Centering
100% Vertical Height Div
How to make a background image
Saving for the Web in Photoshop CC

Objectives

To Submit

File Structure Quiz
Proposal for Final Project - Due Monday

Final Project Due dates and Rubrics

Week 17: 1st Draft Home Page - Home Page Feedback Rubric
Week 17: Side Pages - Content Peer Grading Rubric
Week 18: Completed Site Due. Share Guardian Rubric (Due on Final Exam Block)
Submit Final Website on teacher flash drive.
Exam Block: Final Website Gallery Walk (no changes to your site can be made during or after the exam block) - Final Project Rubric

Resources for Final Project

Validator
Reset CSS
www.w3schools.com
Web fonts
Inspiration Websites at Templated.co
Adobe Color for web colors
Color Safe
Contrast Checker
Slideshow generator
Vertical Centering
100% Vertical Height Div
How to make a background image
Saving for the Web in Photoshop CC

Objectives

To Submit

Finish Moodboard + submit zipped root folder to Google Classroom
File Structure Quiz - On Monday
Proposal for Final Project - Due Monday

Final Project Due dates and Rubrics

Week 17: 1st Draft Home Page - Home Page Feedback Rubric
Week 17: Side Pages - Content Peer Grading Rubric
Week 18: Completed Site Due. Share Guardian Rubric (Due on Final Exam Block)
Submit Final Website on teacher flash drive.
Exam Block: Final Website Gallery Walk (no changes to your site can be made during or after the exam block) - Final Project Rubric

Agenda

Grace Hopper "Debugging" video
Debugging Strategies: Root folder problems (review file structure), control-click to inspect elements in chrome, * selector to set background-color or borders to check page structure, clear your floats, html validator,

Resources for Final Project

How to make a fixed-layout gallery
How to make a flexible-layout gallery
Validator
Reset CSS
www.w3schools.com
Web fonts
Font Design Article
Inspiration Websites at Templated.co
Adobe Kuler for web colors
Color Safe
Contrast Checker
Slideshow generator
Vertical Centering
100% Vertical Height Div
How to make a background image
Saving for the Web in Photoshop CC
Introduction to building in Dreamweaver CC, video #1 of 2
Introduction to building in Dreamweaver CC, video #2 of 2
Text Edit preferences

Objectives

To Submit

Moodboard Website Assignment- extended: due next week
Global Learner Badge #7

Agenda

Final Project Due dates and Rubrics

Week 17: 1st Draft Home Page - Home Page Feedback Rubric
Week 17: Side Pages - Content Peer Grading Rubric
Week 18: Completed Site Due. Share Guardian Rubric (Due on Final Exam Block)
Submit Final Website on teacher flash drive.
Exam Block: Final Website Gallery Walk (no changes to your site can be made during or after the exam block) - Final Project Rubric

Agenda

Color: HEX, RGB, RGBA, HSL, HSLA - what do they mean and which to use?
Accessibility: Color Safe and Contrast Checker

Resources

How to make a fixed-layout gallery
How to make a flexible-layout gallery
How to make a background image
Validator
Reset CSS
www.w3schools.com
Web fonts
Vertical Centering
100% Vertical Height Div
Font Design Article
Inspiration Websites at Templated.co
Adobe Color for web colors
HSL Color Picker
Color Safe
Contrast Checker
Slideshow generator
Saving for the Web in Photoshop CC Introduction to building in Dreamweaver CC, video #1 of 2
Introduction to building in Dreamweaver CC, video #2 of 2

Objectives

Assignments

Moodboard Slideshow + Assignment
Moodboard Extra Credit Options:
1. Add a Media Query to your gallery. Tutorial here and Example here
2. Create a Tab Gallery using Javascript
File Structure Practice Quiz on Socrative (Login: FNIFL4U44) - quiz next week
Quick Feedback

In-Class Activities

- Review: How to save for web + When to use JPG, PNG, GIF + Examples
- Layout: Combining % and pixels using the box-sizing: border-box; rule
- Creating a grid layout for your moodboard website: How to make a flexible-gallery grid layout (Using float, clear, and box-sizing rules)
Layout Demo: Fixed vs Responsive Design
How to Insert Web Fonts Video
- Extension Activity for Extra Credit: Complete Codecademy: Learn Responsive Design + Convert your photography page into a responsive layout using media queries.

Design Resources

Design Inspiration: Templated.co
Lorem Ipsum Generator
Adobe Color for web colors
HSL Color Picker
Color Safe
Contrast Checker
Saving for the Web in Photoshop CC

CSS Resources

CSS Reference at w3schools.com
How to create a background image in css3
How to Insert Web Fonts Video
Reset CSS
CSS Validator

HTML Resources

Boilerplate Skeleton for HTML & CSS document
Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
HTML Validator

Objectives

Assignments

Khan Academy More CSS Selectors
Moodboard Slideshow + Assignment - due next week
Global Learner Badge #6

Agenda

Color: HEX, RGB, RGBA, HSL, HSLA - what do they mean and which to use?
Accessibility: Color Safe and Contrast Checker

Design Resources

Design Inspiration Websites
Lorem Ipsum Generator
Adobe Color for web colors
HSL Color Picker
Color Safe
Contrast Checker
Saving for the Web in Photoshop CC
Color Psychology
Choosing the Right Color for your Brand, video
Adobe Color CC

CSS Resources

How to make a fixed-layout gallery
How to make a flexible-layout gallery
Box Model
Reset CSS
Introduction to CSS
Boilerplate Skeleton for HTML & CSS document
CSS Reference at w3schools.com
How to create a background image in css3

HTML Resources

Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator

Objectives

Assignments

Khan Academy CSS Layout
Complete Video Tutorials 3 and 4: New Balance Practice Website
Image to use for Hero Div: NB Image 1
Image to use for small div: NB Image 2
Skills to learn: Hero and Content Divs, Class vs. Id, Float + Clear, Footer.
Class Demo: Add a side page
Quick Feedback
Looking Ahead: Moodboard Slideshow and Assignment due next week

Design Resources

Color Psychology
Choosing the Right Color for your Brand, video
Adobe Color CC

CSS Resources

Box Model
Photos for Demo Website
Reset CSS
Introduction to CSS
Boilerplate Skeleton for HTML & CSS document
CSS Reference at w3schools.com CSS Zen Garden
HTML to make your own Zen Garden Design

HTML Resources

Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator
Saving for the Web in Photoshop CC

Objectives

Assignments

Khan Academy CSS Text Properties
Global Learner Badge #5
Introduction to CSS worksheet
New Balance Practice Website: Complete Video Tutorial 2
Skills to learn: Nav and reset.css

Agenda

More Ways to Embed CSS Khan Academy Videos: Inline, Internal, External, and Browser Defined
Topics In-class:
1. Review HTML Worksheet
2. Introduction to the Box Model in CSS + Adding divs, id and class to HTML
3. CSS Worksheet

CSS Resources

Introduction to CSS: Skeleton, Selectors, Divs, Comments
Reset CSS
Introduction to CSS
Boilerplate Skeleton for HTML & CSS document
CSS Reference at w3schools.com
CSS Zen Garden
HTML to make your own Zen Garden Design

HTML Resources

Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator
Saving for the Web in Photoshop CC

Objectives

To Submit

No badge/question this week. For end of term: check iPass and follow up on missing work
HTML Skeleton Quiz - Thursday
HTML Worksheet
Khan Academy videos + challenges of CSS Basics: selectors, color, id, class
New Balance Practice Website: Complete Video Tutorial 1 Skills to learn: File Structure/Setting up your root folder

Agenda

HTML Skeleton Quiz
Work through assignments in class: HTML Worksheet (W3schools as a resource), Introduction to CSS, Setting up file structure for NB website.

CSS Resources

Reset CSS
Introduction to CSS
Boilerplate Skeleton for HTML & CSS document
CSS Reference at w3schools.com
CSS Zen Garden
HTML to make your own Zen Garden Design

HTML Resources

Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator

Objectives

To Submit

view Khan Academy videos of HTML Basics and More HTML Tags and work through the challenges
HTML Markup Article + Image to include
Quick Feedback

Agenda

1. Codecademy Course: Make a Website, Lesson 1: Site Structure
2. HTML Mark-up Assignment (Boston Marathon Article)
3. As a Class: Khan Academy videos + challenges of CSS Basics: selectors, color, id, class
4. Small Group Activity: Understanding the Structure of an HTML Document study guide for quiz

Resources

What Most Schools Don't Teach, Inspiration in Coding
Saving for the Web in Photoshop CC
What is a Web Browser? video
How the Internet Works Video
Mitch Resnick, Let’s Teach Kids to Code Video
Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator
Boilerplate Skeleton for HTML & CSS document

Objectives

To Submit

Design Principles + Typography Quiz
Global Learner Badge #4

Agenda

1. Practice Quiz for Typography and Design Principles Quiz on Socrative - class code FNIFL4U44
Review your Resources for Typography and Design Principles Quiz: Typography Form, and your notes from the Design Principles Video
2. Video: What Most Schools Don't Teach, Inspiration in Coding Reflection Questions: Why do you think people may be intimidated by coding? Why is coding worth learning? What are some other classes at Natick High related to computer science?
3. Introduction to HTML: Skeleton for HTML document, essential tags (paragraphs, headings, lists, emphasis, images. As a class, view Khan Academy videos of HTML Basics and work through the Challenges
4. What is a Web Browser? video
- Download Sublime Text from Managed Software Center (or use text edit: see Text Edit preferences set-up in Resources)
- Offline Challenge: Create an html skeleton in the text editor: Look at how the text editor and browser are used to create and preview html documents.

Resources

Design Handbook (open in Firefox)
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge

Objectives

To Submit

Google Classroom Question #3
Submit the Zen Garden Mockup Challenge: Text for Design Mockup + Rubric - (submit as jpg or png file. Also save your photoshop (.pdf) version on your flash drive and computer as a backup.)

Agenda

- Google Classroom Question #3
- Zen Garden Mockup
- Design Principles Post-Critique

Resources for Magazine Project

Drop Shadow PS Tutorial
Text Tutorials
Dafont.com
Alignment article
How to save for web
Pexels: A CC-Zero Image Library
How to create an animated GIF video + Example

Objectives

To Submit

Global Learner Badge #2
Design Principles Post-Instruction Website Critique - complete in class this week, after group critique activity

Agenda

1. Design Principles Pre-Instruction Critique (Part 1-2 Only)
2. View the Design Principles Video + review notes to be used for critique and quiz and discuss how design principles are used in the Zen Garden projects.
3. Continue the Zen Garden Mockup Challenge: Text for Design Mockup + Rubric - due week 7

Resources

Css Zen Garden
Drop Shadow PS Tutorial
Text Tutorials
Dafont.com
Alignment article
How to save for web
Pexels: A CC-Zero Image Library

Photoshop Games

Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge

Objectives

To Submit

Typography Questions + Typography video (to go with questions) (complete in class)
Google Classroom Question #2
Design Principles Pre-Instruction Website Critique - Pre-Instruction Critique, STEP 1-2 ONLY: due this week

Agenda

1. Finish Photoshop Gallery Activity + Digital Attribution Form.
2. Gallery Walk to share Photoshop Projects - Leave Post-it note comments: write two things you like and one suggestion for improvement for another student.
3. View Bad Typography Video: Discussion question: Why does design matter? Can you think of a time when good or bad design impacted your life?
- Group Website Practice Critique to prepare for the design principles writing assignment. Instructions:
- View the Design Principles Video - take notes (google form) to be used for critique and quiz and discuss how design principles are used in the Zen Garden projects.
4. Introduce the Zen Garden Mockup Challenge: Text for Design Mockup + Rubric - due week 7

Resources

Css Zen Garden

Dafont.com
How to save for web
Pexels: A CC-Zero Image Library
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge

Objectives

To Submit

Photoshop Poetry Gallery Activity- submit as a jpg in google classroom
Digital Attributions Form (for the photoshop gallery project) - submit with photoshop gallery project
Global Learner Badge #1

Agenda

1. Copyright and Fair Use Video + Discussion Questions
2. Creative Commons Video + Overview of image resources ( Pexels: A CC-Zero Image Library,
Creative Commons Images)
3. Begin Photoshop Poetry Gallery + Digital Attributions Form (To cite the photos used in the photoshop gallery project)

Resources

How to save for web
Creative Commons Images
Pexels: A CC-Zero Image Library
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge

Objectives

To Submit

Google Classroom Question #1
Photoshop Skills Checklist Project - submit your completed photoshop skills screenshots to google classroom. Due end of this week.

Agenda

1. Tool Demonstrations: Content-aware Fill, Magic wand, Quick selection, Clone Stamp, Masks and Adjustment Layers (Photoshop Layer Mask Tutorials), Filters
2. Adjustment Layers Demonstration: Demo photo 1, Demo photo 2 - Use adjustment layers to recreate the apocalyptic feel of Image 2 in Image 1
3. Photoshop Skills Checklist Project: In small groups, learn one of the four skill sets to teach the class. Groups begin presenting if time allows - all students complete all checklist skills as demonstrated.

Resources

Pexels: A CC-Zero Image Library
Creative Commons Images
Photoshop Workspace
Photoshop Interface (very basics)
Photoshop Tool Galleries Next Revolution in Beauty, A-dobe Fotoshop (entertaining commercial)

Photoshop Games!
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge

Objectives

To Submit

Introduction Card
Homework: Welcome Letter + Bring a flash drive to class - Due Thursday 1/30 or Monday 2/3

Agenda

1. Tool Demonstrations: layers, cut + paste, transform, lassos
2. Time to explore some photoshop tools on your own: Photoshop Tool Galleries Write a "how to" question on the board
3. Chimera Project
4. Saving your project for submission: Understanding image size and resolution
5. Join Google Classroom - to be used for submitting digital work

Resources

Scholastic Copyright Guidelines
Remixed Artwork Attribution Guidelines
Pexels: A Free Stock Photo Library
Creative Commons Images
Photoshop Tool Galleries
Photoshop Basic Tools Tutorial
Photoshop Interface (very basics)

Videos to Inspire
Creative Commons Video
Photoshop Preview
Next Revolution in Beauty, A-dobe Fotoshop (social criticism)

Photoshop Games!
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge

Welcome to the course syllabus! Assignments to be submitted each week are indicated with the symbol. Classtime is provided for most assignments, however any unfinished work must be completed as homework at the end of each week, and are due the following class.

Objectives

To Submit

Introduction Card
Exploring the digital classroom-
HTML pre-assessment- complete in class
File Structure pre-assessment - complete in class

Agenda: Introduction to Course

Informed Consent Letter for Online Resources
Keywords/Units & Seating: students take a random card with a keyword from the course - seats are assigned by keyword groups
Logging in to your computer: Login with period#, no password
Next week: Welcome letter + Bring a flash drive to class
Introductions: Turn Around and Meet My Friend
Exploring the digital classroom- Teacher will print handout for group activity
Pre-Assessments: Not graded, checking prior knowledge (no experience required)
Looking Ahead: Photoshop Preview Video
Photoshop Tool Demonstrations: layers, cut + paste, transform, lassos

Resources

Handbook
Fire Escape Plan from room 201
Creative Commons Search
Pexels: A CC-Zero Image Library
Student Website Examples

Videos to Inspire

Here is to the Crazy Ones
Smart is Sexy 
Why I Create, by: Adobe 
Photoshop Preview 

Unit 1: Photoshop
Unit 2: Design Principles
Unit 3: HTML
Unit 4: CSS
Unit 5: Project Management
Unit 6: Dreamweaver | Project Website

Archived syllabus: Spring 2017
Archived syllabus: Fall 2017
Archived syllabus: Spring 2018