Frontend Development
What skills does a Frontend Developer need?
The foundation behind every product a user actually touches
Every app, dashboard, and website a person opens starts as frontend code — the buttons they click, the forms they fill in, the layouts that reflow on their phone. Frontend developers turn a design and an API into something real, fast, and usable, dealing with browser quirks, state, performance, and accessibility along the way. It's not "just styling" — it's full software engineering, done under the constraint that the result has to work everywhere, instantly, for people who never see the code behind it.
That's why it remains one of the most in-demand entry points into tech, and one that branches into several related careers. A Frontend Developer builds and ships the UI layer of web applications using HTML, CSS, JavaScript, and a modern framework. A UI/UX Engineer sits closer to design, turning mockups into polished, accessible interfaces and design systems. A Full-Stack Developer extends frontend skills with backend and API knowledge to own a feature end to end. Whichever direction you lean toward, the roadmap below covers the shared foundation all three roles are built on.
Choosing a Framework
Component model differs, the HTML/CSS/JS fundamentals below don't
React
The most widely used option, with the largest job market and ecosystem — the easiest starting point.
Vue.js
An approachable, template-based framework often praised for its gentler learning curve.
Angular
A full, opinionated framework built on TypeScript — common in larger enterprise codebases.
Svelte
Compiles away at build time for less runtime overhead — best once the fundamentals are solid.
Getting Started
You don't need to install anything to start practicing
The lowest-friction option is your browser's built-in DevTools (free, already installed) — inspect any live site's HTML and CSS, and experiment directly in the console. Pair that with an in-browser sandbox like CodeSandbox or StackBlitz to write and run real HTML/CSS/JS with zero local setup.
When you're ready for a proper local workflow, install VS Code (free) as your editor, along with Node.js, which brings npm and lets you run frameworks and build tools locally — the environment steps 5-10 of this roadmap assume.
None of this requires a powerful machine or paid tools — the entire roadmap below can be worked through on a browser, a free editor, and a free Node.js install.
Quick intro — what is frontend development?
A quick primer before you start the roadmap. Opens in a small player, no need to leave the page.
The Frontend Roadmap
Pick a level — each one includes everything from the levels before it
Steps 1 – 4: the language of the web and how it reaches the browser
How the Internet Works
HTTP, domain names, DNS, hosting, and how a browser turns a URL into a rendered page.
HTML & CSS
Semantic markup, the box model, layout with flexbox and grid, and responsive design.
JavaScript
The language that makes pages interactive — syntax, the DOM, events, async, and fetch.
Version Control & Package Managers
Track changes with Git, collaborate through GitHub or GitLab, and manage dependencies with npm, yarn, or pnpm.
Learn a Framework
Pick one and go deep — components, state management, and routing. React is the most common starting point.
CSS Frameworks
Ship consistent, responsive UI faster with a utility-first CSS framework like Tailwind.
Module Bundlers, Linters & Formatters
Bundle your app for production and keep the codebase consistent with linting and formatting tools.
Testing
Unit test with Vitest or Jest, then cover full user flows with Playwright or Cypress.
TypeScript & Web Security
Catch bugs before runtime with static types, and understand auth strategies, CORS, and CSP.
Deployment & Performance
Ship to Vercel, Netlify, or Cloudflare Pages, then optimize with Lighthouse and Core Web Vitals.
50 Mini HTML/CSS/JS Projects
Build small, self-contained UI pieces — cards, forms, animations — to drill vanilla HTML, CSS, and JS fast, matching steps 1 – 4.
Component-Driven React App
Scaffold a React app and build a small product — todo list, dashboard, or weather app — with real state management.
Responsive Landing Page
Design and build a fully responsive marketing page styled entirely with Tailwind's utility classes.
End-to-End Test Suite
Take any app you've built and write Playwright tests that cover its core user flows automatically.
freeCodeCamp: Responsive Web Design
A free, project-based certification covering HTML, CSS, and responsive layout — a solid check on steps 1 – 2 of this roadmap.
Learn morefreeCodeCamp: Front End Development Libraries
Covers React, Redux, and Bootstrap/Sass through hands-on projects — a natural checkpoint after steps 1 – 7, once a framework and styling tools are in place.
Learn moreMeta Front-End Developer Professional Certificate
A multi-course program on Coursera covering the full stack of modern frontend skills — React, TypeScript, testing, and version control — matching the full roadmap, steps 1 – 10.
Learn moreCommunity & Support
Where to ask when a step doesn't click
Stack Overflow
Best for specific, well-defined technical questions with searchable, vetted answers.
r/webdev
Casual, active discussion on frameworks, tooling, and getting started, aimed at working developers.
Frontend Mentor
Real-world design challenges with a community sharing solutions and feedback on your code.
freeCodeCamp Forum
Beginner-friendly help tied directly to the certifications this roadmap targets.
Frequently Asked Questions
Common questions from people starting out with frontend development
Is frontend development hard to learn?
The basics — writing HTML, styling with CSS, adding a bit of JavaScript — are picked up fairly quickly. What takes longer is building the intuition for layout, state, and framework patterns, which mostly comes from building real projects rather than reading alone.
Do I need to learn a framework, or is vanilla JavaScript enough?
Vanilla JavaScript is essential groundwork, but most frontend jobs expect a framework like React, Vue, or Angular, since that's how real production codebases are organized. Learn the fundamentals first — a framework is much easier to reason about once you understand the DOM and JavaScript underneath it.
React vs. Vue vs. Angular — which should I pick first?
React has the largest job market and ecosystem, making it a safe default. Vue is often considered gentler to pick up. Angular shows up more in larger enterprise codebases. The underlying concepts — components, state, props — transfer between all three, so the first choice matters less than actually building something with it.
Do I need a computer science degree to become a frontend developer?
No. Frontend is one of the more accessible entry points into tech, and a strong portfolio of real projects on GitHub usually carries more weight with employers than a specific degree, though fundamentals like the ones covered in this roadmap still matter.
How do I prepare for a frontend developer interview?
Be fluent with HTML/CSS layout (flexbox and grid), core JavaScript concepts like closures and async/await, and your framework of choice's component and state model. Be ready to build a small UI from scratch, explain how you'd optimize a slow page, and talk through accessibility and testing decisions.
Track complete
From how a URL becomes a rendered page to shipping a tested, type-safe app to production — that's the core of what employers expect from a frontend developer. Keep building real projects, and let testing and performance work pull you toward more senior frontend or full-stack roles.
Related Roadmaps
Where frontend skills lead next
Backend Roadmap
APIs and services your frontend calls, to round out full-stack skills.
Full-Stack Roadmap
Combine this roadmap with backend and database skills to own features end to end.
React Roadmap
Go deeper on the framework introduced in step 5.
TypeScript Roadmap
Focus in on the static typing introduced in step 9.
UI/UX Designer Roadmap
Go deeper on the design side of the interfaces you're building.
DevOps Roadmap
Extend the deployment concepts from step 10 into full CI/CD pipelines.
Where next?
Keep exploring by domain or drill into a single skill