Basics

  • Introduction
  • Building Your First Web Page
  • Values and Variables
  • If, Else, and Switch
  • Functions
  • Looping (For, While, etc.)
  • Commenting Your Code
  • Timer Functions
  • Variable Scope
  • Closures
  • Where Should Your Code Live
  • Console Logging Basics
  • Variable and Function Hoisting
  • Chrome Dev Tools Tricks for Front End Developers

Objects / OOP

  • Of Pizza, Types, Primitives, and Objects
  • Deeper Look at Objects
  • Arrays
  • Strings
  • Arrow Functions
  • Combining Strings and Variables
  • When Primitives Behave Like Objects
  • Numbers
  • Rounding Numbers
  • Going from a String to a Number
  • Measuring the Distance Between Two Points by using the Pythagorean Theorem
  • Remapping Values
  • Getters and Setters
  • Generating Random Numbers
  • Adding and Removing Properties on an Object
  • Using Classes
  • Making Sense of "this" and More
  • Extending Built-in Objects
  • Booleans and Strict Equality Operators
  • null and undefined
  • All About JSON
  • Diving into Sets
  • Storing Data Using Web (aka Local) Storage
  • Cookies vs. localStorage vs. sessionStorage

The DOM

  • JavaScript, the Browser, and the DOM
  • Finding DOM Elements Using querySelector
  • Modifying DOM Elements
  • Setting CSS Styles using JavaScript
  • Traversing the DOM
  • Creating, Removing, and Cloning DOM Elements
  • Quickly Adding Many Elements into the DOM
  • CSS Variables + JavaScript = Win!
  • Custom Data (data-*) Attributes!
  • Using Emojis in HTML, CSS, and JS
  • Generating Random Colors
  • Viewport, Device, and Document Size
  • Working with URLs
  • Picking Colors with an Eyedropper in JavaScript

Events

  • Introduction to Events
  • Event Capturing and Bubbling
  • Mouse Events
  • Running Your Code at the Right Time
  • Page Navigation on Click
  • Handling Events for Multiple Elements
  • Keyboard Events
  • Custom Events
  • Loading Script Files Dynamically
  • Throttling Chatty Events
  • Preloading Images
  • Detecting If the User is Idle or Inactive
  • Detecting Browser Zoom Changes in JavaScript

Device Stuff

  • Making HTTP/Web Requests
  • Getting the Mouse Click Position
  • Getting the Mouse Movement Direction
  • Checking if a File Exists
  • Playing Sounds Using the Audio Element
  • Create a Press and Hold Effect
  • Create a Draggable Element
  • Check if You Are on a Touch Enabled Device
  • Accessing Your Webcam in HTML

STUCK? Get help...now!