Schedule – Fall 2019

Week 1—Introduction

T August 20

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

TH August 22

Lecture: Designing Interfaces

slides in pdf

google quiz test


Week 2—HTML Building Blocks

CodeAcademy: Introduction to HTMLHTML Document Standards

August 27

HTML: Hypertext Mark-up Language

Class Notes- week 2
Workshop: Build Blackbird site

TH August 29

partial Blackbird

Workshop: Build Blackbird site

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


Week 3—  HTML Flow

CodeAcademy:TablesForms

T September 3

Tables and Forms
Class Notes week 3

TH September 5

Uploading site to server…

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


Week 4— CSS

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

September 10

Find url of your blackbird site…

Class Notes – week 4

Formatting Text: 

TH September 12

Class Notes – week 4

Validate the html and css of your site:
Validator.w3.org

Overview of HTML (Quiz 1 review):

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 5— Color, Imagery, Type, Layout

CodeAcademy:CSS Display and Positioning, Color, Typography

September 17

Quiz #1: HTML

Quiz Link

Class Notes – week 5

Multi-Column Layout with Float

WORKSHOP: Blackbird CSS

TH September 19

Class Notes – week 5

CSS3 Generator

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

WORKSHOP: Blackbird CSS

 


 Week 6—Recipe Project: Visual Hierarchy

CodeAcademy: CSS Grid

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

Watch:

Reading (optional): 

September 24

I have Jury Duty! 
Greg Philbrook will start the class by taking attendance and then immediately he will start the documentary Helvetica (it is 1h 20m so we will watch the remaining 10 minutes on Thursday). It is about typography, so it is relevant to what we will be covering in these next two weeks.
Class is not canceled. The Blackbird project will be due  Thursday. Just make sure a folder called “blackbird” with an index,html is in your server directory. Don’t put the project inside another folder. 

On Thursday, we will briefly go over the Blackbird projects, go over design principles and briefly introduce CSS Grid. We will start the recipe project next week.

Check the schedule for more on how things have changed. There is a slim chance I will not make Thursday, but I will email you about that.

TH September 26

DTC MAJORS: supersurvey

Due: Blackbird project

Blackbird Project List

Mr. Potatohead – extra credit (5pts) – upload to server and send me the url

Class Notes – week 6 – Design Principles – Visual Hierarchy Primer

CSS Grid Demo / Complete Guide to Grid

CSS Quiz Review:
Quiz Review
 

Week 7—Recipe Project: Responsive Design

CodeAcademy: No tutorial

Reading: Read this W3Schools tutorial instead: CSS Responsive (all chapters)

October 1

CSS Grid Demo

Complete Guide to Grid

Class Notes – week 7

CSS Quiz Review:
Quiz Review

TH October 3

Quiz #2: CSS 

Eric Meyer’s Reset 2.0

Recipe starter page

Build Recipe HTML/CSS

Mandatory Midterm Meeting:

Please set up a mid-term meeting with me. This is to check in about how you are doing so far with html and css. Below are my times to meet. You can either set up a 30 minute slot or just 5 minutes if you are feeling comfortable with the material so far.

You may also be receiving an email to set up a meeting if I am your mentor. If I am your mentor, we can set up one meeting and cover both the class requirement and discuss mentoring issues like registration and “superpowers”, etc..

My times:
Tuesday and Thursday: 12pm-1:00pm and 4:10pm-5:00pm (or by Skype on MWF)


Week 8 —Recipe Project: Typography

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

October 8

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

Blackbird feedback –Validate!

Mr. Potatohead – extra credit (5pts)

Recipe HTML and CSS
Finish media queries
chrome web developer, browser width

Principles of Typography | Typography tutorial
Class Notes – week 8

TH October 10

Principles of Typography | Typography tutorial
Class Notes – week 8

Adobe Kuler – color schemes
CSS Grid Layout

WORKSHOP: Recipe Projects

 


Week 9—Narrative Design

Assignment: Come to class on Thursday with a Narrative Project idea

October 15

Narrative Project Notes

Narrative 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…

WORKSHOP: Recipe Projects

  • validate you project
  • make sure your stylesheet is mobile first, followed by media queries for larger sizes
  • do not copy all css for media queries, only css that you want to change
  • you need at least one media query, but you may have as many as you need
  • may attention to visual hierarchy at all levels
  • style links
  • have a footer with link(s) to your source(s)
  • format your html and css so that it is readable: tab in for nested elements, keep alignments

TH October 17

Due: Recipe project
View Recipe Project

Make and Image Grid

WORKSHOP: Narrative Projects

  • gather media and create site architecture – index cards
  • design for visual hierarchy – sketch plan
  • build structure and navigation/pagination of site (wireframe) – html, colored borders
  • add media and design elements – css, color and typography
  • add interactivity and effects – javascript/jquery
  • revise and edit: narrative, closure, time frames

 


 Week 10— Navigation and Interaction

Assignment: Plan and sketch designs for Narrative Project

October 22

Class Notes – week 10

WORKSHOP: Build HTML/CSS

TH October 24

Class Notes – week 10

Workshop: Build HTML/CSS  template structure

 


Week 11— Multimedia and Effects

Assignment: Narrative Projects

October 29

Class Notes – week 10

Narrative Project – in progress

WORKSHOP: Build HTML/CSS

  • gather media and create site architecture – index cards
  • design for visual hierarchy – sketch plan
  • build structure and navigation/pagination of site (wireframe) – html, colored borders
  • add media and design elements – css, color and typography
  • add interactivity and effects – javascript/jquery
  • revise and edit: narrative, closure, time frames

 

TH October 31

Narrative Project – in progress

WORKSHOP: Build HTML/CSS

 


Week 12—Workshop & Critique

November 5

Narrative Project – in progress

WORKSHOP: Build HTML/CSS

 

TH November 7

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

Narrative Project

Small-group critique
WORKSHOP

 


 Week 13—Intro: Portfolio Project

Assignment: Research/Sketch Portfolio Projects

November 12

DUE: Narrative Projects

Narrative Project
Project Workshop

Intro to Portfolio Project:

HTML5 Start with Reset

HTML5 Start with Grid

Process for Designing Portfolio:

  • Research site ideas (screen grabs, inspect element)
  • Storyboard/Sketch a multipage website (minimum 4 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

RESPONSIVE DESIGN PRINCIPLES:

  • mobile first! – default css is for mobile
  • flexible design (using % instead of px)
  • width: auto; is default and adjusts padding and margins
  • cascade principle -location and inheritance
     (only change styles that need to change)
  • max-width and min-width (set limit with max or min width)
  • height values are tricky! use by pixels or set height on parent
  • responsive images (100% of container parent or img {width: 100%;})
  • breakpoints based on design not device
  • turning off iOS resize:

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

Media Queries Overview

How to Make a Nav Bar

Fontpair

CSS Grid:

 

TH November 14

WORKSHOP: Portfolio Project
Build HTML structure /page templates


Week 15 – Portfolio Project Workshop

November 19

WORKSHOP: Portfolio Project
Build CSS stylesheet

Portfolio Projects

TH November 21

Class evaluations

Mr. Potatohead – extra credit (5pts)

Web Development Process
Checklist

  • Validate!
  • resize images for web
  • no autoplay on audio (use <audio>)
  • wrapper under 1000px
  • h1 in header should be your name (or site name)
  • do not change navigation placement or tabs
  • navigation, screen real estate, above the fold
  • div alignment
  • make site responsive with media queries ( images 100% of container)
  • no lorem ipsum / real content!
  • format html/css to see errors

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

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

WORKSHOP: Portfolio Project
Build CSS stylesheet

Upload Sites

Portfolio Projects

 


Week 14—Thanksgiving Break

T November 26

NO CLASS

TH November 28

NO CLASS


Week 16 – Portfolio Project Workshop

December 3

Evaluations…

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

TH December 5

Portfolio Projects

Final Projects Due (TBA)
Class overview