Weekly Schedule

Jan 21

Instructor introduction.

Course introduction.

Take student survey.

Project ideas assignment.

Jan 23

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 28

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 30

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 4

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 6

View Simple 1-Column CSS Layout.

Reference: Publishing Settings

File/Directory Organization & Publishing lecture

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

Feb 11

Read Understanding Your Web Audience

Read Personas

Audience Analysis lecture.

Complete Layout Exercise #2

Feb 13

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 (2:30 - 6 p.m.)

Physical attendance optional - See Canvas for attendance credit assignment

Complete Layout Exercise #3

Feb 20

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 25

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 27

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 4

Read: CSS Shorthand Guide

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

Work on Layout Exercise #5.

Mar 6

Finish Layout Exercise #5.

March 11

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.

March 13

Turn in Preliminary content.

Mar 17-21

No class. CSU Spring Break.

March 25

Read Beginner's Guide to Responsive Web Design

Read Google: Rolling out the mobile-friendly update

Reference: Google: Mobile-Friendly Test

Optional: Responsive Web Design (alistapart.com)

Optional: A Pixel is Not a Pixel

Optional (but it will make your life easier!): View Using Filezilla Site Manager

Responsive Design Lecture

Work along with Layout Exercise #7.

Finish Layout Exercise #6.

March 27

Read Working with Visual Weight in Your Designs

Read: All Websites Look The Same

Read Purpose of Wireframes: Why Product Teams Use Them

Optional (but fun!): Read ‘Space Jam’ Forever: The Website That Wouldn’t Die

Reference: Principles of Design Quick Reference Poster

Design lecture.

Begin Exercise #8 in class.

Work on project.