bestpractic.org
← All learning pathsLearning path · Web Development

Frontend Developer

HTML and CSS first, then JavaScript, then Vue or React — every level an article and a quiz, every zone a checkpoint that opens the next.

  • 7 stages
  • 34 levels on your route
  • ~16 hours
  • pick Vue or React
  • pick Nuxt or Next.js
Know HTML? Skip it
  1. 1Read the level. Every level is an article — free, no account.
  2. Pass its quiz to collect the crystal and open the next level.
  3. Beat the checkpoint to open the next stage — or to skip one you know.
Stage 1

HTML

The document under every page — elements that mean something, and the native ones that replace a JavaScript library.

Stage 2

CSS

The box model, the cascade, layout and responsive type — the parts of CSS that decide whether a page holds together.

Clear HTML to open this stage.

Stage 3

JavaScript

How the language actually runs: scope and closures, the event loop, promises, and not mutating what you do not own.

Clear CSS to open this stage.

Stage 4

Vue

Reactivity is the whole framework. What Vue tracks, when it updates the DOM, and the traps that only look like Vue bugs.

Clear JavaScript to open this stage.

Stage 4

React

Rendering is the whole framework. When React re-renders, what it keeps between renders, and the state bugs it makes easy.

Clear JavaScript to open this stage.

Stage 5

Nuxt

Vue on the server: data fetching that does not double up, hydration that matches, and state that does not leak between requests.

Clear Vue to open this stage.

Stage 5

Next.js

React on the server: what gets cached, where a server action runs, and which boundary your code is actually on.

Clear React to open this stage.

Stage 6

TypeScript

Types that describe what your code really does — generics that stay generic, and checks that do not widen what you meant.

Clear Nuxt or Next.js to open this stage.

Stage 7

Ship it

What separates a demo from a product: speed you can measure, caches that do not lie, and a back button that works.

Clear TypeScript to open this stage.

Finish line. Clear the last checkpoint and the path is done — with a certificate that says so, at a link anyone can check.

7 levels are being written

The from-scratch pieces a beginner needs before the deep-dives. They join the map the day they publish — nothing on the route waits for them.

Hear when they land

One email per new level. Unsubscribe in one click.

Every level, as a list

Stage 1 · HTML

  1. HTML from zero — being written
  2. You built your modal with a `<div>` and a focus trap library. The native `<dialog>` does all of that.
  3. Stop Hand-Rolling an Exclusive Accordion. `<details name>` Does It
  4. Your dropdown is a div. The browser has a native popover now.
  5. The Modal Was Open. So Was Everything Behind It.

Stage 2 · CSS

  1. Box model & cascade — being written
  2. Flexbox — being written
  3. The CSS Selector Built to Lose Every Fight
  4. Your Grid Has Invisible Columns: auto-fill vs auto-fit
  5. Stop Writing Media Queries for Font Size
  6. Stop Writing JavaScript To Fix `100vh` On Mobile
  7. Stop Using outline: none. Use :focus-visible Instead.

Stage 3 · JavaScript

  1. JavaScript from zero — being written
  2. JavaScript Closures: The Complete Guide (with Cheat Sheet)
  3. JavaScript Event Loop Explained: The Complete Guide
  4. You reach for `Promise.all` for every concurrent request. Here's when to use the other three.
  5. Your `.sort()` is mutating state. JavaScript finally gave you the fix.
  6. Debounce and Throttle in JavaScript: The Complete Guide
  7. Stop Retrying Immediately. Exponential Backoff Fixes It.

Stage 4 · Vue

  1. Vue from zero — being written
  2. Vue Reactivity Explained: ref vs reactive (+ Cheat Sheet)
  3. Vue computed(): What It Caches and When It Reruns
  4. Vue watch vs watchEffect: The Complete Guide
  5. Vue nextTick Explained: How DOM Updates Are Batched
  6. Vue defineModel: The v-model Contract, Explained
  7. Vue Composables: The Shared State Trap (+ Cheat Sheet)

Stage 4 · React

  1. React from zero — being written
  2. React Re-render vs Remount: What Actually Triggers Each
  3. React Derived State: Why That useState Is Probably a Bug
  4. Your Search Box Lags. Debounce Hides It; `useTransition` Fixes It
  5. React Compiler 1.0: What useMemo You Can Delete
  6. React Form Actions: useActionState & useFormStatus Guide

Stage 5 · Nuxt

  1. useAsyncData Keys in Nuxt: Caching, Dedupe & the Sharing Bug
  2. Nuxt Hydration Mismatch: Why It Happens and How to Fix It
  3. Nuxt useState vs ref(): Why Server State Leaks Across Users
  4. Nuxt Server Routes Explained: How Nitro Builds Your API
  5. Nuxt 4.5 SSR Streaming: The Route Rules That Disable It

Stage 5 · Next.js

  1. Next.js Cache Components Explained (with Cheat Sheet)
  2. Next.js Server Actions: Mutations & Security (Cheat Sheet)
  3. Next.js Route Handlers: GET Stopped Caching in 15 — How to Cache in 16
  4. Next.js Parallel & Intercepting Routes: Modals Done Right
  5. Next.js proxy.ts Explained (with Cheat Sheet)

Stage 6 · TypeScript

  1. TypeScript Generics: The Complete Guide (with Cheat Sheet)
  2. Your TypeScript config objects are losing type information. `satisfies` fixes it.
  3. Inferred type predicates — being written
  4. You still write `finally { resource.close() }`. The `using` keyword does it automatically.

Stage 7 · Ship it

  1. You Installed a Library for Numbers PerformanceObserver Already Has.
  2. Web Workers in JavaScript: The Complete Guide
  3. CORS Explained: The Complete Guide (with Cheat Sheet)
  4. I Shipped a Fix. My Service Worker Kept Serving the Bug.
  5. `beforeunload` Can Still Kill Your bfcache. Mount It Only When Dirty.