Week	Date	Title
1	1/26/2017	Hello World
2	2/2/2017	The Internetz
3	2/9/2017	SNOWDAY
4	2/16/2017	Website Planning & Markup
5	2/23/2017	CSS Part 1: Styling Basics
6	3/2/2017	CSS Part 2: Structure & Flow
7	3/9/2017	CSS Part 3: Advanced Styling
8	3/16/2017	Visual Design for the Web
9	3/23/2017	SPRING BREAK
10	3/30/2017	Mid-term Project Crit
11	4/6/2017	In the Real World
12	4/13/2017	Interaction & Navigation
13	4/20/2017	Interaction 1: Javascript
14	4/27/2017	Interaction 2: jQuery
15	5/4/2017	Interaction 3: Plugins & APIs
16	5/11/2017	Final Project Crit

Week 1 — 1/26/2017 — Hello World

What is code, creative computing, and programming?

Lecture:

Web Design Landscape, Creative Coding, Programming vs. Markup

Demo:

CodePen: html, css, & javascript

Exercises:

Drawing Exercise
Small Bio

Assignments:

Reading: Paul Ford, What is Code; Olia Lialina, The Vernacular Web 1 & 2; Lev Manovich, Software Takes Command: Introduction p.1–42
Reading Discussion Questions: Post 2 discussion questions to Slack #readings_week1 channel.
Script your Drawing

Week 2 — 2/2/2016 — The Internetz

What is the Internet and how does it work?

Exercise:

Drawing Machine Response

Lecture:

How the Internet Works
- History
- Computers and Servers
- How to use a Text Editor
- The Web Browser
- FTP and Uploading to the Web
- Basic Web technologies & Flow

Demo:

Upload Bio to FTP

Exercises:

Make and organize the Class Folder
Upload the bio to FTP

Assignments:

Codecademy — HTML & CSS: Parts 1, 2, & 3
Label Carl Dair Article

Week 3 — 2/9/2017 — SNOWDAY

Assignments:

Reading: Ellen Lupton, Thinking with Type: Letter & Text
Codecademy: “HTML & CSS” Part 4 & 5 (“Intro to CSS”, “CSS Classes & IDs”)
Project 1: Part 1 — Choose a Text & Write an Explanation

Week 4 — 2/16/2017 — Website Planning & Markup

How do you plan to design a website? What is basic HTML markup & Syntax?

Lecture:

Site Planning
- Goals
- Wireframing
- Sitemaps
Form & Content I
- HTML anatomy
- HTML Tags
- File Structure and Naming Conventions
- Hyperlinks
- Absolute and Relative Paths

Exercises:

Re-engineer a Site Map & Wireframe

Introduce Mid-term Project

Assignments:

Finish & submit Site Map exercise
Markup Carl Dair
Project 1: Part 2

Week 5 — 2/23/2017 — CSS Part 1: Styling Basics

How do you style text?

Lecture

Stylesheets & Basic CSS
- Types of Style Sheets
- The Cascade
- Text Styling
- Color
- Background & Gradients
- Pseudo-Selectors
- Classes, IDs
- Web Type

Demo:

Basic CSS Properties

Exercises:

Style Carl Dair

Assignments:

Reading: Ellen Lupton, Thinking with Type: Grid
Finish and Submit In-Class Exercise (#5 Style Carl Dair)
Project 1: Part 3 Mockups
Codecademy: HTML & CSS: #6 CSS Element Positioning

Week 6 — 3/2/2017 — CSS Part 2: Structure & Flow

How do you move things around?

Lecture:

Basic CSS part 2
- The normal flow
- Inline, block , and the display property
- Divs and Spans
- Box Model
- Units of length
- Floats
- Positioning

Demo:

Position and Floats 101

Exercises:

Float & Position Exercises

Assignments:

Finish and Submit In-Class Exercises
Project 1: Part 3 Production

Week 7 — 3/9/2017 — CSS Part 3: Advanced Styling

How do you add motion and effects?

Lecture:

Advanced CSS
- Transforms
- Border-radius
- Advanced selectors
- Animations
- Transitions

Assignments:

Readings: Frank Chimero, Typographic Hierarchy; Andy Rutledge, Gestalt Principles 1, 2, 3, 4, 5, Nathan Ford, Don’t just choose a grid. Design it!, Ready Mag Design School
Finish and Submit Exercises
Project 1: Part 4 Production

Week 8 — 3/16/2017 — Visual Design for the Web

What are design principles for the web?

Lecture:

Graphic Design Principles:
- Hierarchy
- Grid
- Gestalt
- Typography

Demo:

Setting up a simple grid

Exercises:

Grid Exercise

Project 1: Working Session

Assignments:

Finish Project 1

Week 9 — 3/23/2017 — Spring Break

Week 10 — 3/30/2017 — Project 1 Critique [Mid-Term]

Assignments:

Reading:
Finish and Submit Any Remaining In-Class Exercises

Recommended Reading:

Shay Howe Advanced: Lesson 4
Robbins: p.444–454

Week 11 — 4/6/2017 — In the Real World

How is content on the web viewed today?

Lecture:

Responsive Web Design
- Media Queries
- Adaptive vs Fluid Grids and Layouts
- Flexbox
- Mobile Dev Tools

Exercises:

Make a responsive Carl Dair

Assignments:

Finish and Submit exercises
Read Eloquent Javascript (Introduction, Chapter 1, Chapter 2)
Codecademy: JavaScript: “Introduction to Javascript”

Recommended Reading:

Week 12 — 4/13/2017 — Interaction & Navigation

What are the Principles of Interaction and Navigation on the Web?

Lecture:

Navigation and Interaction

Exercises:

User Interaction

Introduce Final Project

Assignments:

Finish Exercise 9 User Interaction
Codecademy: “JavaScript” course, Lessons 2–5 (“Functions”, “‘For’ Loops in JavaScript”, “‘While Loops’ Loops in JavaScript”, “Control Flow”)
Read Eloquent Javascript Chapters 3–6
Project 2 Part 1

Recommended Reading:

Shay Howe Advanced: Lesson 6
Robbins: Ch. 19

Week 13 — 4/20/2017 — Interaction 1: Javascript

What are the basics of programming?

Demos:

Counter

We learned about the following:

Variables
“getElementById”
Event: onlick
Function declaration & location in the script
Incrementing by 1 (++)
Math object: floor() and random()
Concatenation of Strings
.textContent(): Updating text content of HTML elements
Console.log & the Chrome Dev Tools
.style: Changing style properties of HTML elements
Comments & Separating Script into Code Blocks
<script> tag before closing </body>

Squares

We learned about the following:

addEvent Listener (waiting till the document is loaded)
.querySelector() function to target 1 out of many elements with the same class
For Loop
The DOM
.cloneNode()
.appendNode()
.innerHTML()
prompt()