Schedule Sec. 2

Week 1—Introduction

W January 10

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



Lecture: Designing Interfaces

Week 2—HTML Building Blocks

CodeAcademy: HTML Elements and Structure

January 17

HTML: Hypertext Mark-up Language

Class Notes- week 2
Workshop: Build Blackbird site


partial Blackbird

Workshop: Build Blackbird site

Week 3—  HTML Flow

CodeAcademy:HTML Tables

January 24

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


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 31

Uploading site to server…
CSS Intro

Class Notes – week 4


Digital Canvas – submit!

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

W  February 7

Quiz#1 – HTML (10%)

Tech 101 Workshops

DTC Superpower survey

Class Notes – week 5


CSS3 Generator

Multi-Column Layout

WORKSHOP: Blackbird Project

 Week 6—Recipe Project: Visual Hierarchy

CodeAcademy: CSS Grid


February 14

Visual Hierarchy Primer

Class Notes – week 6


CSS Quiz Review:
Quiz Review

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!

 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 21

Due: Blackbird project



Week 8 —Recipe Project: Typography

CodeAcademy: Responsive Design- Media Queries
Reading:  Typography in 10 minutes  (optional: explore the online book )

February 28

Quiz #2: CSS

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

View blackbird projects-  (design aesthetics and visual hierarchy)


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

Introduction to Responsive Design (and flexbox)

Class Notes – week 7

Build Recipe HTML/CSS


Principles of Typography

Class Notes – week 8


Eric Meyer’s Reset 2.0

WORKSHOP: Recipe Projects

Recipe HTML


Week 9— Sequential Project: Narrative

Assignment: Work on Recipe Project

March 7


Meetings (5pts)

Mr. Potatohead – extra credit (5pts)

Completed Recipe HTML/CSS

Adobe Kuler – color schemes

Goggle Fonts

CSS Grid Layout

WORKSHOP – 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)

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

Narrative Design slide talk – PDF


WORKSHOP: Recipe Project



March 14




Week 11— Sequential Project: Navigation and Interaction

March 21

Due: Recipe project
View Recipe Project



CSS Grid:


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 28

Sequential Project – in progress



 Week 13— Sequential Project: Workshop & Critique

April 4

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

Sequential Project – in progress

Small-group critique

Completed Project Due this coming Friday (10am)

Intro to Portfolio Project:

Portfolio website – who, what, why?

Other Examples:

DTC Portfolio Project:

Other student

Portfolio Projects, 2016

Portfolio Projects,2016

Portfolio Projects, 2017

Portfolio Projects, 2017

Week 14— Intro: Portfolio Project

Assignment: Research/Sketch Portfolio Projects

T April 11

Intro to Portfolio Project:

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
  • Refine CSS design
  • Test/Critique



WORKSHOP: Portfolio Project
Build HTML structure /page templates

Start CSS (demo Grid)

HTML5 Start 

HTML5 Start with Reset

HTML5 Start with Gid


Week 15 – Portfolio Project Workshop

April 18

How to Make a Nav Bar


CSS Grid:

Portfolio Projects

Class Evaluations

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.


WORKSHOP: Portfolio Project
Build CSS stylesheet


Week 16 – Portfolio Project Workshop

April 25

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 (media queries)
  • 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">


Final Projects Due (TBA)
Class critique