Lessons
The DOM and events
querySelector, classList, textContent vs innerHTML, addEventListener, event bubbling, and delegation.
Prerequisite: Foundations track complete
What to look for:
- querySelector vs querySelectorAll — and that NodeList is not an Array
- The innerHTML XSS warning — textContent is safe for user content
- Event delegation with closest() — why one listener beats many
- DOMContentLoaded vs window.load
Promises and async/await
The event loop, Promise states, .then/.catch, async/await syntax, Promise.all for parallel operations.
Prerequisite: Lesson 1 of Practitioner
What to look for:
- The event loop diagram in Curious — understand it fully
- The output order example (1, 4, 2, 3) — trace through it
- async/await vs .then() — same thing, different syntax
- The async/await parallel anti-pattern — sequential vs Promise.all
Error handling in async code
try/catch with async/await, .catch() on promise chains, Promise.allSettled, and AbortController.
Prerequisite: Lesson 2 of Practitioner
What to look for:
- The Exploring tab — error handling section
- Promise.allSettled vs Promise.all — which fails fast, which waits
- AbortController for cancellable fetch requests
- Why unhandled promise rejections are dangerous
OOP and classes
Class syntax, private fields (#), inheritance with extends/super, prototype chain, and composition mixins.
Prerequisite: Lessons 1–3 of Practitioner
What to look for:
- The class example with private fields — note # vs _ convention
- extends and super() — required before using this in constructor
- The Commonly confused box — classes are not hoisted
- Composition mixins pattern — prefer over deep inheritance
Modules (ESM)
import/export, default vs named exports, dynamic import(), and how type="module" works in browsers.
Prerequisite: Lesson 4 of Practitioner
What to look for:
- Named exports (with braces) vs default export (no braces)
- The ESM vs CJS table
- Dynamic import() for code splitting
- type="module" in script tags — what it changes (deferred, own scope)
How to use this track: Each lesson links to the relevant Codex reference page. Use the reading level tabs (Curious / Exploring / Deep Dive). The "what to look for" bullets guide your focus. Come back for the quiz when ready.
Track quiz
Four questions to check your understanding of the Practitioner track.
What is wrong with el.innerHTML = userInput?
What is the correct way to run two async operations in parallel?
What does super() do in a class constructor?
What is the difference between named and default exports?