LiveHeyGen ships HyperFrames Studio for Mac and Linux
IndieFounder
Sign in
All roadmaps
Development · Beginner → Advanced

Frontend Developer Roadmap

HTML → CSS → JavaScript → TypeScript → React → Next.js → production.

Your progress

0%

0/9 nodes · 120h estimated

Skills

0

Projects

0

Phases

3

1

Phase 1

Web foundations

Learn the platform before frameworks.

HTML & accessibility

Semantic HTML, forms, document structure and ARIA.

Subtopics

  • • HTML & accessibility fundamentals
  • • HTML & accessibility core concepts
  • • HTML & accessibility practical patterns
  • • HTML & accessibility production considerations

Practice

  • • Build a small exercise for HTML & accessibility
  • • Debug or test the implementation
  • • Explain the trade-offs in your own words

Checkpoint

You can explain the core concepts, implement them without a tutorial, and debug a small real-world example.

~8hOutcome: Build accessible pages.

CSS

Cascade, Flexbox, Grid, responsive design and typography.

Subtopics

  • • cascade, specificity & inheritance
  • • box model, positioning & stacking contexts
  • • Flexbox, Grid & responsive layouts
  • • animations, transitions & modern CSS

Practice

  • • Build a small exercise for CSS
  • • Debug or test the implementation
  • • Explain the trade-offs in your own words

Checkpoint

You can explain the core concepts, implement them without a tutorial, and debug a small real-world example.

~12hOutcome: Recreate responsive layouts.

Browser & HTTP

Requests, DNS, storage, rendering and DevTools.

Subtopics

  • • Browser & HTTP fundamentals
  • • Browser & HTTP core concepts
  • • Browser & HTTP practical patterns
  • • Browser & HTTP production considerations

Practice

  • • Build a small exercise for Browser & HTTP
  • • Debug or test the implementation
  • • Explain the trade-offs in your own words

Checkpoint

You can explain the core concepts, implement them without a tutorial, and debug a small real-world example.

~8hOutcome: Debug browser behavior.
2

Phase 2

JavaScript & TypeScript

Master application language fundamentals.

JavaScript

Functions, objects, modules, closures and async/await.

Subtopics

  • • types, scope, functions & objects
  • • DOM, events & browser APIs
  • • modules, promises & async/await
  • • closures, prototypes & error handling

Practice

  • • Build a small exercise for JavaScript
  • • Debug or test the implementation
  • • Explain the trade-offs in your own words

Checkpoint

You can explain the core concepts, implement them without a tutorial, and debug a small real-world example.

~18hOutcome: Write maintainable JavaScript.

TypeScript

Unions, generics, narrowing and utility types.

Subtopics

  • • type narrowing & unions
  • • interfaces, generics & utility types
  • • modules, declarations & inference
  • • strict mode & API contracts

Practice

  • • Build a small exercise for TypeScript
  • • Debug or test the implementation
  • • Explain the trade-offs in your own words

Checkpoint

You can explain the core concepts, implement them without a tutorial, and debug a small real-world example.

~12hOutcome: Make code safer.

Testing

Unit, component and end-to-end testing.

Subtopics

  • • Testing fundamentals
  • • Testing core concepts
  • • Testing practical patterns
  • • Testing production considerations

Practice

  • • Build a small exercise for Testing
  • • Debug or test the implementation
  • • Explain the trade-offs in your own words

Checkpoint

You can explain the core concepts, implement them without a tutorial, and debug a small real-world example.

~8hOutcome: Protect critical flows.
3

Phase 3

React & production

Build and ship complete interfaces.

React

Components, props, state, effects and composition.

Subtopics

  • • components, props & composition
  • • state, effects & event handling
  • • forms, hooks & custom hooks
  • • rendering, memoization & architecture

Practice

  • • Build a small exercise for React
  • • Debug or test the implementation
  • • Explain the trade-offs in your own words

Checkpoint

You can explain the core concepts, implement them without a tutorial, and debug a small real-world example.

~14hOutcome: Build reusable UIs.

Next.js

Routing, server components, data fetching and metadata.

Subtopics

  • • App Router, layouts & route handlers
  • • Server/client components & data fetching
  • • caching, revalidation & server actions
  • • metadata, SEO & deployment

Practice

  • • Build a small exercise for Next.js
  • • Debug or test the implementation
  • • Explain the trade-offs in your own words

Checkpoint

You can explain the core concepts, implement them without a tutorial, and debug a small real-world example.

~16hOutcome: Build production React apps.

Production app

Project

Build, test, document and deploy a complete application.

Subtopics

  • • Production app fundamentals
  • • Production app core concepts
  • • Production app practical patterns
  • • Production app production considerations

Practice

  • • Build a small exercise for Production app
  • • Debug or test the implementation
  • • Explain the trade-offs in your own words

Checkpoint

You can explain the core concepts, implement them without a tutorial, and debug a small real-world example.

~24hOutcome: Have a portfolio project.