Weekly Schedule

Jan 18

No class. University holiday.

Jan 20 (Remote)

Course introduction.

• Read CSU COVID-19 Policy
• View instructor introduction video
• View course details video

Take student survey

Project ideas assignment.

Jan 25 (Remote)

Turn in two project ideas.

Read Rolling out the mobile-friendly update

Read HTML Naming Conventions and File Management

Read What Structure Should Your Website Have?

View Definitions & file management lecture.

View and work along with HTML review lecture.

Install Brackets/Filezilla

Jan 27 (Lab)

Tool: Blank HTML5 Page

Reference: Emmet - the Essential Toolkit for Web Developers

Reference: Publishing Settings

Review project ideas

View File/Directory Organization & Publishing lecture

View Brackets & HTML5 Doctype lecture

HTML Group Exercise

Feb 1 (Remote)

Read Image Types and Usage in Web Design

View Digital Imaging & Photoshop Basics lecture

Feb 3 (Lab)

Complete Photoshop/Imaging Exercise #1.

Feb 8 (Remote)

Read Learn CSS Today The Easy Way

Read Standardizing CSS class and id names

View Simple 1-Column CSS Layout.

Reference: CSS Box Model

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

View CSS Lecture and Exercise

Feb 10 (Lab)

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

Review and catch-up day.

Feb 15 (Remote)

No class today. CSU cancelled all classes.

Feb 17 (Lab)

Read Understanding Your Web Audience

View Audience Analysis lecture

Complete Layout Exercise #2

Feb 22 (Remote)

Read Myth #1: People read on the web

Read Why Web Users Scan Instead of Reading

Read How to Create Web Content That Works.

Review 2-column example

Reference: main HTML tag

Reference: Aside HTML tag

Reference: Flex Cheatsheet

Reference: : Styling lists

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.

Feb 24 (Lab)

Turn in Web site proposal and user analysis.

Complete Layout Exercise #3

Mar 1 (Remote)

Read A Comprehensive Guide to Typography Basics

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

View Typography Lecture.

Optional: Watch Helvetica (requires free Kanopy account registration).

Demonstration: How to Use Google Fonts Video

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)

Mar 3 (Lab)

Complete Layout Exercise #4.

Mar 8 (Remote)

Review Three-column CSS layout

Read SEO 101: How to Write Compelling Title Tags

Read Document titles and title separators

Read Alt Text

Read Writing Great Alt Text

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

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 10 (Lab)

Turn in Preliminary Content (due Mar 12)

Finish Layout Exercise #5.

Mar 15 (Remote)

Mar 17 (Lab)

Read: Shorthand Properties

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

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

Download block-inline.html to /exercises folder.

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

CSS: View Hover Effect Video

Complete Layout Exercise #6.

Mar 22 (Remote)

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

Potential Open Lab Day: Contact me if you're interested.

View Responsive Design Lecture.

Example: jtc372.net/course/examples/image-width.html

Work along with Layout Exercise #7.

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

Mar 24 (Lab)

Sample web sites assignment.

Read Web Style Guide's Page Design Section.

Read Working with Visual Weight in Your Designs

Read: All Websites Look The Same

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

Reference: Principles of Design Quick Reference Poster

View Design Lecture.

Open lab catch up day - lab attendance optional

Work on project.

Mar 29 (Lab)

Read Your Key to Basic Web Analytics.

Read 10 Steps for Better Website Navigation.

Read Where Am I?

Special lab session. Notify me if you plan to attend.

View Web Analytics Lecture.

View Navigation Lecture.

View Coding Links Demonstration.

Work on project.

Mar 31 (Remote)

Read How Google Search Works.

Reference: Google Search Engine Optimization Starter Guide

Reference: Google Ranking Factors

No in-person lab today.

View Search Engine Optimization Lecture.

Work on project.

April 5 (Remote)

Review: WebP Example

Reference: A new image format for the Web

Optional: Using WebP Images

Read: Google Shares New Mobile Page Speed Guidelines

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

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

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

HTML: View WebP Format video

View Load Time Lecture.

Work on project.

April 7 (Lab)

Style and layout due.

Read Usability 101

Reference: Simplified usability checklist

View Usability Lecture.

Work on project.

Apr 19 (Remote)

Read What is 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 Style and Layout Grading Summary.

View Preliminary Design Hints.

View Accessibility Lecture.

View Test Review (Canvas).

Work on project.

Apr 21 (Remote)

Work on project.

Apr 26 (Remote)

Test

Work on project.

Apr 28 (Remote)

Preliminary Report

Work on project.

May 3 (Remote)

Work on project.

May 5 (Remote)

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

Work on project.