Weekly Schedule

Jan 20

Instructor introduction.

Course introduction.

Take student survey.

Project ideas assignment.

Jan 22

Turn in two project ideas.

Read A Respected MIT Professor Had a Simple 4-Word Rule for His Classroom, and Every Company Should Follow It

Read Rolling out the mobile-friendly update

Read How to Name HTML Files

Read What Structure Should Your Website Have?

Definitions & File Management lecture

View and work along with HTML review and exercise video.

Jan 27

Tool: Blank HTML5 Page

Reference: Emmet - the Essential Toolkit for Web Developers

Review project ideas

Brackets & HTML5 Doctype lecture and group exercise. Create second test page.

Jan 29

Read Image Types and Usage in Web Design

Digital Imaging & Photoshop Basics lecture

View Object Selection

Optional: Download boots photo to work along with lecture.

Complete Photoshop/Imaging Exercise #1.

Feb 3

Read Learn CSS Today The Easy Way

Read Standardizing CSS class and id names

Reference: CSS Box Model

Right click to save CSS example file into your /exercises folder.

View CSS Lecture and Exercise

Feb 5

View Simple 1-Column CSS Layout.

Reference: Publishing Settings

View File/Directory Organization & Publishing lecture

Complete Layout Exercise #1 using Layout Exercise #1 Video.

Feb 10

Read Understanding Your Web Audience

Read Personas

Audience Analysis lecture.

Complete Layout Exercise #2

Feb 12

Read Myth #1: People Read on the Web

Read How to Create Web Content That Works.

Read How to Improve Your Website Readability Score

Review 2-column example

Reference: main HTML tag

Reference: Aside HTML tag

Reference: Flex Cheatsheet

Reference: Styling lists

Tool: readable.com

Right click Two Columns Example HTML page (two-columns.html) and save into /exercises.

Right click Two Columns Example CSS Page (two-columns-example.css) and save into /exercises/css.

View and work along with Two Columns Example video.

Begin Layout Exercise #3

Read SEO 101: How to Write Compelling Title Tags

Read Document titles and title separators

Read Alt Text

Read How To: Write Good Alt Text

Catch up - Open Lab (3 - 5 p.m.)

Physical attendance optional - See Canvas for attendance credit assignment

Complete Layout Exercise #3

Feb 19

Read A Comprehensive Guide to Typography Basics

Watch The History of Typography - Animated Short

Optional: Watch Helvetica

Reference: Using Single Google Font

Reference: CSS Centering

Reference: CSS Font Stack

Reference: Fonts In Use – Type at work in the real world.

Optional: Better CSS Font Stacks

Optional: Slash Page Load Times with CSS Font Subsetting

Optional (but fun): Read The reason every meme uses that one font

Typography Lecture.

Demonstration: How to Use a Single Google Font.

CSS: CSS Centering Video

CSS: Background Images Video

(Optional files: Right-click to save Backgrounds Example Page (backgrounds.html) to /exercises and Backgrounds CSS file (backgrounds.css) to /css)

Begin Layout Exercise #4.

Feb 24

Turn in Web site proposal and user analysis.

Sample Files:

Right-click over link to save responsive-example.html into your /exercises folder.

Right-click over link to save responsive-example-style.css into your /exercises/css folder.

Responsive design strategy #1: Size with percentages and max-width. View video.

Complete Layout Exercise #4.

Feb 26

Review Three-column CSS layout

Sample Files:

Right-click over link to save 3columns.html into your /exercises folder.

Right-click over link to save 3columns-example.css into your /exercises/css folder.

View Three-Column Layout video.

Photoshop: Watch Kerning/Tracking, PNG-24, Free Transform, Crop Tool Preset video.

CSS: View Setting Images to Display Block video

Begin Layout Exercise #5.

Mar 3

Read: CSS Shorthand Guide

Responsive design tip #2: Size images with percentages and height: auto.

Work on Layout Exercise #5.

Mar 5

Finish Layout Exercise #5.

Mar 10

Read The CSS class selector.

Read HTML Block and Inline Elements.

Optional: Right-click over link to save classes-example.html into your /exercises folder and classes-example.css to your /css folder.

HTML: View and (optionally) work along with the CSS Classes video.

Optional: Download block-inline.html to /exercises folder.

CSS: View and (optionally) work along with Block vs. Inline video

CSS: View Hover Effect Video

Begin Layout Exercise #6.

Mar 12

Turn in Preliminary content.

Catch Up Day