CSU Ram Head Logo

JTC 372

Web Design and Management

Weekly Schedule

Class schedule will be developed during the course of the semester. I will keep the schedule 1-2 weeks in advance of the current class.

Week 1

Date

Assignment due

Activities

Aug 25 (Lab)

First day of class

Course introduction.

Take student survey

Project ideas assignment.

Aug 27 (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?

Definitions & file management lecture.

HTML overview lecture.

Install Brackets/Filezilla

Week 2

Date

Assignment due

Activities

Sep 1 (Lab)

Tool: Blank HTML5 Page

Reference: Emmet - the Essential Toolkit for Web Developers

Reference: Publishing Settings

Review project ideas

View File/Directory Organization & Publishing presentation

View Brackets & HTML5 Doctype presentation

HTML Group Exercise

Sep 3 (Remote)

 

Read Image Types and Usage in Web Design

View Digital Imaging & Photoshop Basics lecture

Week 3

Date

Assignment due

Activities

Sep 8 (Lab)

Complete Photoshop/Imaging Exercise #1.

Sep 10 (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

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

Week 4

Date

Assignment due

Activities

Sep 15 (Lab)

Layout Exercise #2

Review and catch-up day.

Sep 17 (Remote)

Read Understanding Your Web Audience

Review 2-column example

Reference: Flex Cheatsheet

Reference: : Styling lists

View Audience Analysis lecture.

Right click two-columns.html and save into /exercises.

Right click two-columns-example.css and save into /exercises/css.

View and work along with Two Columns Example video.

Layout Exercise #3.

Week 5

Date

Assignment due

Activities

Sep 22 (Lab)

Read Myth #1: People read on the web

Read Why Web Users Scan Instead of Reading

Read How to Create Web Content That Works.

Finish Exercise #3.

Sep 24 (Remote)

Read A Comprehensive Guide to Typography Basics

Reference: CSS Centering

Reference: www.cssfontstack.com

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.html to /exercises and backgrounds.css to /css)

Begin Exercise #4

Week 6

Date

Assignment due

Activities

Sep 29 (Lab)

Turn in Web site proposal and user analysis.

Optional: Download responsive-example.html to /exercises and responsive-example-style.css to /css.

Responsive design strategy #1: Size with percentages and max-width. View example and watch video explanation.

Finish Exercise #4

Oct 1 (Remote)

Three-column CSS layout

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 Exercise #5 (Part 1).

Week 7

Date

Assignment due

Activities

Oct 6 (Lab)

Read SEO 101: How to Write Compelling Title Tags

Read Document titles and title separators

Work on Exercise #5 .

Oct 8 (Bonus Lab Day If Necessary)

Read Alt Text

Read Writing Great Alt Text

Finish Exercise #5.

Week 8

Date

Assignment due

Activities

Oct 13 (Optional Lab Day)

Review: WebP Example

Reference: A new image format for the Web

Optional: Using WebP Images

Tool: Squoosh

Catch Up Day - Lab Attendance Optional

Responsive design strategy #2: Size images with percentage width. Watch video.

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

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

HTML: View WebP Format video

Oct 15 (Remote)

Preliminary content (Due Friday Oct 16)

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.

CSS: View Hover Effect Video

Begin Exercise #6.

Week 9

Date

Assignment due

Activities

Oct 20 (Lab)

Read: Shorthand Properties

Download block-inline.html to /exercises folder.

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

View: CSS Shorthand video.

Finish Exercise #6.

Oct 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

View Responsive Design Lecture.

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

Responsive design tip #3: Use media queries.

Work along with Exercise 7.

Optional: View Using Filezilla Site Manager

Week 10

Date

Assignment due

Activities

Oct 27 (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.

Work on project.

Oct 29 (Remote)

Read 10 Steps for Better Website Navigation.

Read Where Am I?

View: Navigation lecture.

View: Coding Links Demonstration.

Work on project.

Week 11

Date

Assignment due

Activities

Nov 3 (Lab)

Read Your Key to Basic Web Analytics.

View Web analytics lecture.

Work on project.

Nov 5 (Remote)

Read How Google Search Works.

Reference: Google Search Engine Optimization Starter Guide

Reference: Google Ranking Factors

View Search Engine Optimization lecture.

Work on project.

Week 12

Date

Assignment due

Activities

Nov 10 (Remote)

Style and layout due.

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

View Load Time Lecture.

Work on project.

Nov 12

Read Usability 101

Reference: Simplified usability checklist

View Style and Layout Grading Summary.

View Usability Lecture.

View Preliminary Design Hints

Work on project.

Week 13

Date

Assignment due

Activities

Nov 17

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 Accessibility Lecture.

For test information, please see the Canvas announcement.

Work on project.

Nov 19

Test

Work on project.

Week 14

Date

Assignment due

Activities

Dec 1 (Remote)

Preliminary Report

Work on project.

Dec 3 (Remote)

Work on project.

Week 15

Date

Assignment due

Activities

Dec 8 (Remote)

Work on project.

Dec 10 (Remote)

Final Report due Fri. Dec 11, 11:59 pm.

Work on project.