Stage 4 · Foundations

JavaScript

The language and the browser: syntax, data, the DOM, events, and debugging.

weeks at ~2h/day: ~5
weeks full-time: ~2.5

Your progress0 / 4

Why this stage matters

This is where you stop reading code and start writing it. Frameworks change every few years; JavaScript does not. Get comfortable with the language and the DOM first, then go behind the scenes in the next stage. Don't jump to a framework yet: you would end up learning JavaScript through its bugs.

What to learn

Must know
Language Fundamentals
Variables, types, equality, functions, arrays and objects, loops, destructuring, spread, optional chaining, and modules (import/export).
You're done when
- You can transform data with map, filter, reduce, and Object.entries fluently.
- You know the difference between == and ===, and between null and undefined.
Resources
Must know
DOM & Events
Selecting and updating elements, event bubbling and delegation, and building interactive UI without a framework.
You're done when
- You can build a small interactive app (todo, quiz, tabs) in vanilla JavaScript.
- You use event delegation for lists instead of one listener per item.
Resources
Must know
Web APIs
fetch, URL and URLSearchParams, localStorage, Intl for dates and numbers, IntersectionObserver, and the Clipboard API.
You're done when
- You format dates and currency with Intl instead of a library.
- You handle loading, error, and empty states for every fetch.
Resources
- MDN — Web APIsDocs
Must know
DevTools & Debugging
Breakpoints instead of console.log, the Network tab, the Elements panel, and reading stack traces.
You're done when
- You can pause code on a breakpoint and step through it.
- You can throttle the network and CPU to test on a 'slow phone'.
Resources
- Chrome DevTools docsDocs

Common mistakes

Watching tutorials without typing the code. Solve problems yourself first, then compare.
Skipping the DOM and going straight to a framework. You will not understand what the framework is doing for you.
Asking AI to write the solution before you have tried. Use it to explain, not to replace your thinking.

Checkpoint

You can build a small interactive app in vanilla JavaScript, with no framework, that keeps its data between visits and loads something from an API.

Stage project

Quiz or Memory Game (Vanilla JS)

A small interactive game or quiz built with only HTML, CSS, and JavaScript. Pick your own idea, or follow one of the game builds linked above and then add your own features.

Done when

Built with DOM manipulation and event delegation, no framework or library.
Best score or progress is saved in localStorage.
Loads its questions or data from an API, with loading and error states.
Fully playable with the keyboard.

Last reviewed November 2, 2026 · Full roadmap

What to learn

Must know

Language Fundamentals

Variables, types, equality, functions, arrays and objects, loops, destructuring, spread, optional chaining, and modules (import/export).

You're done when

You can transform data with map, filter, reduce, and Object.entries fluently.
You know the difference between == and ===, and between null and undefined.

Resources

Must know

DOM & Events

Selecting and updating elements, event bubbling and delegation, and building interactive UI without a framework.

You're done when

You can build a small interactive app (todo, quiz, tabs) in vanilla JavaScript.
You use event delegation for lists instead of one listener per item.

Resources

Must know

Web APIs

fetch, URL and URLSearchParams, localStorage, Intl for dates and numbers, IntersectionObserver, and the Clipboard API.

You're done when

You format dates and currency with Intl instead of a library.
You handle loading, error, and empty states for every fetch.

Resources

MDN — Web APIsDocs

Must know

DevTools & Debugging

Breakpoints instead of console.log, the Network tab, the Elements panel, and reading stack traces.

You're done when

You can pause code on a breakpoint and step through it.
You can throttle the network and CPU to test on a 'slow phone'.

Resources

Chrome DevTools docsDocs

Common mistakes

Watching tutorials without typing the code. Solve problems yourself first, then compare.

Skipping the DOM and going straight to a framework. You will not understand what the framework is doing for you.

Asking AI to write the solution before you have tried. Use it to explain, not to replace your thinking.