← All roadmaps

Roadmap

Frontend developer

HTML, CSS and JavaScript done right, then React, TypeScript and the habits of people who ship.

5 to 7 months Beginner 6 steps, all free

Who it's for

Beginners who want to build for the web, and backend developers who want to be comfortable on the front.

Where it leads

  • Frontend developer
  • React developer
  • UI engineer
  • Full-stack developer

By the end you can

  • Build responsive, accessible pages from a design
  • Write JavaScript that you understand line by line
  • Build a React app with TypeScript and real data
  • Measure and fix a slow page
  1. 1

    HTML and CSS foundations

    Semantic markup and modern layout with flexbox and grid. Everything else sits on these.

    Do this: Rebuild the landing page of a site you like, by hand, and make it work on a phone.

    Quiz: CSS & Tailwind
  2. 2

    JavaScript in depth

    Scope, closures, async code and the DOM. Frameworks make sense only after this.

    Do this: Build a small app with plain JavaScript that fetches data from a public API and handles errors.

    Quiz: JavaScript fundamentals
  3. 3

    A complete curriculum to follow

    A structured path with projects keeps you building instead of collecting tutorials.

  4. 4

    React and TypeScript

    The stack most frontend jobs ask for. Learn React from its own docs, then add types.

    Do this: Build a React and TypeScript app with routing, a form, loading states and data from a real API.

    Quiz: React fundamentals Quiz: TypeScript essentials
  5. 5

    Accessibility and performance

    Fast, usable pages for everyone. This is what separates juniors from strong frontend engineers.

    Do this: Run Lighthouse on your app, fix the three worst problems, and write down what changed.

  6. 6

    Ship a portfolio

    Two or three finished, deployed projects with clean code beat ten half-done ones.

    Do this: Deploy your best two projects, write a short README for each and link them from your DevLearn profile.

    Quiz: Git in practice

Learning this with others is easier.

Ask questions when you're stuck, find people on the same path, and track your progress on DevLearn.

Join DevLearnAll quizzes