New: Roadmaps ordered paths through our cheat sheets and flashcards, so you always know what to study next.
Explore themSee what's new on GitHubFrom your first HTML element to a deployed, accessible React interface.
A 17-step learning path. Follow it in order, or jump to what you need.
This path is for anyone who wants to build what people actually see and click in a browser, from a first static page through a typed, tested React interface. Plan on about 8 to 13 weeks at a few hours a week. It stops at the browser's edge: servers, databases, and deployment infrastructure belong to the Full Stack Developer path, and if you already have these basics and want to go deeper into the React ecosystem alone, the React path covers that ground in full. By the end you can lay out a fully responsive interface with Grid and Flexbox, build and test typed React components with Vitest, and ship an accessible, fast Next.js app that holds up under Core Web Vitals.
No prior experience needed. Start from zero.
Semantic elements, forms, and ARIA basics here are the raw material every rule in step 2's CSS and every component in step 10's React eventually styles or wraps, and you can write a real page with it today.
The cascade, box model, and layout systems here turn the bare markup from step 1 into something people want to look at, and every override you fight later traces back to a rule you'll meet in this table.
Media queries, container queries, and fluid units stretch the layout rules from step 2 across phones, tablets, and desktops instead of one fixed-width page.
You can build a page that's marked up cleanly and reflows across phones, tablets, and desktops without three separate stylesheets. Next up: precise layouts and the browser tools to inspect them.
Finish this section to unlock.
+100 XP
Grid picks up where step 3's flexible layouts stop, giving you real two-dimensional control for dashboards, galleries, and full-page shells.
A layout rarely renders the way you pictured it, and the Elements, Console, and Network panels here show you exactly what the browser did with everything you wrote in steps 1 through 4.
Commit the page you've built through step 5 before you start wiring up behavior, so a broken change in step 7 is one you can undo instead of one you rewrite from memory.
This is where the static page from steps 1 through 6 starts reacting to people: closures, the event loop, and promises trip up almost everyone at first, so expect to come back to this table more than once.
You can lay out a real interface with Grid, debug it in DevTools, track every change in Git, and make it respond to clicks with JavaScript, closures and all. Next up: types and a framework to organize all that logic.
Finish this section to unlock.
+100 XP
A JavaScript project outgrows a single script tag fast, and Vite's dev server turns the code from step 7 into something that reloads instantly while you edit it.
Typing the JavaScript from step 7 catches shape mistakes before a user hits them, and narrowing is the part that finally makes an unknown API response feel safe to use.
Components organize the typed logic from step 9 into reusable pieces, and hooks like useState finally give your JavaScript a real place to keep interface state.
React's built-in state from step 10 gets unwieldy once several components need the same data, and a lightweight store like Zustand or Jotai solves that without Redux's ceremony.
You can scaffold a project with Vite, type its data with TypeScript, and reach for a lightweight store once component state stops being enough on its own. A few minutes of due flashcards keeps the CSS and JavaScript from chapters 1 and 2 fresh while React takes the spotlight.
Finish this section to unlock.
+100 XP
Reach for this if you're building login flows: passkeys replace the password fields a React form from step 10 would otherwise track in state, with a browser-native cryptographic key instead of a string to leak.
Every ARIA pattern and keyboard trap here applies straight to the components you built in step 10, and a screen reader will hit every one of them whether you tested for it or not.
Testing Library integration means you can finally prove the components from step 10 behave the way you claim instead of eyeballing them in a browser tab.
Add this if you're heading toward design systems or framework-agnostic libraries: Shadow DOM and custom elements package the accessibility patterns from step 13 into tags that work outside React too.
LCP, INP, and CLS measure the real cost of everything you've shipped since step 1, and the Performance panel from step 5 is where you'll watch those numbers actually move.
Routing, data fetching, and rendering strategies here pull the React components from step 10, the state layer from step 11, and the performance work from step 16 into one app you can actually deploy.
You can ship a React and Next.js interface that's accessible, tested, and fast, the exact craft the Frontend Developer badge certifies.
Finish this section to unlock.
+100 XP
Finish every required step, at least 70% of them genuinely done (not skipped), to earn this badge and 500 XP.