4102165

Full Stack Web Development Fundamentals
  • Lectures
  • Homework

Lectures

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

  • 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 13: FINAL LECTURE: What’s next?

  • Slides:lecture27.odp/lecture27.pptx
    • 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 next week: Work on your final project!

June 11: Middleware; Data modeling; Authentication

  • Slides:lecture26.odp/lecture26.pptx
    • Middleware and Routes
    • Single-page web app
      • https://github.com/fullstackccu/fullstackccu.github.io/tree/master/lectures/25/codes
    • More MongoDB examples
    • Authentication
  • Code
    • Modules and Routes
    • Cross-stitch examples

June 6: Templates, Modules, and Routers

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

June 4: MongoDB and NodeJS

  • Slides:lecture24.odp /lecture24.pptx
    • 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 30: MongoDB

  • Slides: lecture23.odp/lecture23.pptx
    • 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 28: Saving data; MongoDB intro

  • Slides: lecture22.odp/lecture22.odp
    • 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 23: async / await; more Express; more fetch()

  • Slides: lecture21.odp/lecture21.pptx
    • 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 21: More Express; fetch() and localhost

  • Slides: lecture20.odp/lecture20.pptx
    • npm
    • Express
    • fetch() to localhost
  • Code
    • Lecture 19 GitHub repo
    • Lecture 20 GitHub repo

May 16: Servers, NodeJS and Express

  • Slides: lecture19.odp/lecture19.pptx
    • Servers in general
    • NodeJS
    • npm
    • Express
    • fetch() to localhost
  • Code
    • lecture19.zip
  • 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 14: More Fetch; JavaScript Event Loop

  • Slides:lecture18.odplecture18.pptx
    • More Fetch API:
      • Querying 3rd-party REST APIs
      • Submitting forms
      • CORS
    • Asynchrony in JavaScript
    • JavaScript event loop
  • Code
    • Fetch from Spotify / demo

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

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

May 7: Fetch API, Promises

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

May 5: Callbacks; Functional JavaScript

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

Apr 30: Custom events, this, and bind; first-class functions

  • Slides: / lecture14.odp
    • 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(with bugs): Communicating between two classes (Present to App) via callbacks
    • Present example: Communicating between two classes (Present to App) via callbacks

Apr 25: More ES6 classes; this and bind

  • Slides:lecture13.pdf/lecture13.pptx
    • More ES6 classes
    • this keyword / bind()
    • Communicating between classes
      • Present owns App: BAD STYLE DON'T DO THIS
      • App and Present: Custom Events
      • App and Present: Callback
    • JavaScript application architectureObject-oriented photo album

Apr 22: CSS Animations; ES6 classes

  • Slides: lecture12.odp/lecture12.pptx
    • 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: Object-oriented Present example
    • OO photo album: Object-oriented Photo Album Example
    • OO Two classes: App and Present Example

Apr 18: Keyboard, Mouse, and Touch events

  • Slides:lecture11.odp / lecture11.pptx
    • 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 16: More JavaScript events

  • Slides:lecture10.odp/ lecture10.pptx
    • 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 11: More DOM; case study

  • Slides: lecture09.odp/ lecture09.pptx
    • 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
    • Tic-Tac-Toe: Magic Number Version
    • tictactoe.js / html / css

Apr 9: DOM and events

  • Slides: lecture08.odp/ lecture08.pptx
    • Finish language feature tour
    • DOM: Document Object Model
    • Basic event handling

Mar 28: Introduction to JavaScript

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

Mar 26: 講座：全棧程式開發 雜談

  • Slides:講師投影片

Mar 21: position; Mobile web

  • Slides: lecture06.odp
    • 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.

Mar 19: More flexbox and layout

  • Slides:lecture05.odp
    • 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!