← All roadmaps

Frontend Developer

Step by step guide to becoming a modern frontend developer in @currentYear@

6%
7 done2 learning1 target
View interactive roadmap on roadmap.sh

Your learning path

Internet

How does the internet work?
What is HTTP?
What is Domain Name?
What is hosting?
DNS and how it works?
Browsers and how they work?

HTML

CSS

JavaScript

VCS Hosting

VCS Hosting

GitHub

Version Control

Git

Package Managers

GitLab

GitLab

yarn

yarn

pnpm

pnpm

npm

npm

Learn a Framework

Angular

Angular

Vue.js

Vue.js

React

React

Svelte

Svelte

Solid JS

Solid JS

CSS Frameworks

CSS Frameworks

Tailwind
Linters & Formatters

Linters & Formatters

Biome
Module Bundlers

Module Bundlers

Vite
Parcel

Parcel

Rollup

Rollup

esbuild

esbuild

Prettier

Prettier

ESLint

ESLint

Testing

Testing

Vitest
Jest

Jest

Playwright

Playwright

Cypress

Cypress

Auth Strategies

Auth Strategies

Web Security

Web Security

OWASP Risks
CORS

CORS

HTTPS

HTTPS

CSP

CSP

Web Components

Web Components

HTML Templates
Type Checkers

Type Checkers

Custom Elements

Custom Elements

Shadow DOM

Shadow DOM

SSR

SSR

Svelte

Svelte

Vue.js

Vue.js

Angular

Angular

React

React

react-router

react-router

Next.js

Next.js

Nuxt.js

Nuxt.js

Svelte Kit

Svelte Kit

GraphQL

GraphQL

Apollo
Relay Modern

Relay Modern

SSG

SSG

Astro
Vuepress

Vuepress

Nuxt.js

Nuxt.js

Eleventy

Eleventy

Next.js

Next.js

PWAs

PWAs

Mobile Apps

Mobile Apps

React Native
Flutter

Flutter

Ionic

Ionic

Desktop Apps

Desktop Apps

Electron
Tauri
Flutter
SWC

SWC

Astro

Astro

Bun

Bun

Rolldown

Rolldown

Tanstack Start

Tanstack Start

Deployment

Deployment

GitHub Pages

GitHub Pages

Vercel

Vercel

Cloudflare

Cloudflare

Netlify

Netlify

Railway

Railway

Render

Render

Performance

Performance

DevTools Usage
Lighthouse
Service Workers
Streamed Responses
Cache-Control
Design Systems

Design Systems

Web APIs

Web APIs

Accessibility

Accessibility

AI vs Traditional Coding

AI vs Traditional Coding

Code Reviews

Code Reviews

Docs Generation

Docs Generation

Learn the Basics

Learn the Basics

How LLMs work
AI Assisted Coding

AI Assisted Coding

Cursor
Antigravity
Claude Code
Copilot
Prompting Techniques

Prompting Techniques

Implementing AI

Implementing AI

Gemini
OpenAI
Anthropic
Refactoring

Refactoring

Applications

Applications

Agents

Agents

MCP

MCP

Skills

Skills