This page will contain the slides, notes, and example code pertaining to lecture.

• Tentative Course Schedule: See the roadmap for the semester.

---

Jun 24: FINAL LECTURE: What’s next?

• Slides: lecture24.pdf
  • Next steps: General advice
  • Important ideas we didn’t cover
  • Libraries and frameworks
  • Final advice

Jun 15: Modules, Middleware, Routes and Authentication

• Slides: lecture23.pdf
  • Web application architecture
    • Server-side rendering with Handlebars
    • Single-page web app
  • Modules, Middleware, Routes
  • Authentication
• Code
  • Modules and Routes

Jun 10: MongoDB and NodeJS

• Slides: lecture22.pdf
  • MongoDB and NodeJS
    • mongo / mongod
    • insert, find, delete, update, upsert
    • ObjectID
  • Web application architecture
    • Multi-page web apps (server-side rendering)
    • Single-page web apps
• Code
  • MongoDB examples repo

Jun 08: Saving data; MongoDB intro

• Slides: lecture21.pdf
  • Saving data
    • POST body
    • body-parser
  • Saving to a file
  • MongoDB: Saving to a database
• Code
  • MongoDB examples repo

May 27: Back-end development: server communication and async/await

• Slides: lecture20.pdf
  • Sending data to the server
  • Returning JSON
  • package.json
  • async/await: A JavaScript language feature

May 25: Back-end development: servers, nodeJS, npm and express. Part 2.

• Slides: lecture19.pdf
  • Servers
  • NodeJS
  • npm
  • Express
  • fetch() to localhost

May 20: Back-end development: servers, nodeJS, npm and express. Part 1.

• Slides: lecture18.pdf
  • Servers
  • NodeJS
  • npm
  • Express
  • fetch() to localhost

May 18: Interactions with D3.

• Slides: lecture17.pdf
  • Interactions with D3
    • Listening for click events
    • Unidirectional data flow
    • Selecting marks by clicking or hovering
    • Capturing mouse motion to render text

May 13: The general update pattern of D3.

• Slides: lecture16.pdf
  • The general update pattern of D3
    • Another view on enter, update and exit
    • Animated transitions
    • Object constancy
    • Nested and single elements

May 11: CSV files; Introduction to axes and scales.

• Slides: lecture15.pdf
  • Making a bar chart with D3
    • Bind CSV files to SVG shapes
    • Introduction to axes and scales

May 04: Scalable Vector Graphics; Data-driven Documents lib

• Slides: lecture14.pdf
  • SVG: Scalable Vector Graphics
  • D3: Data-driven Documents
    • Selections
    • Data joins

Apr 27: RESTful APIs; Fetch API; JS Event loop.

• Slides: lecture13.pdf
  • Querying REST APIs
    • Form submission
  • Fetch API gotchas
    • CORS and Closures
  • Single-threaded asynchrony
    • JS Event loop

Apr 20: Fetch API; JSON; Promises; REST API.

• Slides: lecture12.pdf
  • Fetch
    • JSON
    • Fetch in an class
  • Promises
  • Querying REST APIs
    • Form submission
• Code:
  • fetch-images
  • tvmaze-search

Apr 15: Functional JS; Fetch API; Introduction to Promises; JSON.

• Slides: lecture11.pdf
  • Callbacks
  • Functional JavaScript
    • Closures
    • Anonymous functions
    • Closures
  • Loading data from files
    • Fetch API
    • Promises
    • JSON

Apr 13: Callbacks; currying; closures; anonymous functions

• Slides: lecture10.pdf
  • Callbacks
  • Functional JavaScript
    • Closures
    • Anonymous functions
    • Closures

Apr 06: NO CLASS

• A1 week

Apr 08: NO CLASS

• A1 week

Apr 01: NO CLASS

• Semana Santa

Mar 30: Classes; custom events; callbacks

• Slides: lecture09.pdf
  • Classes and objects in JavaScript
  • this keyword and bind
  • Custom events
  • Callbacks

Mar 25: CSS animations; classes; custom events; callbacks

• Slides: lecture08.pdf
  • CSS animations
  • Classes and objects in JavaScript
  • this keyword and bind
  • Introduction to Custom events
  • Introduction to callbacks and functional programming

Mar 23: Event propagation; casy study

• Slides: lecture07.pdf
  • JS Events in detail
  • Other JavaScript events
  • Case Study: photo-album
• Code:
  • key-events
  • photos-start
  • photos-key-events
  • photos-touch-events

Mar 18: More DOM; case study

• Slides: lecture06.pdf
  • Adding and removing elements from DOM
  • Case Study: tic-tac-toe
  • Traversing the DOM
• Homework 2 HW2 assigned
• HW1 DUE
• Code:
  • html / css / js: Case study: tic-tac-toe.

Mar 16: Introduction to JavaScript; DOM and events

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

Mar 11: More flexbox and layout; position; Mobile web

• Slides: lecture04.pdf
  • More flexbox: shrink and grow
  • height/width percentage quirks: vh/vw and box-sizing
  • position
  • Useful background-image properties
  • Mobile CSS
  • Relative sizes: em and rem
• Code:
  • html / css: A rough copy of the Bedford Squarespace template. Be sure to inspect elements and view the source to see how it works!
  • html / css: The mobile version of our Squarespace layout.

Mar 9: CSS Box Model; Flexbox

• Slides: lecture03.pdf
  • The CSS Box model
  • Debugging with Chrome Inspector
  • Case study: Squarespace Layout
  • Flexbox
• Homework 1 HW1 assigned
• HW0 DUE

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

• Slides: lecture02.pdf
  • Block vs inline
  • div and span
  • classes and ids
  • Combining selectors; cascading; inheritance
  • Block vs inline guide

Mar 2: Course overview and basic HTML/CSS

• Slides: lecture01.pdf
  • Syllabus and course info
  • HTML and CSS basics: syntax; element selector
• Homework 0 HW0 assigned