• Syllabus
  • Information

IWP

Interactive Web Programming
  • Based on Stanford's CS193X
  • Lectures
  • Homework

Syllabus

This is a tentative syllabus for Interactive Web Programming. This syllabus is subject to change; we may need to make significant adjustments to the schedule depending on a variety of factors. This syllabus will be updated throughout the semester.

Week 1

Mar 2: Course overview and basic HTML/CSS HW0 assigned

  • Syllabus and course info
  • HTML and CSS basics: syntax

Mar 4: Block vs inline; classes and ids; complex selectors

  • Block vs inline
  • div and span
  • classes and ids
  • Combining selectors; cascading; inheritance

Week 2

Mar 9: Box model; flexbox HW1 assigned

  • Box model: padding, border, margin
  • Debugging with Chrome Inspector
  • Case study: Squarespace layout
  • Flexbox basics
  • HW0 DUE

Mar 11: More flexbox; units; position; Mobile web; CSS wrapup

  • More flexbox: shrink and grow
  • height/width percentage quirks: vh/vw and box-sizing
  • Useful background-image properties
  • Units: em, vw / vh, percentages
  • position
  • Case study: Squarespace layout continued
  • Mobile web and meta tag; @media
  • em and rem

Week 3

Mar 16: Introduction to JavaScript; DOM and events

  • Start JavaScript
    • How to connect to HTML (<script defer>)
    • Language tour
    • Some form elements (input, textarea) and maybe how to style them
  • Basic event handling
  • Introducing the DOM: Document Object Model

Mar 18: More DOM; case study HW2 assigned

  • Adding and removing elements from DOM
  • Case Study: tic-tac-toe
  • Traversing the DOM
  • HW1 DUE

Week 4

Mar 23: More JavaScript Events

  • Event propagation: bubbling and capturing
  • Finish case study
  • data-* attributes
  • Mischief and hacks

Mar 25: Keyboard and Mobile events

  • Keyboard events
  • Pointer events
  • Animations

Week 5

Mar 30: Classes in JS HW3 assigned

  • CSS animations (maybe)
  • ES6 classes
  • this keyword / bind()
  • Communicating between classes
    • Custom events
    • Callbacks
  • First-class functions
  • JavaScript application architecture
  • HW2 DUE

Apr 01: NO CLASS

  • Semana Santa

Week 6

Apr 06: NO CLASS

  • A1 week

Apr 08: NO CLASS

  • A1 week
  • HW3 DUE

Week 7

Apr 13: Custom events, this, and bind; first-class functions HW4 assigned

  • Communicating between classes: Custom events
  • this keyword / bind()
  • First-class functions
  • Callbacks

Apr 15: Callbacks; Functional JavaScript

  • Communicating between classes: Callbacks
  • Functional JavaScript
    • Closures

Week 8

Apr 20: Fetch API, Promises

  • Finish functional JS
    • Currying
    • Anonymous functions
    • Closures
  • Fetch API
    • fetch()
    • Promises and .then()
  • JSON

Apr 22: NO CLASS

  • Recesso dos feriados de Tiradentes e de São Jorge

Week 9

Apr 27: Fetch API and JSON; 3rd-party APIs

  • Fetch API and JSON
  • Fetch in a class
  • REST APIs
    • HTTP Methods: GET
    • Query parameters

Apr 29: More Fetch; JavaScript Event Loop

  • More Fetch API:
    • Querying 3rd-party REST APIs
    • Submitting forms
    • CORS
  • Asynchrony in JavaScript
  • JavaScript event loop

Week 10

May 04: D3 basics HW5 assigned

  • Introduction
  • Scalable Vector Graphics (SVG)
  • Install
  • Connecting data
  • HW4 DUE

May 06: D3 Drawing with data

  • Drawing divs and SVGs
  • The method data()
  • Basic graphs: barplot and scatterplot

Week 11

May 11: D3 Scales, Axis and Movement

  • Scales: pixels, domain and ranges, normalizing
  • Axis: configuration, cleaning and formatting
  • Graph updates

May 03: D3 Transitions and updates

  • Transitions
  • Other types of updates

Week 12

May 18: Servers, NodeJS and Express HW6 assigned

  • Servers in general
  • NodeJS
  • npm
  • Express
  • fetch() to localhost
  • HW5 DUE

May 19: More Express; fetch() and localhost

  • npm
  • Express
  • fetch() to localhost

Week 13

May 25: async/await; more Express; more fetch()

  • async / await
  • Sending data to the server
  • Returning JSON from Express

May 27: Saving data: Intro to MongoDB

  • Saving data
  • POST body
  • body-parser
  • Saving to a file: fs
  • MongoDB: Saving to a database
    • mongo / mongod
    • CRUD operations

Week 14

Jun 01: MongoDB and NodeJS

  • MongoDB and NodeJS
    • insert, find, delete, update, upsert
    • ObjectID
  • Web application architecture
    • Multi-page web apps (server-side rendering)
    • Single-page web apps

Jun 03: NO CLASS

  • Corpus Christi

Week 15

Jun 08: Templates, Modules, and Routers

  • Web application architecture
    • Multi-page web apps (server-side rendering)
    • Templates with Handlebars
  • NodeJS Modules
  • Express Router

Jun 10: Middleware; Data modeling; Authentication

  • Middleware and Routes
  • Single-page web app
  • More MongoDB examples
  • Authentication

Week 16

Jun 15: LAST DAY OF LECTURE: JavaScript frameworks

  • Important ideas we didn’t cover
    • Module bundling with browserify
    • Older browser support with babeljs
    • Testing
    • Accessibility
  • Libraries and frameworks
  • Rants and general advice
    • Don’t use jQuery: prefer babeljs
    • Don’t use Bootstrap: learn CSS
    • Pick a frontend framework and build something on it
  • HW6 DUE

Jun 17: NO CLASS

  • A2 week

Week 17

Jun 22: NO CLASS

  • A2 week

Jun 24: NO CLASS

  • Maybe we’ll need this day if we get stuck on some topic.
Icons made by Icongeek26 from www.flaticon.com