DevoraCamp Logo
DevoraCamp
All Roadmaps

Frontend Developer Roadmap

A step-by-step path from how the internet works to shipping production-grade web apps, 20 stages, community-informed, in the order you should learn them.

= Trending= Recommended
Filter by stack:
Your Progress0/100 · 0%
  1. 1

    Internet

    Before diving into frontend code, understand how the web actually delivers a page to a browser.

  2. 2

    HTML

    The structural backbone of every web page.

  3. 3

    CSS

    Style, layout, and make pages responsive across every screen size.

  4. 4

    JavaScript

    The language that brings interactivity to the browser.

  5. 5

    Version Control Systems

    Track changes to your code and collaborate with other developers.

  6. 6

    Repo Hosting Services

    Host your Git repositories and collaborate via pull requests.

    Pick only one to get started, GitHub is trending
  7. 7

    Package Managers

    Install, update, and manage third-party JavaScript packages.

    Pick one to start: npm is trending
  8. 8

    Pick a Framework

    Frameworks give you structure, reactivity, and a component model for building UIs.

    Pick one to start with
  9. 9

    Writing CSS at Scale

    Keep styles maintainable as your codebase and team grow.

    CSS Architecture: Pick one to start (BEM is trending)
    CSS Frameworks: Pick one to start (Tailwind CSS is trending)
    CSS Preprocessors: Pick one to start (SASS/SCSS is trending)
    CSS-in-JS
  10. 10

    Build Tools

    Bundle, transpile, and automate the workflow around your source code.

    Module Bundlers
    Linters & Formatters
    Task Runners
  11. 11

    Type Checkers

    Catch bugs before runtime with static type checking.

    Pick one
  12. 12

    Testing your Apps

    Confidence to ship: unit, integration, and end-to-end testing.

    Test Runners
    End-to-End & Component Testing
  13. 13

    Authentication Strategies

    How users prove who they are and stay signed in.

  14. 14

    Web Security Basics

    Protect users and your app from common attacks.

  15. 15

    Web Components

    Framework-agnostic, reusable custom elements built on browser standards.

    Libraries
  16. 16

    Server Side Rendering

    Render pages on the server for faster first paint and better SEO.

    Pick a meta-framework
  17. 17

    GraphQL

    A query language for APIs that lets clients ask for exactly the data they need.

    Clients
  18. 18

    Static Site Generators

    Pre-render content at build time for speed, simplicity, and low-cost hosting.

    Pick one
  19. 19

    Progressive Web Apps

    Make your web app installable, offline-capable, and app-like.

  20. 20

    Building & Deploying for Production

    Ship fast, reliable apps and measure what matters after launch.

Keep going!

You're 0% of the way through. Every checkbox you tick is saved automatically in your browser.

Browse Tutorials