Schedule Sec. 2

Week 1—Introduction

W January 10

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

———-

supersurvey

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!

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

January 31

Uploading site to server…
CSS Intro

Class Notes – week 4

————

supersurvey

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

Class Notes – week 5

————

CSS3 Generator

Multi-Column Layout

WORKSHOP: Blackbird Project


 Week 6—Recipe Project: Visual Hierarchy

CodeAcademy: CSS Grid

Reading: 

February 14

Visual Hierarchy Primer

Class Notes – week 6

————

CSS Quiz Review:
Quiz Review

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

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

Workshop: Blackbird?

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

Assignment:
-Finish Blackbird Projects
-Study for CSS Quiz!

February 21

Quiz #2: CSS

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

————

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 28

Principles of Typography

Typography tuturial

Class Notes – week 8

————

Recipe HTML

Typography Error

Validator

WORKSHOP: Recipe Projects


Week 9— Sequential Project: Narrative

Assignment: Come to class with Sequential idea

March 7

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)

————

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

Narrative Design slide talk – PDF

 


 Week 10— SPRING BREAK

March 14

NO CLASS

 

 


Week 11— Sequential Project: Navigation and Interaction

March 21

Tabs/Buttons/Breadcrumbs:

Scroll:

Flexbox Resources:

————

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 28

Sequential Project – in progress

WORKSHOP: Build HTML/CSS

————

Sequential Project – in progress

WORKSHOP: Build HTML/CSS


 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
WORKSHOP

————

DUE: Sequential Projects

View Sequential Projects
Project Workshop

 

 


Week 14— Intro: Portfolio Project

Assignment: Research/Sketch Portfolio Projects

T April 11

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

————

Workshop


Week 15 – Portfolio Project Workshop

April 18

GRID Overview (Huge)

WORKSHOP: Portfolio Project
Build HTML structure /page templates

————

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 25

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

————

Portfolio Projects

Final Projects Due (TBA)
Class critique