How to use the Frontend Developer Roadmap
- 1. Tick what you knowOpen each stage and tick the topics you can already do confidently.
- 2. Pick your paceChoose how many hours a week you can study; the estimate updates for what's left.
- 3. Get your planSee time left per stage and your next three topics, and download the checklist.
Who this roadmap is for
This roadmap is for anyone who wants to build the part of websites and web apps people see and click. It assumes no coding background. It starts with how a browser loads a page, then moves through HTML, CSS and JavaScript before any framework. That order matters: most React problems beginners hit are really JavaScript or CSS problems.
React is used here because it is a common choice, but the stages before it apply equally if you later pick Vue, Angular or Svelte.
The 9 stages
Each of the 9 stages of the Frontend Developer path ends with a milestone project, because building something is what turns topics into skills.
- How the web works (about 1 week): What happens when you type a URL: DNS, HTTP, HTML, CSS, JS, Browsers and DevTools: Elements, Console, Network, HTTPS and why it matters and more. Milestone: Write a one-page explainer of a page load with a DevTools screenshot.
- HTML (about 2 weeks): Semantic tags: header, nav, main, article, footer, Forms: inputs, labels, validation attributes, Links, images, alt text and media and more. Milestone: A multi-section personal profile page with a working contact form layout.
- CSS (about 4 weeks): Selectors, specificity and the cascade, Box model, spacing and units (rem, %, vw), Flexbox for one-dimensional layout and more. Milestone: Responsive landing page that works from 375px phones to wide desktops.
- JavaScript (about 6 weeks): Variables, types, operators and conditions, Functions, scope and closures, Arrays and objects: map, filter, reduce, destructuring and more. Milestone: Weather or quiz app that loads data from a public API.
- Git and tooling (about 1 week): Git basics: init, add, commit, branch, merge, GitHub: push, pull requests, README, npm, package.json and scripts and more. Milestone: Put all projects so far on GitHub with clean READMEs.
- A framework: React (about 6 weeks): Components, JSX and props, State with useState and lifting state up, Effects, data fetching and loading states and more. Milestone: Multi-page React app: product list, filters, cart and checkout form.
- Styling at scale (about 2 weeks): Tailwind CSS or CSS Modules, Design tokens: colours, spacing, typography, Component libraries and when to use one and more. Milestone: Restyle the React app with a consistent design system.
- Quality (about 3 weeks): Accessibility: keyboard use, ARIA basics, contrast, Performance: images, lazy loading, Core Web Vitals, Testing with Vitest or Jest and React Testing Library and more. Milestone: Audit your app with Lighthouse and fix the top issues.
- Job ready (about 3 weeks): Portfolio site with 3 strong projects, Next.js basics: routing and server rendering, Frontend interview topics: event loop, closures, CSS layout and more. Milestone: Deploy the portfolio on Vercel or Netlify with a custom domain.
How the time estimate works
Worked example: with nothing ticked and 10 hours a week, the plan shows about 28 weeks for all 43 topics. Choose 20 hours a week and it becomes about 14 weeks. Tick every topic in the first stage, How the web works, and that row shows "done" while the total at 10 hours a week drops by 1 week to about 27.
Week counts are our suggestion for steady self-study of the Frontend Developer path, based on how much each stage covers. They are not survey data or a promise; use them to plan, not to judge yourself.
Tips for following it
- Build the milestone project before moving on. A half-finished stage with a working project beats a fully ticked stage with nothing to show.
- Open DevTools on sites you admire and inspect how they lay things out.
- Test every project on a real phone; responsive bugs hide on desktop.
Frequently asked questions
Do I need to learn TypeScript?
It's in the quality stage because many teams use it. Learn plain JavaScript well first; TypeScript adds types on top of it.
Should I learn Next.js?
It's in the final stage. Next.js builds on React, so learn React's basics first.
Where are my ticks saved?
Your Frontend Developer Roadmap ticks are kept only in this browser on this device, so nothing you tick is sent anywhere. Clearing site data or switching browsers starts you fresh; download your checklist to keep a copy.
Is the Frontend Developer Roadmap free?
Yes. Reading the Frontend Developer Roadmap and ticking topics is open to everyone. Viewing your plan the first time asks for your name and WhatsApp number once; after that every Uncodemy tool is free and open to you.