Syllabus

Here is the tentative syllabus for CS193X.

This syllabus is subject to radical change. Spring 2017 is the first time CS193X is being offered, so we may need to make significant adjustments to the schedule depending on a variety of factors.

This syllabus will be updated throughout the quarter, and generally speaking, the further from present the topic is, the more likely it is to change.

Week 1

Apr 3: Course overview and basic HTML/CSS HW0 assigned

  • Syllabus and course info
  • HTML and CSS basics: syntax; element selector

Apr 5: Block vs inline; classes and ids

  • Block vs inline
  • div and span
  • classes and ids

Apr 7: More selectors; box model

  • HTML history and standard HTML
  • Combining selectors
  • Cascading and inheritance
  • Box model: padding, border, margin
  • HW0 DUE HW0 due at 11:59pm

Week 2

Apr 10: Flexbox HW1 assigned

  • Finish up Box Model
  • Debugging with Chrome Inspector:
  • Case study: Squarespace layout
    • display: flex;
    • Google Fonts
    • Background images

Apr 12: More flexbox; units; position

  • Case study: Squarespace layout continued
    • display: flex;
    • Google Fonts
    • Background images
  • Units: em, vw / vh, percentages
  • position

Apr 14: Mobile web; CSS wrapup

  • Mobile web and meta tag; @media
  • em and rem

Week 3

Apr 17: Beginning Amateur JavaScript

  • Start JavaScript
    • How to connect to HTML (<script defer>)
    • Language tour
    • Some form elements (input, textarea) and maybe how to style them

Apr 19: Intro to the DOM HW2 assigned

  • Finish language features
  • Beginning JavaScript events
  • Introducing the DOM: Document Object Model
  • HW1 DUE HW1 due at 11:59pm

Apr 21: More DOM; case study

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

Week 4

Apr 24: More JavaScript Events

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

Apr 26: Keyboard and Mobile events

  • Keyboard events
  • Pointer events; handling touch and drag
  • Polyfill libraries

Apr 28: Classes in JS HW3 assigned

  • Finish Pointer events
  • CSS animations
  • Intro ES6 classes
  • HW2 DUE HW2 due at 11:59pm

Week 5

May 1: Finish classes in JS

  • More ES6 classes
  • this keyword / bind()
  • Communicating between classes
    • Custom events
    • Callbacks
  • First-class functions
  • JavaScript application architecture

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

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

May 5: Callbacks; Functional JavaScript

  • Communicating between classes: Callbacks
  • Functional JavaScript
    • Closures

Week 6

Functional Javascript HW4 assigned

  • Import / export JavaScript modules
  • Lambdas / anonymous functions
  • Currying
  • fat arrow =>
  • Map/filter
  • HW3 DUE HW3 due at 11:59pm

May 8: Fetch API, Promises

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

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

  • GET and POST
  • Query parameters
  • Generating JSON response
  • Connecting to your backend
  • CORS

Week 7

May 15: Servers, NodeJS and Express

  • Servers in general
  • NodeJS
  • Express
  • npm

May 17: More Express; fetch() and localhost

  • npm
  • Express
  • fetch() to localhost

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

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

Week 8

May 22: Saving data: Intro to MongoDB

  • Saving data
  • POST body
  • body-parser
  • Saving to a file: fs
  • MongoDB: Saving to a database
    • System overview`
    • mongod
    • mongo
    • MongoClient

May 24: More MongoDB; server-side rendering

  • MongoDB: Fetching from a database
    • Queries
  • Server-side rendering
    • Template engine: Handlebars?

May 26: Authentication; users FINAL PROJECT ASSIGNED

  • OAuth2
  • Creating users
  • Saving users

Week 9

May 29: NO CLASS

  • Memorial Day

May 30: HW5 DUE

May 31: Server polish

  • Routing
  • Middleware
  • Testing and type checking
  • Testing backends
  • Flow and TypeScript

June 2: TBA

  • Might be overflow if we don’t finish other stuff
  • Otherwise, I’ll poll the class

Week 10

June 5: LAST DAY OF LECTURE: JavaScript frameworks

  • An opinionated tour of the passé and trendy frameworks
  • Passé: JQuery, Bootstrap
  • Trendy: ReactJS
  • In-between: Ruby on Rails; Angular; Polymer

June 7: NO LECTURE

  • Work-time for final project
  • Study for your finals in other classes!

Finals Week

June 12: Final project due