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

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

View File/Directory Organization & Publishing lecture. Do not log in--wait for me to talk to each of you independently about this.

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 - 6 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.

Class canceled. CSU Campus closure.

Mar 24

Catch Up Day

Mar 26

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.

Mar 31

Last day to submit exercises.

Read Working with Visual Weight in Your Designs

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.

Apr 2

Submit Exercise #8.

Read 10 Steps for Better Website Navigation.

Read Where Am I?

Navigation Lecture (Notes).

Photo preparation demonstration.

Work on project.

Apr 7

Read Your Key to Basic Web Analytics.

Web Analytics Lecture.

View What are website analytics? A complete starter’s guide.

Work on project.

Apr 9

Read How Google Search Works.

Reference: Google Search Engine Optimization Starter Guide

Reference: Google Ranking Factors

Search Engine Optimization Lecture.

Work on project.

Apr 14

Read: Google Shares New Mobile Page Speed Guidelines

Review: WebP Example

Reference: A new image format for the Web

Optional: Using WebP Images

Reference: Find out how you stack up to new industry benchmarks for mobile page speed

Reference: How Loading Time Affects Your Bottom Line

Tools: WebPageTest | TinyPNG | Google PageSpeed Insights | Website Speed Test Image Analysis Tool | Compress or Die | Squoosh

Load Time Lecture

HTML: View WebP Format video

Optional: Download webp-example.html to your /exercises folder.

Optional: Download bike-sculpture.png and midwinter-logo-600.png to your /images folder.

Work on project.

Apr 16

Style and layout due.

Read Usability 101

Reference: Simplified usability checklist

View Usability Lecture

Open Lab. Work on assignment.

Apr 21

Read Introduction to Web Accessibility

Reference: How to Meet WCAG (Quick Reference)

Reference: CSU Web Accessibility Guideline

Reference: Understanding WCAG 2 Contrast and Color Requirements

Tool: WebAIM Color Contrast Checker

Chromevox Plugin

Accessibility Lecture.

Review Test Topics

View Preliminary Design Hints.

Work on project.

Apr 23

Exam

Work on project.

Apr 28

Work on project.

Apr 30

Preliminary Report

In-class exercise.

Work on project.

May 5

Grade review.

Work on project.

May 7

Final Report due Fri. May 8, 11:59 pm.

Work on project.