Five stages, each with the skills that matter, a project that proves them, and an honest estimate of how long it takes if you are studying part time.
5 stages
8-14 months part time
Project per stage
Realistic timeline
8-14 months at 10-15 hours per week
Stages
5 in order
Starting point
Complete beginner
Frontend developers build everything people see and touch in a web application: layout, interaction, accessibility and speed. The work sits on three web standards - HTML, CSS and JavaScript - with a component framework such as React on top for larger applications.
This frontend developer roadmap puts those layers in the order that works: structure and style, then JavaScript, then tooling, then a framework, then production quality. Each stage has a milestone that proves it is done. When you want to understand the server behind your API calls, the backend developer roadmap is the natural companion.
Overview
Frontend roadmap at a glance
Five stages from your first HTML page to production-quality interfaces.
Select a stage to see what it covers. Filter by level to focus.
1. Structure and style
4-6 weeks
Build static pages that work on any screen and read correctly to a screen reader.
A bundler and dev server - Vite is the gentlest starting point
ESLint and Prettier, configured once and then forgotten about
Deploying a static site to a host with a custom domain
Milestone
Every project from stage two is on GitHub with a readable README and a live URL.
Project ideas
Contribute a documentation fix to an open source project
4
Frameworks · Intermediate
A component framework
10-14 weeks
Build applications with many screens and shared state without the code collapsing.
Skills
Components, props and composition
State, effects and the rules that govern them
Lists, keys and conditional rendering
Client-side routing and URL as state
Data fetching, loading states, caching and revalidation
Forms, validation and controlled inputs
Milestone
A multi-page application with real data, routing, and states for loading, empty and error.
Project ideas
A recipe browser with search and filters
A dashboard with charts
A small ecommerce front end
5
Advanced topics · Advanced
Production quality
8-12 weeks
Ship work that is fast, accessible, tested and maintainable by someone else.
Skills
Performance: bundle size, lazy loading, image optimisation, Core Web Vitals
Accessibility: keyboard navigation, ARIA where needed, testing with a screen reader
Testing: unit tests with Vitest or Jest, end-to-end with Playwright
TypeScript basics, once JavaScript itself is comfortable
Server rendering and static generation, and when each is the right choice
Security basics: XSS, CSRF, handling tokens, never shipping secrets
Milestone
A deployed project scoring well in Lighthouse with tests running in CI.
Project ideas
Take your best earlier project and make it fast, tested and accessible
Progression
Frontend developer skills by level
What each level looks like in practice, so you know where you stand.
Beginner
Months 0-4
You can build responsive, accessible pages and add interactivity with plain JavaScript.
Focus on
Semantic HTML
Flexbox and Grid
JavaScript fundamentals
DOM events and fetch
You can: Build and deploy an interactive page without a framework.
Intermediate
Months 4-9
You work like a team member and build multi-page applications with a framework.
Focus on
Git and pull requests
npm and Vite
React components and state
Routing and data fetching
You can: Ship a framework app with real data and proper loading and error states.
Advanced
Months 9-14
Your work is fast, tested, typed and accessible enough for production.
Focus on
Core Web Vitals
Testing with Vitest and Playwright
TypeScript
Server rendering with Next.js
You can: Deliver a production-quality frontend someone else can maintain.
Technologies
Frontend technologies to learn
Dark chips are worth learning early. Light chips can wait until a project needs them.
The web platform
Everything else is built on these.
Start with
HTML
CSS
JavaScript
Browser dev tools
Add later or when needed
Web Components
Service workers
Canvas and WebGL
Styling
Learn plain CSS properly before any abstraction.
Start with
Flexbox
CSS Grid
Media and container queries
Add later or when needed
Tailwind CSS
Sass
CSS Modules
Frameworks
One is enough to get hired.
Start with
React
Add later or when needed
Next.js
Vue
Svelte
Angular
Tooling
The daily workflow of a frontend team.
Start with
Git and GitHub
npm
Vite
Add later or when needed
ESLint and Prettier
pnpm
Storybook
Quality
What separates a demo from a product.
Start with
Lighthouse
Keyboard and screen reader checks
Add later or when needed
Vitest or Jest
Playwright
TypeScript
Data and delivery
Getting data in and the site out.
Start with
fetch and JSON
A static host
Add later or when needed
TanStack Query
GraphQL
Edge and server rendering
Priorities
What to learn first, and what can wait
Focus beats coverage. These lists keep the first months pointed at what pays off.
Learn these first
1Semantic HTML and CSS layout with Flexbox and Grid
2JavaScript fundamentals: functions, arrays, objects and the DOM
3Asynchronous JavaScript with promises, async/await and fetch
4Git and GitHub, so every project is versioned and shareable
5One framework - React is the most widely requested
Safe to skip at the start
TypeScriptValuable, but learn it once JavaScript errors make sense on their own.
State management librariesBuilt-in state and context cover most early apps. Add a library when you feel the pain.
A second frameworkDepth in one gets you hired. The second is quick to learn later.
Complex build configurationVite and framework defaults handle this for you.
Micro-frontends and monoreposSolutions for large organisations, not first projects.
Projects
Frontend developer projects
Ordered by difficulty. Two or three finished ones beat ten half-built ones.
Beginner
Responsive landing page
Rebuild a real product page with semantic HTML, a mobile-first layout and accessible navigation.
HTML
CSS Grid
Accessibility
Beginner
API-powered widget
A weather or currency widget in plain JavaScript with loading and error states, using one of the free public APIs.
fetch
DOM
Intermediate
Search and filter app
A React app with URL-driven filters, pagination and a detail view.
React
Routing
State
Intermediate
Typing practice game
A timed typing test with scoring and accuracy stats - compare your result with our typing speed test.
Events
Timers
State
Advanced
Dashboard with charts
Authenticated dashboard with charts, tables, caching and keyboard-accessible controls.
Data fetching
Accessibility
Performance
Advanced
Production storefront
A server-rendered shop front with good Core Web Vitals, tests in CI and TypeScript.
Next.js
Testing
TypeScript
Avoid these
Common mistakes
Patterns that slow most learners down, and what to do instead.
Framework before JavaScript
Starting with React makes every error confusing. Plain JavaScript first, framework second.
Ignoring accessibility
Div buttons, missing labels and poor contrast exclude users and fail audits. Build it in from the first page.
Desktop-only layouts
Most traffic is mobile. Design small screens first and test on a real phone.
Copying CSS without understanding
Pasting utility classes or snippets you cannot explain leads to fragile layouts. Learn the box model and the cascade.
Unfinished portfolio projects
Half-built clones do not persuade anyone. Finish, deploy and document three projects instead.
Skipping empty and error states
Real data is slow, missing or broken. Handling those states is a visible sign of professional work.
Career
How to become a job-ready frontend developer
Portfolio, interviews and the checklist to review before you apply.
Frontend roles range from UI-focused positions to engineering roles that own performance, architecture and testing. Many developers later move toward full stack work - the full stack developer roadmap shows how - or add AI features using the AI developer roadmap.
Typical job titles
Frontend Developer
Front-End Engineer
React Developer
UI Developer
Web Developer
Job-ready checklist
You build responsive, accessible layouts without a CSS framework
You can explain closures, promises and the event loop
You have shipped a React app with routing and real data
You use Git, pull requests and a deploy pipeline
You can measure and improve page performance
Portfolio guidance
Three deployed projects with live links
Each README explains the problem, decisions and what you would improve
Every project works on a phone and with a keyboard
Show loading, empty and error states
A simple, fast personal site that links everything
Interview preparation
JavaScript fundamentals and small coding tasks
Building a component live, such as a searchable list
CSS layout questions and responsive fixes
Accessibility and performance discussions
Walking through your own project code
Resources
Where to learn each part
References worth keeping open, plus the pages here that go deeper.
If you want to connect, please WhatsApp: 3265503569
One-to-one mentorship for the roadmaps on Fox Is Happy is being set up. Sessions will cover code review, project feedback, interview preparation and a learning plan matched to where you actually are - not where a generic curriculum assumes you are.
Pricing will be reasonable and listed clearly before you book - pay per session, with student-friendly rates planned. No subscriptions and no bundles you do not need.
Register interest
3265503569
WhatsApp only. Message on WhatsApp to register interest and be told first when places open.
Mention Frontend Developer Roadmap in your message so the reply matches what you are working on.
How to work through this roadmap without stalling
Most people who fail to become frontend developers do not fail on the material. They fail on sequencing, on tutorial dependence, or on never finishing anything. Those are the three problems this page is arranged to avoid.
Why the order matters
The single most common mistake is starting with a framework. React is an abstraction over the DOM, and abstractions are only comprehensible when you already understand what they are abstracting. Learners who skip JavaScript fundamentals can follow a tutorial but cannot debug, because every error message refers to concepts they have never met. Six weeks spent on plain JavaScript saves six months of confusion later - that is the single highest-return decision on this list.
The same logic applies to TypeScript. It is genuinely valuable and it belongs in stage five, after JavaScript itself feels natural. Learning both at once means you cannot tell which language is producing the error you are looking at.
Escaping tutorial dependence
Following a tutorial feels like learning and mostly is not. You are watching someone else make decisions, and decision-making is the actual skill. The fix is not to avoid tutorials but to change what you do afterwards: close the video and rebuild the same thing from memory. You will get stuck immediately, and the getting-stuck is the part that teaches.
Build something the tutorial did not cover, using the same techniques.
Break your own working code on purpose and fix it without undo.
Read the error message fully before searching for it.
Set a twenty-minute limit on being stuck before asking for help, and write down what you tried.
Projects are the portfolio and the curriculum
Three finished, polished projects beat fifteen abandoned ones every time. Finished means deployed, with a README explaining what it does and what you learned, handling the empty state and the error state, and working on a phone. A hiring manager spends about ninety seconds on a portfolio: a live link that works and a clear explanation is worth more than a long list of repository names.
Realistic timelines
At ten to fifteen hours a week, the stages above add up to roughly eight to fourteen months to reach a level where junior applications are reasonable. Full-time study compresses that to five or six months. Anyone promising job-ready in eight weeks is selling something: it takes time for concepts to consolidate, and that time cannot be removed by working faster.
Consistency beats intensity. Five hours spread across five days produces more durable learning than the same five hours on a Sunday, because motor and conceptual learning both consolidate between sessions rather than during them.
What employers actually check
Junior interviews rarely test algorithm trivia. They test whether you can explain your own code, whether you can debug something unfamiliar in front of another person, whether your CSS survives a narrow screen, and whether you understand the basics well enough to learn the team's stack quickly. Being able to talk through a decision you made and why is worth more than knowing a fourth framework.
How long does it take to become a frontend developer?
At ten to fifteen hours a week, roughly eight to fourteen months to reach junior level. Full-time study typically compresses that to five or six months.
Should I learn React before JavaScript?
No. React is an abstraction over JavaScript and the DOM. Without the fundamentals you can follow tutorials but cannot debug, because the error messages refer to concepts you have not learned.
What should I learn first as a frontend developer?
Semantic HTML and CSS layout, then JavaScript fundamentals. Git comes next, and only then a framework. That order keeps every later topic understandable.
Can beginners follow this frontend roadmap?
Yes. It assumes no prior experience. Expect the first stage to feel slow - HTML and CSS reward care more than speed - and the JavaScript stage to be the hardest.
Do I need a computer science degree to become a frontend developer?
No. Frontend development is one of the most accessible routes into software. Employers look closely at deployed projects, code quality and how you explain your decisions.
Is TypeScript required for frontend jobs?
Many job adverts ask for it, so learn it - but after JavaScript feels comfortable. TypeScript adds types to JavaScript; it does not replace understanding the language underneath.
