All roadmaps

07 · Engineering

The Frontend Developer
roadmap.

Frontend developers build everything users see and interact with on the web. The stack is HTML, CSS, JavaScript, and a modern framework like React. It's one of the most in-demand engineering roles globally and a strong launchpad into full-stack work.

Level

Intermediate

Time

6–12 months

Steps

6

Why this path

Frontend development is the most accessible entry point into software engineering. The tools are free, the learning resources are abundant, and there's a clear path from beginner to employable — if you build things consistently.

The developers who get hired aren't necessarily the ones who know the most. They're the ones with deployed projects that demonstrate they can ship something that works. Code that lives only on your laptop doesn't count as experience.

01

Skills you'll need

HTML & Semantic MarkupCSSJavaScriptReactTypeScriptTailwind CSSGit & GitHubREST APIsWeb PerformanceBrowser DevTools
02

The roadmap

  1. 01

    Learn HTML and CSS deeply

    Don't rush past HTML and CSS. Learn semantic HTML — use headings, article, nav, main, and section correctly, not just divs everywhere. Master Flexbox and CSS Grid for layouts — build 10 different layouts from scratch. Learn responsive design with media queries. Build 5 static web pages that look good on mobile and desktop before writing a single line of JavaScript. The muscle memory from this phase pays off for years.

  2. 02

    Learn JavaScript properly

    JavaScript is the hardest and most important step. Learn variables, functions, arrays, objects, and the DOM first. Then tackle: closures, prototypes, the event loop, promises, and async/await. Fetch data from a public API and display it on a page. Build a todo list, a weather app, and a simple quiz — not for the portfolio yet, but to understand how the language actually works. Read 'Eloquent JavaScript' for free online.

  3. 03

    Learn React

    React is the dominant frontend framework. Learn functional components, JSX, props, state with useState, and side effects with useEffect. Build a multi-page app with React Router. Learn how to fetch and display API data. Understand when to lift state up and when to use context. Once you can build a CRUD app (create, read, update, delete) in React without looking anything up, you're ready to start applying.

  4. 04

    Add TypeScript and Tailwind

    Most modern React projects use both. TypeScript adds type safety that prevents entire classes of bugs — learn the basics: primitive types, interfaces, props typing, and return types. Tailwind CSS replaces most hand-written CSS with utility classes. Learn to use it with React components, understand responsive variants, and set up a custom design system. These two skills together make you significantly more hireable.

  5. 05

    Build a portfolio of 3–5 real projects

    Avoid tutorial projects — they all look the same. Build something you'd actually use. Good ideas: a personal finance tracker, a job application tracker, a recipe finder using a public API, a GitHub profile viewer, or a weather dashboard. Each project should be deployed (use Vercel — it's free and takes 2 minutes), have clean code on GitHub, and solve a real problem. A deployed project beats a local project every single time.

  6. 06

    Apply for junior roles

    Target roles titled 'Junior Frontend Developer', 'React Developer', 'UI Engineer', and 'Frontend Engineer'. Your resume should link to your GitHub and deployed portfolio. In technical interviews, expect to: walk through your projects, explain your technical decisions, live-code a small component, and answer questions about how React's rendering works. Apply to at least 10 companies per week — junior hiring is a volume game.

03

Tools of the trade

VS Code

Free

Industry-standard code editor — free, fast, excellent extensions

React + Vite

Free

The standard way to start a modern React project

Next.js

Free

React framework for production apps — adds routing, SSR, and performance

Tailwind CSS

Free

Utility-first CSS framework — used in most modern React projects

TypeScript

Free

Typed superset of JavaScript — increasingly required in job listings

Git + GitHub

Free

Version control and portfolio hosting — non-negotiable

Vercel

Free

Deploy frontend apps in seconds — free tier is generous

Figma

Free

Read and interpret design files — you'll work from Figma designs on the job

04

A day on the job

  • 01Building new UI components and pages from design mockups in Figma
  • 02Fetching and displaying data from REST or GraphQL APIs
  • 03Writing and running unit and integration tests for components
  • 04Reviewing pull requests from teammates and giving constructive feedback
  • 05Debugging layout issues across browsers and screen sizes
  • 06Optimising component performance and reducing bundle size
  • 07Attending daily standups, sprint planning, and design reviews
05

What it pays

Entry

$55,000–80,000 / yr

Mid-level

$80,000–120,000 / yr

Senior

$120,000–180,000+ / yr

USD, salaried

06

Where to find work

  • LinkedIn

    Best source for full-time frontend roles — filter by remote

  • Wellfound (AngelList)

    Startup roles — often more autonomy and faster growth

  • We Work Remotely

    Remote engineering roles at established companies

  • Toptal

    Premium freelance platform — requires vetting but pays top rates

  • Upwork

    Freelance React and frontend projects — good while job hunting

  • Direct applications

    Many companies hire directly — apply through careers pages

07

Mistakes to avoid

No. 01

Tutorial purgatory

Watching tutorials without building is the most common trap. After every tutorial, close it and rebuild the project from scratch without looking. If you can't — the knowledge didn't stick. Build something ugly and broken. Fix it. That's how you learn.

No. 02

Skipping CSS fundamentals

Developers who skip CSS and jump straight to frameworks struggle with layouts for years. Spend real time on Flexbox and Grid before using any CSS framework. Understand how the box model, positioning, and stacking contexts work. This foundation makes everything else easier.

No. 03

Only learning one framework

React is dominant but not universal. Understanding the underlying JavaScript and DOM makes you adaptable. When frameworks change (and they do), your fundamentals transfer. Employers also value people who understand why frameworks exist, not just how to use them.

No. 04

No deployed projects

Projects that only run on localhost don't exist to a recruiter. Deploy everything. Vercel makes it free and instant. A deployed project with a live URL is worth 10 GitHub repos with no deployments.

No. 05

Ignoring accessibility

Accessible code — proper semantic HTML, ARIA attributes, keyboard navigation, sufficient colour contrast — is required in many companies and expected by senior engineers. It's also easy to learn and demonstrates maturity beyond basic tutorial work.

08

Where to learn

  • The Odin Project — free full-stack curriculum, best free resource availableCourse
  • javascript.info — the best free JavaScript reference on the internetReading
  • React documentation (react.dev) — official, comprehensive, well-writtenReading
  • CSS Tricks — Flexbox and Grid visual guidesReading
  • Eloquent JavaScript — free book, builds deep JS understandingReading
  • Frontend Mentor — real design challenges to build and comparePractice
  • freeCodeCamp — structured curriculum with certificationsCourse
  • Vercel — deploy your projects for freeTool
09

Questions, answered

Do I need a computer science degree to become a frontend developer?
No. Frontend development is one of the most portfolio-driven fields in tech. Hiring managers look at your GitHub and your deployed projects — not your degree. Many successful frontend developers are self-taught. What matters is that you can build things that work.
Should I learn Vue or Angular instead of React?
Learn React first. It has the largest job market, the most tutorials, and the most active community. Vue is popular in certain markets (especially Asia and Europe). Angular is used heavily in enterprise. Once you know React well, picking up Vue or Angular takes weeks, not months.
How long does it take to get a job as a frontend developer?
With consistent daily practice (2–4 hours), most self-taught developers land their first job in 9–18 months. The range is wide because it depends heavily on the quality of your portfolio and how aggressively you apply. People who build real projects and apply daily consistently get there faster.
Do I need to learn backend to get a frontend job?
No. You need to understand how APIs work (how to fetch data from them) but you don't need to build them. Junior frontend roles focus purely on the UI layer. Adding backend knowledge later opens full-stack opportunities and higher salaries.
Is TypeScript required?
Increasingly, yes. Most modern React codebases use TypeScript, and many job listings list it as required. You don't need to master it before applying — basic types, interfaces, and props typing is enough. But plan to learn it within your first 3 months of the job search.

Estimated commitment

6–12 months

Consistent daily practice beats long, infrequent sessions. An hour a day is enough.

10

Where it leads

  • Full Stack Developer

    Natural next step

  • React Developer

    Natural next step

  • UI/UX Engineer

    Natural next step

11

Other roadmaps