I Turned 44 Blog Posts Into a Frontend Roadmap You Have to Pass

It's Sunday night, the interview is on Thursday, and the frontend roadmap in your other tab has more topics than you have evenings. You're sure about half of them and fairly sure about the rest.

The roadmap can't tell you which "fairly sure" is real. It only knows what you ticked.

So test the topics before you read them. Here's what that looks like for HTML: ten questions drawn at random, seven right to pass, and the whole stage counts as cleared.

No account and no reading, just ten questions. Here's why that beats a checkbox, and how it works.

What you'll learn

By the end of this article you'll be able to:

• Explain why a frontend roadmap you tick yourself overstates what you know, using a 2006 study of re-reading versus testing
• Compare seven well-known frontend roadmaps and courses on price, sign-up, checks, skipping and certificates
• Use checkpoints to skip the stages you already know and find the gaps you don't
• Compute learning progress from quiz attempts instead of storing it
• Tell when this path is the wrong tool, and what to use instead

Who this is for

You've shipped frontend code for a year or more, in Vue or React, and you want to find out quickly what you actually know: for an interview, a promotion or your own peace of mind. If you build learning tools, read "Under the hood". If you're starting from zero, read "When not to use it" first.

Table of contents

• Why a frontend roadmap you tick yourself stops working
• What people do today: seven frontend roadmaps and courses
• Where today's options break
• The mental model
• Enter the Frontend Developer path
• How the frontend roadmap works, in four steps
• Under the hood: progress computed from quiz attempts
• When not to use it
• FAQ
• Cheat sheet: the path at a glance

Why a frontend roadmap you tick yourself stops working

Strip a self-marked roadmap down to its data, and this is all of it:

type Status = "done" | "learning" | "skipped" | "pending";

const progress: Record<string, Status> = {
  "semantic-html": "done",  // ticked two years ago
  "event-loop": "done",     // read the article, felt fine
  promises: "skipped",      // "I use them every day"
  specificity: "pending",
};

Every value in that object is an opinion, typed in by the person it describes. Nothing can make it wrong, and that is the bug.

It fails in three ways:

1. "done" records reading, not knowing. Reaching the end of an article and answering a question about it are different events. The tick records the first one.
2. "skipped" is a guess, in both directions. You skip HTML because you've written it for years. Whether you know what inert does, or what showModal() gives you that show() doesn't, the tick can't say. Some of what you skip, you don't know; some of what you re-read, you did.
3. Nobody else can read it. A lead, a mentor or an interviewer can't tell your "done" from anyone else's.

The fix isn't a better checkbox. It's taking the checkbox away from the person being measured.

What people do today: seven frontend roadmaps and courses

Here's how the best-known options handle it, checked on their own pages on 14 October 2026:

Three of these deserve more than a row.

roadmap.sh is the best map of what to learn. Its roadmaps are free, the project has 369K GitHub stars, and the site counts more than 3.2 million registered users. If you want to know what exists, look there first; nothing here argues against it.

freeCodeCamp's v9 certifications are the most rigorous free credential in that table, and more rigorous than the quizzes in this article. The new Responsive Web Design certification ends each lesson with three comprehension questions and each module with a 20-question quiz (18 right to pass). Then it asks for five certification projects before a 50-question, closed-book exam: one attempt a week, reviewed by staff before the result is released.

The Odin Project is right about proof. It gives no certificate because, in its FAQ's words, "Employers will be much more impressed with your amazing personal portfolio of projects." Projects are the strongest evidence anywhere in that table.

Where today's options break

None of these is broken. The gap only shows when you want four things at once: free, no sign-up to start, a check on every step, and a skip you have to earn.

On roadmap.sh you mark a topic done. Its AI-generated quizzes sit beside the roadmap rather than gating it: two on the free plan ("These don't reset"), unlimited on Pro at $10 a month. freeCodeCamp checks properly, but it is built to take you from the start: its own figure is 300 hours per certification, and the exam waits for five projects. Right for learning, heavy for finding out what you already know.

Codecademy built exactly the skip I wanted ("Don't waste time learning what you already know") and put it behind Pro, from $15.99 a month billed annually. The Odin Project and MDN Curriculum have nothing to pass, Scrimba is paid, and Frontend Mentor checks what you build rather than what you know.

No single piece of what I built is new; quizzes, skipping, forks and certificates all exist in that table. What I couldn't find among those seven was all four together.

The mental model

The mental model: reading is input, answering is evidence, and progress should be computed from the evidence, never typed in by the person being measured.

The evidence isn't only for other people. Roediger and Karpicke's 2006 study, Test-Enhanced Learning (Psychological Science 17(3), 249–255), compared re-reading with testing. On a test five minutes later, re-reading came out ahead. Two days later, and again a week later, testing did, even though re-reading had left students more confident. No feedback was given in that study: nobody told the tested students what they had missed.

Three things follow:

• Skipping is evidence arriving early. If you can pass the check without reading, the reading would have been re-reading, the strategy that lost at two days and at a week.
• A check can be open-book and still be a check. Its job is to make you answer, and to show you exactly where you couldn't.
• Failing is the useful part. A wrong answer that arrives with an explanation is a reading list. A tick never told you anything.

Enter the Frontend Developer path

I'd already written the articles. Between July and October, 44 of my posts each taught one piece of frontend, from the native <dialog> to the back/forward cache, and every one has a quiz. What they lacked was an order, and a reason to take the quiz.

So I put them on a map: a free frontend developer roadmap on bestpractic.org, where every step is an article and a quiz you have to pass. Read it. Pass it. Unlock the next stage.

Honestly, in one sentence: 44 existing articles and their 336 quiz questions, in 7 stages that each close with a checkpoint, free, with no account needed to start, about 16 hours by the site's own estimate, and 7 more levels still being written.

• 🗺️ The map: https://bestpractic.org/paths/frontend-developer
• ⏭️ The HTML checkpoint: https://bestpractic.org/paths/frontend-developer/checkpoint/html
• 1️⃣ Level 1, the native <dialog>: https://bestpractic.org/blog/dialog-element-native-modal?path=frontend-developer
• 📚 All learning paths: https://bestpractic.org/paths

How the frontend roadmap works, in four steps

Step 1: the map

The route has seven stages: HTML, CSS, JavaScript, Vue or React, Nuxt or Next.js, TypeScript, and Ship it, the production stage. The two forks make nine stage cards, each pair sharing one tier of the map: Nuxt follows Vue, Next.js follows React, and TypeScript opens from either side.

The longest route is 34 levels, through Vue and Nuxt; through React and Next.js it is 33. JavaScript includes the event loop, Next.js starts with Cache Components, and TypeScript with generics. Seven more levels show as "Being written": from-zero openers for HTML, JavaScript, Vue and React, then the box model and cascade, Flexbox, and inferred type predicates.

Key concept: the percentage measures your route, not the whole map. Each tier counts once, so finishing one branch is 100%.

Step 2: a level is an article plus its quiz

Each level is one of the 44 articles plus its quiz: 6 to 9 questions, four options each. The article's badge says where it sits ("Level 1 of 4 in HTML"). Pass the quiz at 70% to clear the level. Your best score counts, retakes are unlimited, and each cleared level leaves a crystal on the map, gold at 100%.

Answers stay hidden until you submit. Then every question is explained: why the right option is right and, if you picked another, why yours was wrong. Two-thirds also link to a source, mostly MDN and the frameworks' own docs.

Levels open one at a time. A locked one is still readable: its drawer offers "Read it anyway", because every article is free.

Key concept: the lock orders the route; it never hides the article. A quiz you passed before its level opened, from the blog, say, still counts.

Step 3: the checkpoint, and how to skip a stage

Every stage ends in a checkpoint: 10 questions drawn at random from that stage's level quizzes, a fresh draw on each attempt, 70% to pass. The last one, Ship it, draws 15. Beat it, and the stage is clear and the next one opens.

A checkpoint is open from the moment its stage is. That's the skip from the top of this article: "Know HTML? Skip it" goes straight there, and a pass clears HTML without a single level. The levels stay open, so you can go back for the crystals; skipping earns none.

Fail it, and the review explains every question; the next attempt is a new draw. One honest caveat: a checkpoint has no questions of its own, so if you have just cleared every level in a stage, you have already met every question it can ask.

Key concept: a checkpoint is a placement check built from the stage's own quizzes. It asks the same of someone who read everything and someone who read nothing.

Step 4: your run, and the finish line

No account is needed to start: a guest's run is saved on that device for a year, in a cookie set when you first start a quiz. Sign up, and your guest attempts move to your account, run and all.

The "Your run" card does the arithmetic. Clear level 1 and you're at 3%: one of five units in HTML (four levels plus the checkpoint), averaged over seven tiers. Beat the HTML checkpoint and you're at 14%.

You finish by beating one checkpoint per tier: seven passes, at least 75 questions. The certificate needs a free account and lives at a public link (/certificates/BP-…) that anyone can open to check it. It states what it certifies: earned by every checkpoint.

Key concept: finishing is defined by checkpoints alone, which is why a skipper and a completionist end up at the same finish line.

Under the hood: progress computed from quiz attempts

If you build learning tools, this is the part worth taking.

Progress is computed, not kept. The map never reads your progress from a table; every load works it out again from the map and your best attempt at each quiz. The real path-progress.ts is covered by 13 Vitest cases. This simplified sketch follows the same rules:

// A simplified sketch of path-progress.ts. The real one also places the "You"
// marker, follows the branch you started at a fork, and marks perfect scores.
type Stage = {
  slug: string;
  tier: number;              // forks share a tier: Vue and React are both 4
  unlockedBy: string[];      // [] for HTML, ["nuxt", "nextjs"] for TypeScript
  checkpoint: string;        // the checkpoint's quiz id
  levels: (string | null)[]; // level quiz ids in order; null = "Being written"
};
type Attempt = { quiz: string; score: number; maxScore: number };

export function pathProgress(stages: Stage[], attempts: Attempt[]) {
  // 1. Only your best attempt at each quiz counts, wherever you took it.
  const best = new Map<string, number>();
  for (const { quiz, score, maxScore } of attempts) {
    best.set(quiz, Math.max(best.get(quiz) ?? 0, (score / maxScore) * 100));
  }
  const passed = (quiz: string) => (best.get(quiz) ?? 0) >= 70;

  const ordered = [...stages].sort((a, b) => a.tier - b.tier);
  const cleared = new Set<string>();
  const levels = new Map<string, "open" | "locked" | "cleared">();

  for (const stage of ordered) {
    // 2. A stage opens when ANY stage in its unlockedBy is cleared.
    const open = stage.unlockedBy.length === 0 || stage.unlockedBy.some((s) => cleared.has(s));
    // 3. Its checkpoint, and nothing else, clears it.
    if (open && passed(stage.checkpoint)) cleared.add(stage.slug);

    // 4. Levels open one at a time. A "Being written" level is skipped: it blocks nobody.
    let previousPassed = true;
    for (const quiz of stage.levels) {
      if (quiz === null) continue;
      const ok = passed(quiz);
      levels.set(quiz, ok ? "cleared" : open && (previousPassed || cleared.has(stage.slug)) ? "open" : "locked");
      previousPassed = ok;
    }
  }

  // 5. Percent along your route: each tier counts once, scored by its best
  //    stage, and a checkpoint is worth one level.
  const tiers = [...new Set(ordered.map((s) => s.tier))];
  const tierScore = (tier: number) =>
    Math.max(...ordered.filter((s) => s.tier === tier).map((s) => {
      if (cleared.has(s.slug)) return 1;
      const written = s.levels.filter((q): q is string => q !== null);
      return written.filter(passed).length / (written.length + 1);
    }));
  const pct = Math.round((tiers.reduce((sum, t) => sum + tierScore(t), 0) / tiers.length) * 100);

  return { cleared, levels, pct };
}

That one decision pays for four features:

• Guests get a working map with no account, because their quiz attempts were already rows, keyed to a cookie.
• A quiz passed on the blog before the path existed counts the day the path does.
• Adding a level needs no backfill.
• Signing up keeps the run, because the run was only ever the attempts.

A signed-in run also writes its latest percentage to an enrollment record, after the fact; the map never reads it back. The rest follows the same instinct:

• The map is the same for everyone; you are fetched. The server renders the map without anyone's progress in it, so every visitor gets the same one. Your place on it arrives after hydration, and the default is a newcomer's view, so a first visit never shows padlocks flicking open.
• Looking costs nothing. The progress endpoint never sets a cookie. The anonymous ID is only set when there is something to save, like a quiz attempt, so a crawler that only looks never gets one.
• Forks are data. Each stage lists the stages that open it (unlockedBy), and the map draws one road per entry: the line, the fork and the join, from one rule.
• Checkpoints are assembled, not written. Each release builds a stage's checkpoint from its level quizzes. They issue no certificate of their own; the path certificate is the proof.
• The catalogue is code. A level whose article isn't written yet shows as "Being written" and blocks nobody. Publishing that article and its quiz under the planned slug is all the map needs; the next release picks it up.

When not to use it

Here's when this path is the wrong tool, and what to use instead.

• You're starting from zero today. The from-zero openers aren't written yet, and the first live level, the native <dialog>, assumes you've built a modal before. Start with the MDN Curriculum, free and beginner-level, or freeCodeCamp for questions after every lesson, and come back for the checkpoints.
• You learn by building. A quiz checks understanding, not whether you can ship a page. The Odin Project is free and project-based, and Frontend Mentor gives you real designs to build, with feedback on the result.
• You need a closed-book credential. These quizzes are open-book and unsupervised. freeCodeCamp's v9 certifications end in a closed-book exam and cost nothing.
• You learn from video. Every level here is text. Scrimba's Frontend Developer path is about 81 hours of interactive screencasts, on a paid plan.
• You want the whole map of the field. This is one path through 44 articles; roadmap.sh shows everything around it.
• You work in Angular or Svelte. The forks are Vue and React only.
• You'll switch devices before signing up. A guest run lives in one browser, and clearing its cookies loses it. Create the free account first.

FAQ

Is this frontend roadmap really free?

Yes. Every article, quiz and checkpoint on the path is free, and so is the account the certificate needs.

Do I need an account to start the frontend roadmap?

No. A guest run is saved on that device for a year. A free account carries it to every device, keeps what you did as a guest, and is required for the certificate.

How long does the frontend developer roadmap take?

The site estimates about 16 hours for one route; the read-time labels alone add up to 324 minutes on the Vue route and 302 on the React one. Skip everything you can, and the floor is seven checkpoints: 75 questions.

Should I learn Vue or React first?

The path doesn't rank them. Both open when you clear JavaScript, and TypeScript opens after either Nuxt or Next.js, so neither branch is a dead end. Pick the one your job, or the job you want, uses; your percentage only counts one branch.

Can I skip HTML and CSS?

Yes, if you can pass their checkpoints, 7 of 10 on each. Beat HTML's and CSS opens; beat CSS's and JavaScript opens. A stage only counts once it is open, so you skip in order.

What happens if I fail a checkpoint?

Nothing is lost. The review explains every question you missed, and you can retake it straight away: each attempt is a new random draw, with no cooldown and no attempt limit, and your best result counts.

Is the frontend developer certificate worth anything?

It records one thing: that the named account passed one checkpoint per stage at 70% or better, open-book, at least 75 questions in all. Anyone can open its public link to check it. It is not a closed-book credential; freeCodeCamp's is the free one built for that. Treat it as a receipt, not a diploma.

Cheat sheet: the path at a glance

The numbers below come from the live map as of 14 October 2026; "live levels" counts written levels only.

That's 44 written levels across both forks, 34 on the Vue route and 33 on the React route, plus 7 being written.

The rules in five lines:

level       article + quiz (6–9 questions). Pass at 70%; your best attempt counts.
order       Levels open one at a time. A locked article is still free to read.
checkpoint  10 random questions from the stage (15 for Ship it). 70% clears it.
skip        A checkpoint is open as soon as its stage is. Beat it early to skip.
finish      One checkpoint per tier. Certificate: free account, public link.

Key takeaways

• A tick you give yourself records what you read, not what you can answer. Compute progress from answers.
• In Roediger and Karpicke's 2006 study, re-reading won at five minutes; testing won at two days and at a week, with no feedback.
• Skipping is evidence arriving early: pass the check, and the reading was optional.
• Building a learning tool? Store the attempts and derive everything else.

Back to Sunday night, and the roadmap that only knows what you ticked. Spend the first evening on checkpoints instead of chapters. The stages you pass are done, and the ones you fail hand you every missed question, explained: a better reading list than a column of ticks ever was.

Which checkpoint do you think you could pass without reading anything, and which one would surprise you?

Written with AI assistance; every fact checked against the live site and primary sources.

🚀 Want more like this? Every guide, playground, and quiz lives on bestpractic.org — open it and sign up free so the next one finds you.

Thanks for reading! Let's stay connected:

• ⭐ GitHub — follow me and star the projects: github.com/parsajiravand
• 📸 Instagram — frontend best practices, daily: @bestpractice___