Weekly Schedule

Aug 26

Instructor introduction.

Course introduction.

Take student survey.

Project ideas assignment.

Aug 28

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.

Sep 2

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.

Sep 4

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.

Sep 9

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

Sep 11

View Simple 1-Column CSS Layout.

Reference: Publishing Settings

View File/Directory Organization & Publishing lecture

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

Sep 16

Read Understanding Your Web Audience

Read Personas

Audience Analysis lecture.

Complete Layout Exercise #2

Sep 18

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

Sep 25

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.

Sep 30

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.

Oct 2

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.

Oct 7

Read: CSS Shorthand Guide

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

Work on Layout Exercise #5.

Oct 9

Finish Layout Exercise #5.

Oct 14

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.

Oct 16

Turn in Preliminary content.

Catch Up Day

Oct 21

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.

Ocxt 23

Last day to submit exercises.

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.

Oct 28

Submit Exercise #8.

Read 10 Steps for Better Website Navigation.

Read Where Am I?

Navigation Lecture (Notes).

Photo preparation demonstration.

Work on project.

Oct 30

Read Your Key to Basic Web Analytics.

Web Analytics Lecture.

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

Work on project.