Weekly Schedule

Jan 16

Instructor introduction.

Course introduction.

Take student survey.

Project ideas assignment.

Jan 18

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 HTML Naming Conventions and File Management

Read What Structure Should Your Website Have?

Definitions & File Management lecture

View and work along with HTML review and exercise video.

Jan 23

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 25

Read Image Types and Usage in Web Design

Digital Imaging & Photoshop Basics lecture

Optional: Download boots photo to work along with lecture.

Complete Photoshop/Imaging Exercise #1.

Jan 30

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 1

View Simple 1-Column CSS Layout.

Reference: Publishing Settings

File/Directory Organization & Publishing lecture

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

Feb 6

Read Understanding Your Web Audience

Read Personas

Audience Analysis lecture.

Complete Layout Exercise #2

Feb 8

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 Writing Great Alt Text

Catch up - Open Lab

Physical attendance optional - See Canvas for attendance credit assignment

Complete Layout Exercise #3

Feb 15

Read A Comprehensive Guide to Typography Basics

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 20

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 22

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.

Feb 27

Read: CSS Shorthand Guide

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

Work on Layout Exercise #5.

Feb 29

Finish Layout Exercise #5.

Mar 5

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 7

Turn in Preliminary content.

Finish Layout Exercise #6.

Open Lab 2-6 p.m.

Mar 11-16

No class. CSU Spring Break.

Mar 19

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.

Mar 21

Read Web Style Guide's Page Design Section.

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.

Mar 26

Last day to submit exercises.

Submit Exercise #8.

Read 10 Steps for Better Website Navigation.

Read Where Am I?

View Navigation Lecture Notes.

Photo preparation demonstration.

Work on project.

Mar 28

Read Your Key to Basic Web Analytics.

Read Google Analytics vs AWStats - What's the difference.

Web Analytics Lecture.

View Coding Links Demonstration.

Work on project.

Apr 2

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 4

Read How Google Search Works.

Reference: Google Search Engine Optimization Starter Guide

Reference: Google Ranking Factors

Search Engine Optimization Lecture.

Work on project.

Apr 9

Style and layout due.

Read Usability 101

Reference: Simplified usability checklist

Usability Lecture

Work on project.

Apr 11

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

View Accessibility Lecture

Test Review

Work on project.

Apr 16

Exam (rescheduled for Apr 18)

Work on project.

Apr 18

Go over test and next assignment.

In-class exercise.

Work on project.

Apr 23

Apr 25

Preliminary Report

Work on project.

Apr 30

Grade review.

Work on project.

May 2

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

Work on project.