• Syllabus
  • Info
  • Staff

CS193X

Web Programming Fundamentals
  • Piazza
  • Lectures
  • Homework

Lectures

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

  • Tentative Course Schedule: See the roadmap for the quarter.
  • NodeJS install instructions: Follow these instructions to install NodeJS on your machine.
  • MongoDB install instructions: Follow these instructions to install MongoDb on your machine.

June 5: FINAL LECTURE: What’s next?

  • Slides: Google slides / lecture27.pdf
    • 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
  • No lecture on Wednesday: Work on your final project!

June 2: Middleware; Data modeling; Authentication

  • Slides: Google slides / lecture26.pdf
    • Middleware and Routes
    • Single-page web app
    • More MongoDB examples
    • Authentication
  • Code
    • Modules and Routes
    • Cross-stitch examples

May 31: Templates, Modules, and Routers

  • Slides: Google slides / lecture25.pdf
    • Web application architecture
      • Multi-page web apps (server-side rendering)
      • Templates with Handlebars
    • NodeJS Modules
    • Express Router
  • Code
    • MongoDB examples repo
    • Modules and Routes

May 29: NO LECTURE

May 26: MongoDB and NodeJS

  • Slides: Google slides / lecture24.pdf
    • MongoDB and NodeJS
      • insert, find, delete, update, upsert
      • ObjectID
    • Web application architecture
      • Multi-page web apps (server-side rendering)
      • Single-page web apps
  • Code
    • MongoDB examples repo
  • Final Project FINAL PROJECT ASSIGNED

May 24: MongoDB

  • Slides: Google slides / lecture23.pdf
    • MongoDB
      • mongo / mongod
      • CRUD operations
    • MongoDB and NodeJS
  • Code
    • MongoDB examples repo
  • MongoDB Installation
    • Instructions: Follow these instructions to install MongoDB on your machine. This will be necessary to run lecture examples.

May 22: Saving data; MongoDB intro

  • Slides: Google slides / lecture22.pdf
    • Saving data
      • POST body
      • body-parser
    • Saving to a file
    • MongoDB: Saving to a database
  • Code
    • MongoDB examples repo
    • Lecture 21 GitHub repo
    • Lecture 20 GitHub repo

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

  • Slides: Google slides / lecture21.pdf
    • async / await
    • Sending data to the server
    • Returning JSON from Express
  • Code
    • Lecture 21 GitHub repo
    • Lecture 20 GitHub repo
  • Homework 5 HW5 assigned

May 17: More Express; fetch() and localhost

  • Slides: Google slides / lecture20.pdf
    • npm
    • Express
    • fetch() to localhost
  • Code
    • Lecture 19 GitHub repo
    • Lecture 20 GitHub repo

May 15: Servers, NodeJS and Express

  • Slides: Google slides / lecture19.pdf
    • Servers in general
    • NodeJS
    • npm
    • Express
    • fetch() to localhost
  • Code
    • Lecture 19 GitHub repo
  • Node Installation
    • Instructions: Follow these instructions to install NodeJS on your machine. This will be necessary to run lecture examples, to complete HW5 and to complete the final project. (Thanks to our TA Zach Maurer for writing these awesome instructions!)

May 12: More Fetch; JavaScript Event Loop

  • Slides: Google slides / lecture18.pdf
    • More Fetch API:
      • Querying 3rd-party REST APIs
      • Submitting forms
      • CORS
    • Asynchrony in JavaScript
    • JavaScript event loop
  • Code
    • Fetch from Spotify / demo
    • Form elements JS syntax: select, textarea, checkbox

May 10: Fetch API and JSON; 3rd-party APIs

  • Slides: Google slides / lecture17.pdf
    • Fetch API and JSON
    • Fetch in a class
    • REST APIs
      • HTTP Methods: GET
      • Query parameters
  • Code
    • GitHub repo / live: Several examples of Fetch API
      • Fetch from a class / demo
      • Fetch from Spotify / demo
    • Form elements JS syntax: select, textarea, checkbox

May 8: Fetch API, Promises

  • Slides: Google slides / lecture16.pdf
    • Finish functional JS
      • Currying
      • Anonymous functions
      • Closures
    • Fetch API
      • fetch()
      • Promises and .then()
    • JSON

May 5: Callbacks; Functional JavaScript

  • Slides: Google slides / lecture15.pdf
    • Callbacks
    • Functional JavaScript
      • Closures
  • Code
    • Button example: Communicating between two classes (Button to Menu) with callbacks

May 3: Custom events, this, and bind; first-class functions

  • Slides: Google slides / lecture14.pdf
    • Custom events example
    • this keyword / bind()
    • First-class functions
    • Callbacks
  • Code
    • Button example: Communicating between two classes (Button to Menu) with custom events
    • this mystery 1: See how this changes in different contexts
    • this mystery 2: See how this changes in different contexts
    • Present example: Communicating between two classes (Present to App) via callbacks

May 1: More ES6 classes; this and bind

  • Slides: Google slides / lecture13.pdf
    • More ES6 classes
    • this keyword / bind()
    • Communicating between classes
      • Custom events
    • JavaScript application architecture

Apr 28: CSS Animations; ES6 classes

  • Slides: Google slides / lecture12.pdf
    • Keyboard events
    • Pointer events
    • Animations
    • Intro ES6 classes
  • Code: (see more in slide deck)
    • Dragon walk: Codepen example of dragging a dragon along the x-axis
    • 2D dragon walk
    • OO present with bind / live: Object-oriented Present example
    • OO photo album / live: Object-oriented Photo Album example

Apr 26: Keyboard, Mouse, and Touch events

  • Slides: Google slides / lecture11.pdf
    • Keyboard events
    • Pointer events
    • Animations
  • Code:
    • key-events.html: Prints out keyboard events in the Web Console.
    • photos-start.html: Starter code for our photos example.
    • photos-desktop-finished.html: Finished photo album example with keyboard navigation
    • photos-mobile-finished.html: Finished photo album example with swipe left/right navigation

Apr 24: More JavaScript events

  • Slides: Google slides / lecture10.pdf
    • Event propagation: bubbling and capturing
    • Finish case study
    • data-* attributes
    • Mischief and hacks
  • Code:
    • display-toggle.html: Display toggle. Shows how clicking an inner element fires the click event on the outer element.
    • bubbling.html: Event bubbling example. See slides for more variants.
    • empty-extension.zip: Empty extension that does nothing but print a log message
    • quora-extension.zip: Extension that removes the Quora login nag screen
    • adblock-block-block.zip: Extension that unblocks Adblock on OnDemandKorea

Apr 21: More DOM; case study

  • Slides: Google slides / lecture09.pdf
    • Adding and removing elements from DOM
    • Case Study: tic-tac-toe
    • Traversing the DOM
  • Code:
    • dom-walk-script.js / html: Recursively prints out every DOM element of the HTML page.
    • tictactoe.js / html / css: Simple tic-tac-toe game

Apr 19: DOM and events

  • Slides: Google slides / lecture08.pdf
    • Finish language feature tour
    • DOM: Document Object Model
    • Basic event handling

Apr 17: Introduction to JavaScript

  • Slides: Google slides / lecture07.pdf
    • What is JavaScript?
    • Language feature tour
  • Code:
    • first-js.html / script.js: A button with a simple event handler.

Apr 14: position; Mobile web

  • Slides: Google slides / lecture06.pdf
    • position
    • Useful background-image properties
    • Mobile CSS
    • Skipped but useful: em and rem
  • Code:
    • mobile.html / css: Our first mobile web example.
    • squarespace-mobile.html / css: The mobile version of our Squarespace layout.

Apr 12: More flexbox and layout

  • Slides: Google slides / lecture05.pdf
    • More flexbox: shrink and grow
    • height/width percentage quirks: vh/vw and box-sizing
  • Block vs inline guide: review if necessary
  • Code:
    • squarespace.html / css: A rough copy of the Bedford Squarespace template. Be sure to inspect elements and view the source to see how it works!

Apr 10: Flexbox

  • Slides: Google slides / lecture04.pdf
    • Finish up Box Model
    • Debugging with Chrome Inspector
    • Case study: Squarespace layout
      • display: flex;
      • Google Fonts
      • Background images
  • Homework 1 HW1 assigned

Apr 7: More CSS; CSS Box Model

  • Slides: Google slides / lecture03.pdf
    • HTML history and standard HTML
    • Combining selectors; cascading; inheritance
    • Box model
  • HW0 DUE HW0 due at 11:59pm

Apr 5: Block vs inline; classes and ids

  • Slides: Google slides / lecture02.pdf
    • Block vs inline
    • div and span
    • classes and ids
    • Block vs inline guide
  • Code: Course webpage

Apr 3: Course overview and basic HTML/CSS

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