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

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%)

Class Notes – week 5

TH February 8

CSS3 Generator

Multi-Column Layout

WORKSHOP: Blackbird Project

 Week 6—Recipe Project: Visual Hierarchy

CodeAcademy: CSS Grid

Reading (optional): 

February 13

Visual Hierarchy Primer

CSS GRID Overview

Class Notes – week 6

TH February 15

CSS Grid cont’d

Validate the html and css of your site:

Upload to server in a folder called “blackbird” containing an “index.html” file.

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!

 Next week I will check codeacademy scores

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

CSS Quiz Review:
Quiz Review

Due: Blackbird project
View blackbird projects-  (design aesthetics and visual hierarchy)

Introduction to Responsive Design (and flexbox)

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

Quiz #2: CSS

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

Principles of Typography

Typography tuturial

Class Notes – week 8

TH March 1

Recipe HTML

Typography Error


WORKSHOP: Recipe Projects

Week 9— Sequential Project: Narrative

Assignment: Come to class with Sequential idea

March 6

Due: Recipe project

View Recipe Project

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)

TH March 8

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

Narrative Design slide talk – PDF



March 13


TH March 15




Week 11— Sequential Project: Navigation and Interaction

March 20



CSS Grid and Flexbox:


TH March 22

HTML5 video and audio

Intro to JavaScript/jQuery
Galleries/Effects Plugins

Class Notes – week 10

Sequential Project – in progress

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



Week 14— Intro: Portfolio Project

Assignment: Research/Sketch Portfolio Projects

T April 10

Intro to Portfolio Project:

CMDC Gallery

Portfolio website – who, what, why?

Other Examples:


DTC Portfolio Project:

Other student Portfolio ProjectsPortfolio Projects


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


Week 15 – Portfolio Project Workshop

April 17

WORKSHOP: Portfolio Project
Build HTML structure /page templates

TH April 19

WORKSHOP: Portfolio Project
Build CSS stylesheet

Portfolio Example ZIP

Portfolio 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 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

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 on Wed. December 13
Class critique