Homepage
Applications
SleepTime App
❱
Step 1: HTML
Step 2: button
Step 3: events
Step 4: script tag
Step 5: Styling
Step 6: style tage
Step 7: More styling
Step 8: DOM
Step 9: getElementById()
Step 10: Date object
Step 11: Calc sleep times
Step 12: Style Guide
Better SleepTime
❱
Step 1: Git
Step 2: Initialize a local Git repository
Step 3: Update a file
Step 4: Check changes between versions
Step 5: Revert changes
Step 6: The SleepTime App
Step 7: Staging multiple files
Step 8: GitHub
Step 9: GitHub Pages
Step 10: Clone a remote repository
Step 11: Improved styling
Step 12: Improved function
Rock Paper Scissors
❱
Step 1: HTML Boilerplate
Step 2: Add Bootstrap
Step 3: Add buttons
Step 4: Container
Step 5: Grid
Step 6: Bootstrap button
Step 7: Check responsiveness
Step 8: Adjust responsiveness
Step 9: Jumbotorn
Step 10: Card
Step 11: Link to script
Step 12: Computer plays
Step 13: Game logic
Step 14: Display on HTML
TicTacToe
❱
Step 1: Starter
Step 2: HTML
Step 3: Style
Step 4: Script
Step 5: Debug
Step 6: Implement
Step 7: Solution
Payment App
❱
Step 1: Starter
Step 2: HTML File
Step 3: Styles
Step 4: HTML Form
Step 5: Submit
Step 6: Prevent default
Step 7: Validations
Step 8: Luhn Algorithm
Step 9: Array.split
Step 10: Array.map
Step 11: Array.reduce
Step 12: Implement Luhn
Brick Breaker
❱
Step 1: Vite
Step 2: Install Dependencies
Step 3: Run
Step 4: Canvas
Step 5: Animation
Step 6: Block Class
Step 7: Block Object
Step 8: Sprite Class
Step 9: Sprite Object
Step 10: Ball Class
Step 11: Refactor Ball
Step 12: Paddle Class
Step 13: Restrict paddle
Step 14: Collision Detection
Step 15: Game over
Step 16: Brick Class
Step 17: Lay the Bricks
Step 18: Scores
Step 19: Winning the game
Step 20: Build and Serve
Step 21: Deploy
Weather App
❱
Step 1: AccuWeather Account
Step 2: AccuWeather App
Step 3: AccuWeather API
Step 4: Postman
Step 5: GET Request
Step 6: Postman Collection
Step 7: Starter
Step 8: Layout & Style
Step 9: Script
Step 10: Fetch
Step 11: getLocationKey
Step 12: getCurrentCondition
Step 13: updateUI
QuickNotes App
❱
Step 1: Create React App
Step 2: Fake notes
Step 3: Refactor
Step 4: Keys
Step 5: Mantine UI
Step 6: Display Notes
Step 7: Search bar
Step 8: Filter Notes
Step 9: Delete Icon
Step 10: Delete Notes
Step 11: Header
Step 12: Add Button
Step 13: Add Notes
Step 14: Edit Icon
Step 15: Edit Page
Step 16: Homepage
Step 17: React Router
Step 18: Routing
Step 19: Navigation
Step 20: Edit Notes
Step 21: Add Notes
Step 22: Protect Edit View
Step 23: Debugging
Step 24: Persistence
Step 25: Rich Text Editor
Step 26: Dark Theme
Step 27: 404 Page
Step 28: Favicon
Step 29: Prettier
Step 30: Deploy
Hello Node & Express
❱
Step 1: Node
Step 2: NPM
Step 3: ES6 Module
Step 4: Hello Node
Step 5: Hello Express
Step 6: Web Server
Step 7: API Server
Step 8: Heroku
Step 9: CI/CD
Step 10: GitHub Secrets
Bookmark API
❱
Step 1: Scaffold the app
Step 2: Bookmark Model
Step 3: Vitest
Step 4: Bookmark DAO
Step 5: BookmarkDAO Tests
Step 6: Debug in Webstorm
Step 7: GET bookmarks
Step 8: POST Request
Step 9: Path Parameter
Step 10: DELETE Request
Step 11: PUT Request
Step 12: Refactor
Step 13: Supertest
Step 14: Endpoint testing
Step 15: Add sample bookmarks
Step 16: Test a GET request
Step 17: Test a POST request
Step 18: Test a PUT request
Step 19: Test a DELETE request
Step 20: Query Parameters
Step 21: Test GET with query parameters
Step 22: MongoDB & Mongoose
Step 23: Mongoose Schema & Model
Step 24: Bookmark DAO with Mongoose ODM
Step 25: Update the bookmarks route
Step 26: Refactor
Step 27: Test Bookmark Model
Step 28: Test BookmarkDAO
Step 29: Test Bookmarks route
Step 30: Vitest UI & Coverage
Step 31: Schema Validation
Step 32: Validation with Zod
Step 33: ApiError
Step 34: Validate ObjectID
Step 35: HTTP Errors
Step 36: Global Error Handler
Step 37: Middleware
Step 38: CORS
Step 39: Helmet
Step 40: Deploy
Roster API
❱
Step 1: Starter
Step 2: Source
Step 3: Tests
Step 4: Add password
Step 5: Hash password
Step 6: Update UserDao
Step 7: Test UserDao
Step 8: Update users route
Step 9: Test users route
Step 10: Authentication
Step 11: Add auth.js
Step 12: JWT
Step 13: Add auth.test.js
Step 14: Add a role
Step 15: Update UserDao
Step 16: Test UserDao
Step 17: Update users route
Step 18: Authorization
Step 19: Update users route
Step 20: Test users route
Readings
HTML
CSS
Git & GitHub
JavaScript History
JavaScript Basics
❱
Variables
Syntax
Types
Strings
Numbers
Arithmetics
Math
Objects
Array
Date
JavaScript Control Flow
❱
Equality Operators
Comparison Operators
Logical Operators
Boolean-ish
if statement
switch statement
Loops
Enhanced Loops
JavaScript Functions
❱
Defining Functions
Function Expression
Arrow Functions
Hoisting
Arguments
Function Scoping
Inner Functions
Functional Encapsulation
Closures
Mimic OOP
Functions are Objects
Methods
Function Context
OOP in JavaScript
❱
Class Syntax
Instantiate Classes
Dot operator
The this keyword
this keyword, again!
Information Hiding
Setters & Getters
Static Fields & Methods
Inheritance
Polymorphism
Class Expression
RESTful APIs
❱
What is API?
What is HTTP?
What is CRUD?
Client-Server Architecture
What is REST?
JHU Class Search
Course Search API
Asynchronous Patterns
❱
Some Things Take Time!
Not All Tasks Created Equal!
Asynchronous Programming
Understanding Async Operations
Patterns for Dealing with Async Code
Callback
Callback Hell!
Promises
Replacing Callbacks with Promises
Promises Exercise
Chaining Promises
Async & Await
Putting it all together!
JavaScript Modules
❱
IFEE Revisited!
An ES6 Module is just a file!
Exporting
Importing
Module does not create a type!
Default Export/Import
Before ES6 Modules
React
❱
Create React App
React Component
Thinking in Components
React Element
JSX Rules
Props
State
The nuances of useState
React Hooks
The useEffect Hook
React Data Flow
State Management
Styling
React Router
Node & Express
❱
Before NodeJS
Node Runtime
CommonJS
ES6
Node Modules
HTTP Module
Express
MongoDB
❱
Atlas
Cluster
Security
Connect
Mongoose
Mongoose Schema
Mongoose Model
Light (default)
Rust
Coal
Navy
Ayu
Full-Stack JavaScript
Putting it all together!