Basics
5 lessons · setup · variables · operators · control flow · functions
01. Getting Started with JS
Basics · Prerequisite: none (programming beginners welcome)
JavaScript started life as a browser language, but thanks to Node.js it now runs on servers, CLI tools, build pipelines — almost everywhere. The same code can run in different environments, but the available APIs differ (e.g. `window` in the browser, `process` in Node).
02. Variables and Types
Basics · Prerequisite: 01_Getting_Started
`const` cannot be reassigned, `let` can, and `var` has function-scope and hoisting issues that make it unsuitable for modern code. Default to `const`, switch to `let` only when the value must change.
03. Operators and Expressions
Basics · Prerequisite: 02_Variables_and_Types
Beyond the four basic operators you also have remainder `%`, exponentiation `**`, and increment/decrement `++`/`--`. Compound assignment operators like `+=`, `-=` are short and very common.
04. Control Flow
Basics · Prerequisite: 03_Operators_and_Expressions
Conditions are evaluated as truthy/falsy. When you have three or more branches, consider `switch` or a data-driven object lookup instead of long `if/else` chains.
05. Functions Basics
Basics · Prerequisite: 04_Control_Flow
Function declarations are hoisted, so you can call them above their definition. Function expressions and arrow functions are only usable after the variable is assigned. Arrow functions are short and have no `this` of their own, making them ideal for callbacks.
Objects & Arrays
4 lessons · objects · arrays · strings · destructuring/spread
06. Objects
Intermediate · Prerequisite: 05_Functions_Basics
An object is a collection of key-value pairs. Use it to bundle related data into a single unit.
07. Arrays Basics
Intermediate · Prerequisite: 06_Objects
An array is an ordered collection of values accessed by zero-based indices.
08. Strings
Intermediate · Prerequisite: 07_Arrays_Basics
Backtick-quoted strings (`` ` ``) support multi-line text and `${expr}` interpolation.
09. Destructuring and Spread
Intermediate · Prerequisite: 08_Strings
Destructuring pulls values out of an object into variables of the same name in one step.
Functional · ES6
4 lessons · arrow · higher-order · closure · classes
10. Arrow Functions
Intermediate · Prerequisite: 09_Destructuring_and_Spread
If the body spans multiple lines, you need explicit braces and a `return`.
11. Array Higher-Order Functions
Intermediate · Prerequisite: 10_Arrow_Functions
`forEach` is for side effects (logging, DOM updates) and returns nothing. `map` returns a new array.
12. Closures and Scope
Intermediate · Prerequisite: 11_Higher_Order_Functions
A function's scope is determined by **where it was declared**, not where it was called.
13. Classes
Intermediate · Prerequisite: 12_Closures_and_Scope
Calling a class without `new` throws a TypeError.
Async
3 lessons · callbacks/timers · Promise · async/await
14. Callbacks and Timers
Intermediate · Prerequisite: 13_Classes
Synchronous code runs line by line — the next line waits for the previous one to finish. Asynchronous code schedules "something to run later" and moves on right away.
15. Promise
Intermediate · Prerequisite: 14_Callbacks_and_Timers
A Promise is "a box that will eventually hold the result of an async operation". It has three states.
16. async / await
Intermediate · Prerequisite: 15_Promise
Adding the `async` keyword wraps a function's return value in a Promise automatically.
DOM
4 lessons · select · manipulate · events · forms
17. DOM Selection and Inspection
Intermediate · Prerequisite: 16_async_await
The browser parses HTML into a DOM (Document Object Model) tree. JavaScript reads and updates this tree to change what the user sees.
18. DOM Manipulation
Intermediate · Prerequisite: 17_DOM_Selection
`append` accepts multiple nodes and strings at once. `prepend` puts them at the front.
19. Event Handling
Intermediate · Prerequisite: 18_DOM_Manipulation
Removing a listener requires the same function reference you registered with. Anonymous functions can't be removed.
20. Forms and Inputs
Intermediate · Prerequisite: 19_Event_Handling
The browser validates inputs for you. You can also check from JavaScript using `form.checkValidity()` or each element's `validity` object.
Browser APIs
3 lessons · Fetch/JSON · storage · ES Modules
21. Fetch and JSON
Advanced · Prerequisite: 20_Async_Basics
Fetch is the HTTP client built into the browser (and Node 18+). It returns a Promise.
22. Storage (localStorage / sessionStorage / cookies)
Advanced · Prerequisite: 21_Fetch_and_JSON
localStorage persists data per origin. It survives until you explicitly remove it.
23. Modules (ESM)
Advanced · Prerequisite: 22_Storage
Putting everything in one file leads to naming collisions and pain. Modules isolate scope per file and only expose what you choose.
Node intro
2 lessons · Node environment · npm
24. Intro to the Node.js Environment
Advanced · Prerequisite: 23_Modules_ESM
Node is a JS runtime that runs outside the browser. It powers servers, CLIs, and build tooling.
25. Intro to npm
Advanced · Prerequisite: 24_Node_Environment
package.json is your project's business card and configuration file. It holds dependencies, scripts, and metadata.