CSS and HTML Exam(During Final Exam Block)
Hand in Guardian Rubric (Due during Final Exam Block)
Final Website Gallery Walk - Final Project Rubric
When your site is VERIFIED PUBLISHED, Clean up your desktop computer - files in the trash, log off accounts.
www.natickhighwebdesign.com/webspring2018/firstnamelastname
* This web address will only work if your home page is saved as index.html
FTP (File transfer protocol)
Instructions for FTP setup in Dreamweaver
Validator
Reset CSS
www.w3schools.com
Web fonts
Inspiration Websites at Templated.co
Adobe Kuler for web colors
Color Combos
Slideshow generator
Vertical Centering
100% Vertical Height Div
Saving for the Web in Photoshop CC
HTML & CSS Exam Study Guide
May 31: Publish 1st Draft of Home Page - Home Page Check-in Rubric
Jun 8: Publish Side Pages - Content Peer Grading Rubric
Jun 14: Publish Completed Final Site. Share Guardian Rubric (Due during Final Exam Block)
Exam Block: HTML and CSS Exam + Final Website Gallery Walk (no changes to your site can be made during or after the exam block) - Final Project Rubric
Video: How to publish your website
FTP (File transfer protocol) using Dreamweaver to publish your website.
Find your published home page: www.natickhighwebdesign.com/webspring2018/firstnamelastname
* This Web address will only work if your home page is saved as index.html
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 Combos
Slideshow generator
Vertical Centering
100% Vertical Height Div
Saving for the Web in Photoshop CC
Hopper article
Introduction to building in Dreamweaver CC, video #1 of 2
Introduction to building in Dreamweaver CC, video #2 of 2
Text Edit preferences
Google Classroom Question
Home Page - due May 31
File Structure Quiz (Practice on Socrative Login: FNIFL4U44) - Quiz on Tuesday
File Structure Quiz - 5/22
Grace Hopper "Debugging" video
Hopper article
Debugging Strategies: Root folder problems, control-click inspect, validator
Introduction to building in Dreamweaver CC, video #1 of 2
Introduction to building in Dreamweaver CC, video #2 of 2
FTP (File transfer protocol) using Dreamweaver to publish your website.
Find your published home page: www.natickhighwebdesign.com/webspring2018/firstnamelastname
* This Web address will only work if your home page is saved as index.html
May 31: Publish 1st Draft of Home Page - Home Page Check-in Rubric
Jun 8: Publish Side Pages - Content Peer Grading Rubric
Jun 14: Publish Completed Final Site. Share Guardian Rubric (Due during Final Exam Block)
Exam Block: HTML and CSS Exam + Final Website Gallery Walk (no changes to your site can be made during or after the exam block) - Final Project Rubric
How to make a fixed-layout gallery
How to make a flexible-layout gallery
Validator
Reset CSS
www.w3schools.com
Web fonts
Vertical Centering
100% Vertical Height Div
Font Design Article
Inspiration Websites at Templated.co
Adobe Kuler for web colors
Color Combos
Slideshow generator
Saving for the Web in Photoshop CC
Create the New Balance Example Page: Complete Video Tutorials 1-4 - due 5/18 (nothing to submit - will be checked in class)
File Structure Practice Quiz on Socrative (Login: FNIFL4U44) - quiz on Tuesday!
Mood Board - Submit 5/18
Submit Proposal for Final Project - Homework: Submit 5/22
- Review: How to save for web + When to use JPG, PNG, GIF + Examples
- Group Activity: Creating a grid layout for your photography page
- Extension Activity for Extra Credit: Complete Codecademy: Learn Responsive Design + Convert your photography page into a responsive layout using media queries.
New Balance Example Website: Complete Video Tutorials 1-4
NB Image 1
NB Image 2
Skills to learn: Nav, Hero and Content Divs, Creating a Side Page, Class vs. Id, Float + Clear, Footer.
Design Inspiration: Templated.co
Lorem Ipsum Generator
Adobe Kuler for web colors
Saving for the Web in Photoshop CC
CSS Reference at w3schools.com
How to create a background image in css3
How to Insert Web Fonts Video
Reset CSS
CSS Validator
Boilerplate Skeleton for HTML & CSS document
Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
HTML Validator
Codecademy | Learn CSS: 1. Selectors and Visual Rules (two parts) - due 5/10
Exit Slip #5
Complete Photography Composition Site
New Balance Videos
CSS Topics: Box Model, Float + Clear, Web fonts
Box Model
In-class Box-Model Demo website:
Photos for In-class Demo
New Balance Example Website: Complete Video Tutorials 1-4
NB Image 1
NB Image 2
Reset CSS
Introduction to CSS
Boilerplate Skeleton for HTML & CSS document
CSS Reference at w3schools.com
How to create a background image in css3
Design Inspiration Websites
Lorem Ipsum Generator
Adobe Kuler for web colors
Saving for the Web in Photoshop CC
Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator
Introduction to CSS worksheet - due 5/2
Codecademy | Learn CSS: 1. Selectors and Visual Rules (two parts) - due 5/10
Google Classroom Question #4 - due 5/4
New Balance Design Video + Worksheet
HTML Review: Skeleton, Container elements, id and class
CSS Topics: Box Model
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
In-class Box-Model Demo website:
Photos for In-class Demo
New Balance Example Website: Complete Video Tutorials 1-4
NB Image 1
NB Image 2
Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator
Saving for the Web in Photoshop CC
April 23 - 27
No Question/Exit Slip
HTML Kahoot Review
Understanding the Structure of an HTML Document study guide
Codecademy Learn CSS: 1. Selectors and Visual Rules (two parts)
Introduction to CSS worksheet
HTML Skeleton Quiz
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
Understanding the Structure of an HTML Document study guide
Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator
Saving for the Web in Photoshop CC
April 9 - 13
Exit Slip #4
Codecademy: Learn HTML: Elements and Structure 1 (Intro to HTML and HTML Doc Standards) - due 4/13
HTML Worksheet - due 4/11
Article for HTML practice + Image to include
Basics in Text Edit
- Tags to learn: skeleton of file, p, headings, images
Understanding the Structure of an HTML Document study guide
Text Edit preferences
HTML Tag cheatsheet
HTML5 Tag cheatsheet
Validator
April 2 - 6
HTML Worksheet
Codecademy Learn HTML: Elements and Structure 1
Bad Typography Video
Saving for the Web in Photoshop CC
Basics in Text Edit
- Tags to learn: skeleton HTML document, p, headings, images
What Most Schools Don't Teach, Inspiration in Coding
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
March 26 - 29
No Exit-Slip: End of term - check iPass and submit any late work (Email to notify me of any late submissions)
Design Principles Post-Instruction Website Critique - In class Tuesday 3/27
Review for Typography and Design Principles Quiz on Socrative - class code FNIFLRU44
Study for Quiz: Typography Form, Design Principles Form, and Design Handbook
Quiz Link Here- Thursday 3/29
Soft introduction to HTML!
Text Tutorials
Dafont.com
When to use jpg, gif, png + Examples
How to save for web
Raster vs. Vector
Photography Composition
Photography Composition Video
Food Photography Tricks
Colorable
Color Psychology
Choosing the Right Color for your Brand, video
Adobe Color CC
March 19 - 23
Exit Slip #3
Design Principles Video + Notes (google form) - due 3/20
Design Principles Handbook - Open using FIREFOX (won't work in chrome): take the practice quiz and screenshot your score to submit, due 3/23
Magazine Madness Project: Assignment + Rubric - due Friday 3/23 (submit both original and recreation as jpg files. Save original photoshop document on your flash drive and computer.)
Drop Shadow PS Tutorial
Text Tutorials
Dafont.com
Alignment article
How to save for web + When to use JPG, PNG, GIF + Raster vs. Vector
Pexels: A CC-Zero Image Library
How to create an animated GIF video + Example
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge
March 12 - 16
Exit Slip #3
Design Principles Video + Notes (google form) - due 3/20
Design Principles Handbook - take the practice quiz and screenshot your score to submit, due 3/23
Magazine Madness Project: Assignment + Rubric - due Friday 3/23 (submit both original and recreation as jpg files. Save original photoshop document on your flash drive and computer.)
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
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge
March 5 - 9
Google Classroom Question #2 - complete in class, due 3/9
Continue working on Magazine Madness Project: Assignment + Rubric
Design Principles Pre-Instruction Website Critique - Pre-Instruction Critique due 3/9
Design Principles Video + Notes - complete in class, due 3/9
Drop Shadow PS Tutorial
Text Tutorials
Dafont.com
Alignment article
How to save for web
Pexels: A CC-Zero Image Library
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge
February 26 - March 2
Homework: Magazine Madness Proposal + Final Project Example - submit proposal in google classroom - due 2/27
Complete one text tutorial of your choice - submit as a jpg in google classroom - due 3/1
Magazine Madness Project: Assignment + Rubric - due date TBA
Typography Questions + Typography video (to go with questions) - due 3/1 (complete in class)
Exit Slip #2 - due 3/1
Setting up the Magazine project document in photoshop
Understanding image size and resolution
Dafont.com
How to save for web
Pexels: A CC-Zero Image Library
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge
February 12 - 16
Photoshop Gallery Activity- submit as a jpg in google classroom - due 2/12
Photoshop Skills Checklist Project - submit in google classroom - due end of class 2/14
Homework: Magazine Madness Proposal + Final Project Example - submit proposal in google classroom - due 2/27
No Exit Slip/Question this week: Have a good break!
How to save for web
Pexels: A CC-Zero Image Library
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge
February 6 - 8
Google Classroom Question #1 - due Thursday, 2/8
Photoshop Gallery - complete in class
Welcome Letter - due Thursday, 2/8
Adjustment Layers Demonstration: Demo photo 1, Demo photo 2
Tools: layers, cut + paste, transform, lassos, content-aware fill, clone stamp, masks and adjustment layers, filter gallery
Tutorials:
Magic wand
Learn a tool of your choice: Photoshop Tool Galleries and teach your friend (image to learn on)
Quick selection
Photoshop Layer Mask Tutorials
Pexels: A CC-Zero Image Library
Photoshop Workspace
Photoshop Interface (very basics)
Photoshop Preview
Next Revolution in Beauty, A-dobe Fotoshop (entertaining commercial)
Photoshop Games!
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge
January 29 - February 2
Red Shirt Project - due 2/2
Exit Slip #1 - due 2/2
Welcome Letter - due Thursday, 2/8
Tools to learn: layers, cut + paste, transform, lassos, content-aware fill, clone stamp, masks and adjustment layers, filter gallery
Learn a tool of your choice: Photoshop Tool Galleries and teach your friend (image to learn on)
Photoshop Tool Galleries
Photoshop Basic Tools Tutorial
Photoshop Interface (very basics)
Videos to Inspire
Photoshop Preview
Next Revolution in Beauty, A-dobe Fotoshop (social criticism)
Photoshop Games!
Real or Photoshop Game
Pen Tool Challenge
Cool Colors Challenge
Welcome Letter - due Thursday, 2/8
HTML pre-assessment- complete in class
File Structure pre-assessment - complete in class
Copyright Assignment - complete in class
Keywords/Units & Seating
Logging in to your computer
Exploring the digital classroom
Tweet of the Week Introduction
Assignments: Welcome letter
Introductions: Turn Around and Meet My Friend
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
Creative Commons Video
Photoshop Preview
Using Standard District Template
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
Projects by Introduction to Web Design Students.
See my schedule for after-school hours and free periods.
