JavaScript as the browser's runtime — for Python devs shipping their own UIs

console.log to event handlers — the bare minimum to read other people's JS without panic. Variables, types, control flow, the gotchas modern stacks still trip on.

1. 1.console.log: your first line of JavaScript5m · 50xpFREE
2. 2.let and const: never use var6m · 75xpFREE
3. 3.Template literals: strings that breathe5m · 50xpFREE
4. 4.Arrays: push, map, filter — the three you use daily8m · 100xpFREE
5. 5.Build a Counter with JavaScript and addEventListener12m · 200xpFREE
6. 6.Objects: properties, methods, destructuring7m · 75xpFREE
7. 7.Functions: arrow vs declaration, and when each one wins8m · 75xpFREE
8. 8.Conditionals + the falsy gotcha7m · 75xpFREE
9. 9.Loops: for-of, forEach, and when to use which7m · 75xpFREE
10. 10.Build a Live Word Counter in Vanilla JavaScript14m · 250xpFREE

Query, listen, modify. The browser as a tree your code edits live.

1. 1.getElementById + textContent: the cheapest DOM update6m · 75xpFREE
2. 2.querySelector + querySelectorAll: CSS selectors in JS6m · 75xp🔒
3. 3.addEventListener: click and the event object7m · 75xp🔒
4. 4.classList: toggle classes the modern way6m · 75xp🔒
5. 5.Reading form inputs without a framework8m · 100xp🔒
6. 6.Form submit + preventDefault: stop the page reload8m · 100xp🔒
7. 7.Creating elements: createElement vs innerHTML8m · 100xp🔒
8. 8.Event delegation: one listener for a thousand items8m · 100xp🔒
9. 9.Keyboard events: keydown, modifiers, and the Escape key8m · 100xp🔒
10. 10.Build a Todo List in Vanilla JavaScript with Event Delegation14m · 250xp🔒

import / export, bare specifiers, why Vite vs Webpack vs nothing.

1. 1.<script type='module'>: ES modules in the browser6m · 75xp🔒
2. 2.Named exports: importing several things6m · 75xp🔒
3. 3.Default export vs named: when each one fits7m · 75xp🔒
4. 4.Dynamic import(): load code on demand8m · 100xp🔒
5. 5.Tree-shaking: why named imports beat namespace imports7m · 75xp🔒
6. 6.Import maps: bare specifiers without a bundler8m · 100xp🔒
7. 7.package.json: the 6 fields you actually need7m · 75xp🔒
8. 8.Bundlers in 2026: Vite, esbuild, or nothing8m · 75xp🔒
9. 9.Semver: ^1.2.3, ~1.2.3, and when each matters7m · 75xp🔒
10. 10.Build a Small JavaScript Library with ES Module Exports12m · 250xp🔒
11. 11.Recap: Modules & async (C1-C3)5m · 50xp🔒

Promises, async/await, fetch, the AbortController contract.

1. 1.Promises: a value that's not here yet7m · 75xp🔒
2. 2.JavaScript async / await Tutorial: Promise chains, simplified7m · 100xp🔒
3. 3.JavaScript fetch() Tutorial: GET requests + the r.ok trap8m · 100xp🔒
4. 4.POSTing JSON: method + headers + body8m · 100xp🔒
5. 5.Error handling: network errors vs HTTP errors vs body errors9m · 100xp🔒
6. 6.AbortController in JavaScript: Cancel a Fetch Request8m · 100xp🔒
7. 7.Promise.all + Promise.race + Promise.allSettled8m · 100xp🔒
8. 8.for-await-of in JavaScript: Iterate Over Async Sources8m · 100xp🔒
9. 9.Top-Level await in ES Modules: Skip the IIFE Wrapper6m · 75xp🔒
10. 10.Build a Live Search Box with Fetch, Debounce and AbortController14m · 250xp🔒

JSDoc, type narrowing, when to NOT reach for TS.

1. 1.typeof — the runtime type guard6m · 75xpFREE
2. 2.Narrowing with if + typeof8m · 100xp🔒
3. 3.Array.isArray — when typeof lies7m · 100xp🔒
4. 4.instanceof for Date and custom classes8m · 100xp🔒
5. 5.JSDoc @param and @returns: IDE hints without TS10m · 150xp🔒
6. 6.JSDoc @typedef for object shapes12m · 150xp🔒
7. 7.Discriminated unions in JSDoc12m · 175xp🔒
8. 8.Optional chaining ?. and nullish coalescing ??7m · 100xp🔒
9. 9.When NOT to add types7m · 100xp🔒
10. 10.Capstone: refactor a tangled function with types14m · 250xp🔒

for-of, Symbol.iterator, yield, lazy sequences.

1. 1.for-of vs forEach vs for-in7m · 100xp🔒
2. 2.Iterating Maps and Sets8m · 100xp🔒
3. 3.The iterator protocol10m · 150xp🔒
4. 4.Generators: function* and yield9m · 150xp🔒
5. 5.Lazy infinite sequences10m · 175xp🔒
6. 6.yield* — delegating to another iterable8m · 125xp🔒
7. 7.Async generators — async function*11m · 175xp🔒
8. 8.Paginated fetch with async generator12m · 200xp🔒
9. 9.Spread + destructuring with iterables7m · 100xp🔒
10. 10.Capstone: streaming CSV parser15m · 275xp🔒
11. 11.Recap: Iterators, fetch, errors (C4-C6)5m · 50xp🔒

try/catch/finally, custom Error classes, Chrome devtools you actually use.

1. 1.throw and catch — the basic shape6m · 75xp🔒
2. 2.The Error object — name, message, stack6m · 75xp🔒
3. 3.Custom Error classes9m · 125xp🔒
4. 4.try / catch / finally7m · 100xp🔒
5. 5.Narrowing errors with instanceof8m · 125xp🔒
6. 6.Async errors — try/catch around await9m · 125xp🔒
7. 7.Error chaining with the cause option8m · 125xp🔒
8. 8.console beyond .log — group, table, time, trace7m · 100xp🔒
9. 9.Defensive parsing of unknown input9m · 125xp🔒
10. 10.Capstone: typed-error fetch wrapper14m · 250xp🔒

node:test, t.assert.deepStrictEqual, plain script tests on save.

1. 1.Assertion functions — the foundation6m · 75xp🔒
2. 2.Deep equality for objects and arrays8m · 100xp🔒
3. 3.Roll-your-own test runner10m · 150xp🔒
4. 4.Arrange–Act–Assert7m · 100xp🔒
5. 5.Grouping with describe()9m · 125xp🔒
6. 6.Spies — recording calls10m · 150xp🔒
7. 7.Testing async code9m · 125xp🔒
8. 8.beforeEach / afterEach9m · 125xp🔒
9. 9.Helpful failure output7m · 100xp🔒
10. 10.Capstone: test a small library15m · 275xp🔒

localStorage, IndexedDB, fetch, AbortSignal, structuredClone, View Transitions.

1. 1.localStorage — read, write, remove6m · 75xp🔒
2. 2.Storing objects with JSON.stringify7m · 100xp🔒
3. 3.sessionStorage vs localStorage5m · 75xp🔒
4. 4.URL + URLSearchParams7m · 100xp🔒
5. 5.structuredClone — proper deep copy7m · 100xp🔒
6. 6.requestAnimationFrame — smooth animation8m · 100xp🔒
7. 7.AbortController as a cancellation token9m · 125xp🔒
8. 8.EventTarget — your own event bus9m · 125xp🔒
9. 9.View Transitions for crossfade9m · 125xp🔒
10. 10.Capstone: undo stack with structuredClone + localStorage15m · 275xp🔒
11. 11.Recap: Tooling, types, browser APIs (C7-C9)5m · 50xp🔒