Schedule Sec. 1

Week 1—Introduction

T January 9

Syllabus / Intro Notes
Overview of course
Flash drive – saving projects

TH January 11

Lecture: Designing Interfaces

Week 2—HTML Building Blocks

CodeAcademy: HTML Elements and Structure

January 16

HTML: Hypertext Mark-up Language

Class Notes- week 2
Workshop: Build Blackbird site

TH January 18

partial Blackbird

Workshop: Build Blackbird site

Week 3—  HTML Flow

CodeAcademy:HTML Tables

January 23

Digital Canvas – submit!

DTC Superpower survey

Overview: page structure, nesting, semantic elements, IDs and Classes, lists
Block and Inline, HTML flow
divs and spans

Class Notes week 3

TH January 25

Photoshop Basics:  sizes, tools, transparency, grid
Preparing Images for the web
Formatting Images
Intro to CSS

Week 4— CSS

CodeAcademy:Selectors and Visual Rules, Box Model, Changing the Box Model

January 30

Uploading site to server…
CSS Intro

Class Notes – week 4

TH February 1

Find url of your blackbird site…

Formatting Text: 

Overview of HTML (Quiz 1 review):

 Week 5— Color, Imagery, Type, Layout

CodeAcademy:CSS Display and Positioning, Color, Typography

T  February 6

Quiz#1 – HTML (10%)

Tech 101 Workshops

DTC Superpower survey

Class Notes – week 5

TH February 8

Multi-Column Layout

WORKSHOP: Blackbird Project

 Week 6—Recipe Project: Visual Hierarchy

CodeAcademy: CSS Grid

Reading (optional): 

February 13

Visual Hierarchy Primer

Class Notes – week 6

TH February 15

CSS3 Generator

Validate the html and css of your site:

blackbird projects list

Blackbird Project – 10%
Format and style Wallace Steven’s poem “Thirteen Ways of Looking at a Blackbird” in a one page HTML document with an external CSS stylesheet. Your pages must have at least the following :

  1. one external link
  2. one internal or anchor link
  3. one image insert
  4. one background image

The assignment will be graded based on the functional and proper uses and syntax of HTML mark-up and CSS styles.  Though I am not grading on the quality of your design and layout, please put some effort into a pleasing look.  Extra credit will be given if your design attempts to reflect an interpretation of the poem’s meaning!

Week 7—Recipe Project: Responsive Design

CodeAcademy: Responsive Design- Sizing Elements

Assignment: Choose a recipe and gather text/ images. Bring to class.

Reading: CSS Responsive

-Finish Blackbird Projects
-Study for CSS Quiz!

February 20

Due: Blackbird project

Class Notes – week 7

Recipe – 15%

Design and build a single, responsive recipe page with images, a layout with distinct areas for content, a color scheme (from a color tool), and typography that considers the visual hierarchy of a recipe’s content blocks.

Your grade in this assignment will be based on your understanding of visual hierarchy (layout, color, typography) and the fundamentals of responsive design (html/css code, media queries).

TH February 22

View blackbird projects-  (design aesthetics and visual hierarchy)

CSS Quiz Review:
Quiz Review

CSS3 Generator

Introduction to Responsive Design (and CSS Grid)

Class Notes – week 7

Build Recipe HTML/CSS

Week 8 —Recipe Project: Typography

CodeAcademy: Responsive Design- Media Queries

Reading:  Typography in 10 minutes  (optional: explore the online book )

February 27

Quiz #2: CSS

CodeAcademy – HTML and CSS tutorials complete!
I will check scores in class

Principles of Typography

Typography tuturial

Class Notes – week 8

TH March 1

Recipe HTML

Eric Meyer’s Reset 2.0

WORKSHOP: Recipe Projects

Completed Recipe HTML/CSS

Week 9— Sequential Project: Narrative

Assignment: Come to class with Sequential idea

March 6

Mr. Potatohead – extra credit (5pts)

Completed Recipe HTML/CSS

Adobe Kuler – color schemes

Goggle Fonts

CSS Grid Layout

WORKSHOP – Recipe Project

TH March 8

Sequential Project 15%

Build a responsive, 1-5 page website that follows a sequential path or linear progression. For example: a how-to sequence or instruction,  a story, a comic, a brief biography, a narrative about a past event.  You must include text, images and/or other media, like audio, video or gif animations. In class, we will discuss narrative sequencing, navigation, visual rhythm and hierarchy along with the basics of responsive design and scroll animations.

Your grade in this assignment will be based on your effort and thoughtful consideration of:

  • responsive design
  • typography
  • html and css syntax and formatting
  • sequential content (text and media)

Brainstorm ideas…

SLIDE TALK: Sequential Design: how-to, narrative, explanations, descriptions of events.

Narrative Design slide talk – PDF

WORKSHOP – Recipe Project



March 13


TH March 15




Week 11— Sequential Project: Navigation and Interaction

March 20

Due: Recipe project
View Recipe Project



CSS Grid:


TH March 22

HTML5 video and audio

Intro to JavaScript/jQuery
Galleries/Effects Plugins

Class Notes – week 10

Example projects:

Workshop: Build HTML/CSS  template structure


Week 12— Sequential Project: Multimedia and Effects

March 27

Sequential Project – in progress


TH March 29

Sequential Project – in progress


 Week 13— Sequential Project: Workshop & Critique

April 3

DUE: nearly complete Sequential Project for critique (10% of final grade) 

Sequential Project – in progress

Small-group critique


TH April 5

DUE: Sequential Projects

View Sequential Projects
Project Workshop

Intro to Portfolio Project:

CMDC Gallery

Portfolio website – who, what, why?

Other Examples:


DTC Portfolio Project:

Other student Portfolio ProjectsPortfolio Projects

Include short project statements
Include a short  statement about the blackbird, recipe and sequential project on your portfolio site. Always include a short statement on projects in your portfolio. What was the nature of the assignment? Describe the tools, design ideas, code and/or specific processes. This is for you to properly document your work for your portfolio.


Week 14— Intro: Portfolio Project

Assignment: Research/Sketch Portfolio Projects

T April 10

HTML5 Start 

HTML5 Start with Reset

Process for Designing Portfolio:

  • Research site ideas (screen grabs)
  • Storyboard/Sketch a multipage website (5 pages or sections)
  • Gather media and copy (images, screen grabs of projects, text)
  • Build HTML
  • CSS for responsive design and navigation (colored borders)
  • Add Content
  • Final CSS design

TH April 12

HTML5 Start with Gid

How to Make a Nav Bar

WORKSHOP: Portfolio Project
Build HTML structure /page templates

Week 15 – Portfolio Project Workshop

April 17

How to Make a Nav Bar


CSS Grid:

Class Evaluations

WORKSHOP: Portfolio Project
Build CSS stylesheet

TH April 19

Class Evaluations

How to Make a Nav Bar

WORKSHOP: Portfolio Project
Build CSS stylesheet

Portfolio Projects


Week 16 – Portfolio Project Workshop

April 24

DUE: Bring (nearly) complete Portfolio sites to class – 10%
Small-group critique: 
Portfolio Projects

WORKSHOP: Portfolio Project
Prep/Integrate Content

  • Mr. Potatohead – extra credit (5pts)
  • Validate!
  • resize images
  • navigation, screen real estate, above the fold
  • div alignment
  • responsiveness
  • no lorem ipsum / real content!
  • format html/css

Put this in the head to fix auto resizing in iOS devices:

<meta name="viewport" content="width=device-width, initial-scale=1">

TH April 26

Portfolio Projects

Final Projects Due (TBA)
Class critique