JavaScript before framework magic. The browser before performance folklore. Complexity before pattern memorisation. Then practise producing the answer under pressure.
Not another algorithm atlas. These are production frontend failure modes: late network responses, missed frames, and slow navigations.
Type two searches. The old request takes longer and tries to overwrite the newer result. Abort it or gate the response by identity.
Follow the main thread through DOM, CSSOM, render tree, layout, paint, and composition. Then shorten the path without changing the page.
Read the MDN guideThe browser asks for the HTML. There is nothing to style, lay out, or paint yet.
A module is complete when you can produce its proof—not when you have scrolled through it. Filter to a track, or follow the full sequence from 01 to 24.
Build the runtime model first: language mechanics, async behavior, modules, and typed tooling.
Reason about what JavaScript evaluates before you ask the runtime.
Predict and explain five coercion or reference snippets before running them.
See lexical scope and function lifetime clearly enough to explain hidden state.
Build a closure-backed utility and explain what remains reachable and why.
Trace property lookup, method context, and composition without class folklore.
Trace a property lookup and refactor an inheritance-heavy example toward composition.
Choose the right built-in collection and transformation for the job.
Implement a transformation twice and justify the chosen collection and complexity.
Predict scheduling, handle failure, and cancel work that is no longer useful.
Predict an event-loop trace, then build a cancellable request flow.
Turn a script into typed, testable boundaries and debug it with evidence.
Split a small program into typed modules and diagnose a failing test in the debugger.
Move from the web platform to accessible UI, resilient data flows, browser performance, and architecture.
Follow a navigation across the network and know which layer owns each delay.
Narrate a navigation from address bar to first byte and inspect it in DevTools.
Make the document model carry structure, behavior, and accessibility by default.
Build a keyboard-usable form that still submits without client JavaScript.
Debug the cascade and compose responsive layout without fighting the browser.
Recreate a responsive layout and debug three cascade or geometry failures.
Use the browser platform directly before hiding it behind component abstractions.
Build a no-framework interface with delegated events and a network request.
Treat semantics, focus, and input methods as system constraints—not cleanup.
Audit and repair a component using keyboard and accessibility-tree evidence.
Model every visible state and place ownership before writing framework code.
Model a multi-state interface before implementing it in React.
Build networked UI that remains correct through delay, failure, and reordering.
Build search with stale-response protection and explain its request state machine.
Choose the right test boundary and ship a vertical slice through production.
Ship one tested vertical slice through a production build.
Connect resource order and main-thread work to the pixels users wait for.
Run both browser traces, diagnose the blockers, and explain the shorter path.
Turn requirements into boundaries, data flow, resilience, and explicit trade-offs.
Design a production frontend and defend two explicit trade-offs in a mock.
Learn the cost model, core structures, and reusable problem-solving patterns in dependency order.
Turn constraints into an invariant, a correct algorithm, and a cost model.
Replace a brute-force idea with a stated invariant, analysis, and test plan.
Trade memory for lookup speed and precompute repeated range work.
Solve one lookup and one range-query problem and compare their trade-offs.
Collapse repeated scanning into one controlled pass with a clear invariant.
Derive the window condition aloud and visualize every pointer movement.
Choose LIFO, FIFO, monotonic order, or pointer rewiring intentionally.
Solve a monotonic-stack problem and reverse a linked list in place.
Recognize monotone search spaces and transform geometry with ordering.
Binary-search an answer space and defend the predicate and boundaries.
Traverse hierarchy and maintain partial order without losing state.
Trace traversal state and solve one heap or trie problem with analysis.
Model relationships explicitly and choose traversal, order, path, or connectivity.
Choose a representation and solve a dependency or connectivity problem.
Explore choices, prove safe commitments, and reuse overlapping subproblems.
Move from brute force to memoization or tabulation and defend the recurrence.
The groundwork: the cost model and the TypeScript every later chapter assumes.
Two indices moving with purpose turn many O(n²) scans into one O(n) pass.
A moving range over an array or string — grow, shrink, and track the best.
Precompute running totals so any range query becomes a single subtraction.
Two runners at different speeds detect cycles and find midpoints in O(1) space.
Rewire next pointers as you walk — reverse a list with no extra memory.
O(1) lookup is the workhorse — trade space for time to kill the inner loop.
LIFO order, and the monotonic trick that answers next-greater in one pass.
Halve the search space each step — on sorted data and on answer ranges.
A partial order that surfaces the best element in O(log n) — top-K, merges, medians.
Sort by an endpoint, then sweep — merge, insert, and detect overlaps.
Level-order with a queue, depth-first with a stack/recursion — the two tree traversals.
A character tree for prefix queries — autocomplete and word search.
Nodes and edges: traversal, connectivity, shortest paths, topological order.
Explore choices depth-first, undo, and prune — permutations, subsets, combinations.
Overlapping subproblems + optimal substructure — memoize, then build the table.
Commit to the locally best choice when an exchange argument proves it global.
Pick a track. Clarify the problem, build or design the answer, narrate the trade-offs, and use the scorecard evidence to choose the next pass through the curriculum.