Is this roadmap free?

Completely. Every tutorial, quiz and roadmap topic is free and open source — no sign-up, no paywall, no account required.

Do I need to follow the roadmap in order?

Not necessarily. The roadmap is structured from beginner to advanced, but you can jump around based on your existing knowledge. If you already know HTML and CSS, skip straight to JavaScript or React.

Do I need to learn TypeScript?

It's optional to start but increasingly expected. Learn JavaScript first, then add TypeScript — it catches bugs early and powers most modern React, Next.js and Vue codebases.

Should I learn React or Vue first?

Either works — components, state and props transfer between them. React has the largest job market and ecosystem; Vue is often praised for a gentler learning curve. Pick one, go deep, and don't learn both at once.

How do I track my progress?

Open any topic card and click "Learning", "Done" or "Skip". Your progress is saved automatically to your browser — no account needed. Come back anytime and pick up where you left off.

Will my progress be lost if I clear my browser data?

Yes. Since progress is stored in your browser, clearing your browser data will reset it. You can also reset it yourself at any time with the "Reset progress" button above the roadmap.

How long does it take to complete the roadmap?

It depends on your pace. Most beginners complete the core sections (HTML, CSS, JavaScript, Git) in 2-3 months of consistent practice. The full roadmap including React and testing can take 6-12 months.

Can I learn web development without a degree?

Absolutely. Hiring is portfolio-driven. A degree helps with some large companies, but a strong portfolio and real projects matter more. This roadmap gives you the skills — your projects prove them.

What should I build to practice?

Build things you'd actually use: a personal site, a todo app, a weather dashboard, a clone of a site you like. Start small, then add auth, APIs and tests. Shipping beats collecting tutorials.

What if I get stuck on a topic?

Each topic links to our interactive tutorials where you can read, practice, and quiz yourself. If you're still stuck, join our community on GitHub to ask questions and get help from other learners.

Is this roadmap up to date?

Yes. It covers modern web development for 2026 — ES6+, React hooks, TypeScript, and current build tools like Vite. We update it as the ecosystem evolves.

~//roadmap/fullstack

Frontend Backend Fullstack

Fullstack Roadmap

The complete path — frontend, backend and everything in between. Mark topics as Learning,Done or Skipped — your progress stays in your browser.

Progress

Learning

Done

Skipped

Recommendation

Recommended

Most developers pick this — standard choice

Alternative

Solid alternative — widely used and recommended

Optional

Valid choice — works well but less common

Your progress

0 of 132 topics completed

0 done0 learning0%

Frontend

Client-side development — what users see and interact with.

F01

Internet & How it Works

The foundation every developer should understand before writing code.

How the Internet Works

Clients, servers, packets and the request/response cycle.

HTTP / HTTPS

Methods, status codes, headers, cookies and TLS.

DNS & Domains

How a domain name resolves to an IP address.

Browsers & Rendering

Parsing, the DOM, critical rendering path and reflows.

F02

HTML

The skeleton of every web page.

HTML Basics17 lessons

Elements, attributes, document structure and boilerplate.

$ start tutorial

Semantic HTML

Meaningful markup that helps SEO and screen readers.

$ start tutorial

Forms & Validation

Input types, constraints, labels and native validation.

$ start tutorial

Accessibility (a11y)

ARIA, keyboard navigation and inclusive interfaces.

SEO Basics

Meta tags, structured data and crawlability.

F03

CSS

Making the web beautiful — layout, color and motion.

CSS Basics15 lessons

Selectors, specificity, the cascade and inheritance.

$ start tutorial

Box Model & Layout

Margin, padding, borders and the box-sizing model.

$ start tutorial

Flexbox

One-dimensional layout for rows and columns.

$ start tutorial

CSS Grid

Two-dimensional layout with tracks and areas.

$ start tutorial

Responsive Design

Media queries, container queries and fluid sizing.

$ start tutorial

Animations & Transitions

Keyframes, easing and performant motion.

CSS Variables

Custom properties, theming and dynamic values.

F04

CSS Frameworks & Styling

Pick the styling approach that fits your project.

You don't need all of these — learn one utility framework well.

Tailwind CSS

Utility-first styling, at speed. The modern default.

Recommended — most developers pick this

CSS Modules

Locally scoped class names, built into most bundlers.

Great alternative — widely used

Sass / SCSS

Nesting, variables and mixins for large stylesheets.

Great alternative — widely used

Bootstrap

Component library with a ready-made design system.

Possible choice — valid but less common

styled-components

CSS-in-JS with component-scoped styles.

Possible choice — valid but less common

PostCSS

Transform CSS with plugins — Autoprefixer and more.

Possible choice — valid but less common

F05

JavaScript

The language of the web — logic, DOM and async.

JavaScript Basics12 lessons

Variables, functions, loops, scope and closures.

$ start tutorial

DOM Manipulation

Selecting, creating and updating elements.

$ start tutorial

ES6+ Features

Arrow functions, destructuring, spread and optional chaining.

$ start tutorial

Async JavaScript

Callbacks, promises and async/await.

$ start tutorial

Fetch API & AJAX

Making HTTP requests and handling responses.

$ start tutorial

Error Handling

try/catch, error objects and graceful failure.

F06

Git & Version Control

Track changes and collaborate without fear.

Git18 lessons

Commits, branches, merging and the object model.

$ start tutorial

GitHub

Remotes, issues, pull requests and open source workflow.

F07

TypeScript

JavaScript with types — scale without fear.

TypeScript14 lessons

Annotations, inference, interfaces, generics and narrowing.

$ start tutorial

Advanced Types

Utility types, conditional and mapped types.

$ start tutorial

F08

JavaScript Frameworks

Component-based UI libraries. Pick one to specialize in.

Choose one framework and go deep. Concepts transfer between all of them.

React8 lessons

Component model, JSX, hooks and the largest ecosystem.

$ start tutorial

Recommended — most developers pick this

Vue

Progressive framework with an approachable template syntax.

Great alternative — widely used

Angular

Batteries-included, TypeScript-first enterprise framework.

Great alternative — widely used

Svelte

Compiles away the framework — no virtual DOM at runtime.

Great alternative — widely used

SolidJS

Fine-grained reactivity with a React-like API.

Possible choice — valid but less common

Preact

3kB React alternative with the same modern API.

Possible choice — valid but less common

F09

State Management

Keeping data in sync across your components.

Each tool fits a different kind of state — pick what fits.

Context API

Built-in React state sharing without prop drilling.

Redux Toolkit

Predictable global state with devtools and middleware.

Zustand

Tiny, fast and unopinionated global state.

MobX

Reactive state via observables and computed values.

TanStack Query

Server-state caching, syncing and background refetching.

Pinia

The official Vue store — simple and type-safe.

F10

Meta-frameworks

Full-stack frameworks built on top of UI libraries.

Pair one meta-framework with the UI library you chose earlier — don't learn several.

Next.js

React framework with routing, SSR and server components.

Recommended — most developers pick this

Nuxt

The intuitive Vue framework with auto-imports.

Great alternative — widely used

SvelteKit

Svelte's official app framework with adapters.

Great alternative — widely used

Astro

Content-first, islands architecture, ships zero JS by default.

Great alternative — widely used

Remix

Web-standards-first React framework with nested routes.

Possible choice — valid but less common

F11

Testing

Ship with confidence — unit, integration and end-to-end.

Vitest

Blazing-fast unit testing powered by Vite.

Jest

The classic JavaScript test runner.

Testing Library

Test components the way users interact with them.

Playwright

Cross-browser end-to-end automation.

Cypress

Developer-friendly browser testing.

Storybook

Develop and document UI components in isolation.

F12

Build Tools & Tooling

The toolchain that compiles, bundles and ships your code.

Vite

Instant dev server and optimized production builds.

npm

The default package manager and registry.

pnpm

Fast, disk-efficient package manager for monorepos.

ESLint

Catch bugs and enforce code style automatically.

Prettier

Opinionated code formatting, zero debates.

Webpack

The battle-tested module bundler (good to know).

Turborepo

High-performance build system for monorepos.

F13

Next Steps

Level up beyond the basics and stand out.

Web Performance

Core Web Vitals, lazy loading and bundle budgets.

Web Security

XSS, CSRF, CORS and secure authentication.

PWA & Service Workers

Offline support, caching and installable apps.

GraphQL

Query exactly the data your UI needs.

Advanced Animation

GSAP timelines and scroll-driven storytelling.

Three.js / WebGL

3D graphics and immersive experiences on the web.

Docker & Deployment

Containers, CI/CD and shipping to production.

Backend

Server-side development — APIs, databases and infrastructure.

B01

Internet & Networking

How clients and servers communicate.

How the Internet Works

Clients, servers, packets and the request/response cycle.

HTTP Deep Dive

Methods, status codes, headers and content negotiation.

TCP/IP & Sockets

Transport layer fundamentals and persistent connections.

WebSockets

Real-time, bidirectional communication between client and server.

DNS & Load Balancing

Name resolution, round-robin and health checks.

B02

Node.js Fundamentals

JavaScript on the server — the event loop, streams and modules.

Node.js Basics

Runtime, event loop, modules and the global object.

Event Loop

Microtasks, macrotasks and non-blocking I/O.

Streams

Readable, writable, transform and pipeline.

File System

Reading, writing and watching files with fs/promises.

B03

API Design

Building clean, consistent interfaces for clients.

REST APIs

Resource naming, HTTP methods and status codes.

GraphQL

Schemas, resolvers, queries and mutations.

OpenAPI / Swagger

API-first design and auto-generated documentation.

API Versioning

URL, header and query-param versioning strategies.

Rate Limiting

Protecting APIs from abuse with throttling.

B04

Web Frameworks

Pick a framework to build your APIs faster.

Choose one framework and go deep. These are language ecosystems — pick the one that fits your stack.

Express

Minimal, flexible Node.js web framework.

Recommended — most developers pick this

Fastify

High-performance alternative with schema-based validation.

Recommended — most developers pick this

NestJS

Enterprise-grade, TypeScript-first framework with DI.

Great alternative — widely used

Hono

Ultrafast web framework for edge and serverless.

Possible choice — valid but less common

Koa

Express creators' modern rewrite with async/await.

Possible choice — valid but less common

Laravel

Elegant PHP framework with artisan CLI and ecosystem.

Recommended — most developers pick this

Symfony

Reusable PHP components and enterprise-grade framework.

Great alternative — widely used

Django

Batteries-included Python framework with ORM and admin.

Recommended — most developers pick this

Flask

Lightweight Python micro-framework — minimal and flexible.

Great alternative — widely used

FastAPI

Modern Python framework with auto-generated OpenAPI docs.

Recommended — most developers pick this

Rails

Convention-over-configuration Ruby framework.

Great alternative — widely used

Spring Boot

Java framework with dependency injection and auto-config.

Great alternative — widely used

B05

Databases

Learn SQL first, then pick the engine that fits the job.

Start with SQL, learn one relational database well, then understand NoSQL trade-offs.

SQL Fundamentals

SELECT, JOIN, indexes, transactions and normalization.

PostgreSQL

The most advanced open-source relational database.

MySQL

The world's most popular open-source DBMS.

MongoDB

Document database for flexible, JSON-like data.

Redis

In-memory store for caching, queues and sessions.

B06

ORMs & Query Builders

Type-safe database access from your application code.

Prisma

Next-gen ORM with type-safe queries and migrations.

Recommended — most developers pick this

Drizzle ORM

TypeScript ORM that feels like writing SQL.

Great alternative — widely used

TypeORM

ORM for TypeScript and JavaScript with Active Record.

Great alternative — widely used

Knex.js

Query builder for Node.js — raw when you need it.

Possible choice — valid but less common

B07

Authentication & Authorization

Keeping your APIs secure — who can do what.

Password Hashing & Credentials

Storing credentials safely with bcrypt, scrypt and Argon2.

JWT (JSON Web Tokens)

Stateless authentication with signed tokens.

OAuth 2.0

Third-party login and delegated access.

OpenID Connect

The identity layer on top of OAuth 2.0 for login and SSO.

Session Auth

Server-side sessions with cookies.

RBAC & Permissions

Role-based access control and policy engines.

API Key Management

Issuing, rotating and revoking API keys.

B08

Testing

Reliable backend code — unit, integration and contract tests.

Vitest

Fast unit testing for Node.js projects.

Jest

Full-featured test framework with built-in mocking.

Supertest

HTTP assertion library for API integration tests.

End-to-End Testing

Full-stack tests against a running server.

B09

Caching & Performance

Making your APIs fast and efficient.

Caching Strategies

In-memory, Redis and CDN caching patterns.

Pagination

Offset, cursor and keyset pagination.

Batch Processing

Bulk operations, queues and background jobs.

Connection Pooling

Managing database connections efficiently.

B10

Message Queues & Real-time

Asynchronous communication between services.

Redis Queues

Bull/BullMQ for job queues backed by Redis.

Recommended — most developers pick this

RabbitMQ

Message broker with routing, acknowledgements and retries.

Great alternative — widely used

Apache Kafka

Distributed event streaming for high-throughput data.

Great alternative — widely used

Socket.IO

Real-time bidirectional event-based communication.

Possible choice — valid but less common

B11

DevOps & Deployment

Ship your backend to production with confidence.

Docker

Containerize your app for consistent deployments.

CI/CD Pipelines

Automated testing and deployment with GitHub Actions.

Linux Basics

Filesystem, permissions, processes and shell scripting.

Nginx / Reverse Proxy

Routing, SSL termination and static file serving.

Cloud Platforms

AWS, GCP, Vercel, Railway and Fly.io.

B12

Architecture & Patterns

Designing scalable, maintainable backend systems.

Microservices

Splitting monoliths into independently deployable services.

Modular Monolith

Structured single deploy with clear module boundaries.

Event-Driven Architecture

Pub/sub, event sourcing and CQRS.

Clean Architecture

Ports & adapters, use cases and dependency inversion.

Progress saved to browser

$ echo "Keep going!"

Your progress is saved locally

All progress is stored in your browser's localStorage. No account needed. Come back anytime and pick up where you left off.

Start with HTML →Back to home

$ cat ~/faq

Frequently Asked Questions

Everything you need to know about the roadmap.