theme switcher

Home About Me Experience Education Projects Skills Services

Content

Blog Cheatsheets Code Snippets DevTips Flashcards Glossary Quizzes Roadmaps Series Bookmarks

theme switcher

Contact Me

Home About Me Experience Education Projects Skills Services

Content

Blog Cheatsheets Code Snippets DevTips Flashcards Glossary Quizzes Roadmaps Series Bookmarks

Contact Me

Home › Roadmaps › All Categories › Web development

Roadmaps

Frontend Developer Beginner to Expert

Next in Web development JavaScript Beginner to Expert

Roadmap

Frontend Developer Beginner to Expert

A comprehensive roadmap to master frontend development from HTML, CSS, and JavaScript fundamentals to modern frameworks, state management, performance, and accessibility.

Published: 28 May, 2026

18 Stages

All Levels

Web development #frontend #html #css #javascript #react #typescript #accessibility #responsive-design

Facebook Twitter LinkedIn WhatsApp Telegram Reddit Hacker News Pinterest Email

Frontend Developer Beginner to Expert

This roadmap walks you from absolute beginner to a strong, hireable frontend engineer. Work through the stages in order: the early ones build the mental model and language fundamentals everything else depends on, and the later ones turn you into someone who ships fast, accessible, well-tested apps. Skim sections you already know, slow down on the ones you do not, and build something at every stage.

Frontend Developer Beginner to Expert

Contents

How the Web Works HTML and Semantic Markup CSS Fundamentals CSS Layout and Responsive Design JavaScript Language Essentials The DOM and Browser APIs Version Control with Git and GitHub Package Managers and Build Tooling A Modern Framework (React)State Management Routing and Data Fetching Styling Approaches TypeScript for Frontend Testing Web Performance and Core Web Vitals Accessibility Progressive Web Apps and Service Workers Deployment, CI, and Hosting

Legend Required Recommended Optional

0 / 81 complete

1 How the Web Works 2 HTML and Semantic Markup 3 CSS Fundamentals 4 CSS Layout and Responsive Design 5 JavaScript Language Essentials 6 The DOM and Browser APIs 7 Version Control with Git and GitHub 8 Package Managers and Build Tooling 9 A Modern Framework (React) 10 State Management 11 Routing and Data Fetching 12 Styling Approaches 13 TypeScript for Frontend 14 Testing 15 Web Performance and Core Web Vitals 16 Accessibility 17 Progressive Web Apps and Service Workers 18 Deployment, CI, and Hosting

01

1

How the Web Works

4 topics · 3 required · 1 recommended

Build a mental model of how a browser turns a URL into a rendered page before you write a single line of code.

HTTP and HTTPS

Required

Requests, responses, methods, status codes, and how TLS protects them in transit.

MDN: HTTP overview

DNS and Domains

Required

How human-readable names become IP addresses your browser can actually reach.

How Browsers Render a Page

Required

The pipeline from HTML parsing to the DOM, CSSOM, render tree, layout, and paint.

web.dev: Inside look at modern web browsers

Hosting and CDNs

Recommended

Where your code lives and how content delivery networks make it fast for users worldwide.

02

2

HTML and Semantic Markup

4 topics · 3 required · 1 recommended

Learn the document structure and the semantic elements that give your content meaning for browsers and assistive tech.

Document Structure

Required

Doctype, head, body, meta tags, character encoding, and the viewport meta for mobile.

MDN: HTML basics

Semantic Elements

Required

header, nav, main, article, section, aside, footer, and figure communicate meaning, not just style.

Forms and Inputs

Required

All the input types, labels, fieldsets, and built-in validation that the platform gives you for free.

Images, Media, and SVG

Recommended

img alt text, picture and srcset for responsive images, video and audio elements, and inline SVG.

03

3

CSS Fundamentals

4 topics · 3 required · 1 recommended

The building blocks of styling: selectors, the box model, the cascade, and the units you reach for daily.

Selectors and Specificity

Required

Type, class, id, attribute, and pseudo selectors plus the specificity rules that decide who wins.

MDN: CSS selectors

The Box Model

Required

Content, padding, border, margin, and the difference between content-box and border-box sizing.

Colors, Units, and Custom Properties

Required

Hex, rgb, hsl, oklch, rem/em/px/percentages, and CSS variables for theming.

The Cascade and Inheritance

Recommended

How the cascade resolves conflicts and which properties are inherited from parent to child.

04

4

CSS Layout and Responsive Design

5 topics · 3 required · 2 recommended

Move beyond floats and absolute positioning to modern, fluid, mobile-first layout.

Flexbox

Required

One-dimensional layout: alignment, distribution, wrapping, and order.

CSS-Tricks: A Complete Guide to Flexbox

CSS Grid

Required

Two-dimensional layout: grid templates, areas, auto-fit and auto-fill, and where it beats flex.

CSS-Tricks: A Complete Guide to Grid

Media Queries

Required

Adapt layouts to screen size, orientation, color scheme (dark mode), and reduced motion preferences.

Mobile-First Workflow

Recommended

Design and code for small screens first, then progressively enhance for larger viewports.

Container Queries

Recommended

Style components based on their container size rather than the viewport.

05

5

JavaScript Language Essentials

5 topics · 5 required

The core language features you will use in every single component, hook, and utility for the rest of your career.

Variables, Types, and Scope

Required

var, let, const, primitive vs reference types, block vs function scope, and hoisting.

Functions and Closures

Required

Function declarations vs arrow functions, the this keyword, and how closures capture variables.

Arrays and Objects

Required

Common methods (map, filter, reduce, find), spread/rest, and immutable update patterns.

Control Flow and Iteration

Required

if/else, switch, for/for-of/for-in, while, and when each loop is the right tool.

Modern ES6+ Features

Required

Destructuring, template literals, default parameters, optional chaining, nullish coalescing, and ES modules.

MDN: JavaScript reference

06

6

The DOM and Browser APIs

5 topics · 4 required · 1 recommended

How JavaScript talks to the page and to the platform itself.

DOM Selection and Manipulation

Required

querySelector, createElement, appendChild, classList, and modifying attributes safely.

Events and Event Delegation

Required

addEventListener, bubbling vs capturing, and delegating to a common ancestor for dynamic elements.

Fetch API and Promises

Required

Make HTTP requests with fetch, handle responses, errors, and AbortController for cancellation.

async and await

Required

Write asynchronous code that reads top-to-bottom instead of nested .then chains.

Storage: localStorage, sessionStorage, Cookies

Recommended

When to use each, their size limits, expiry behavior, and security implications.

07

7

Version Control with Git and GitHub

4 topics · 3 required · 1 recommended

Every job and every team uses Git. Get comfortable with the daily workflow and basic collaboration.

Git Basics

Required

init, clone, status, add, commit, push, pull, and reading the log.

Pro Git book (free)

Branching and Merging

Required

Create branches, switch between them, merge changes, and resolve simple conflicts.

GitHub Workflow

Required

Fork, pull requests, code review, issues, and protected branches in a team setting.

Rebase vs Merge

Recommended

When to rewrite history with rebase, when to preserve it with merge, and what never to rebase.

08

8

Package Managers and Build Tooling

5 topics · 2 required · 3 recommended

Modern frontend code ships through a toolchain. Learn the parts so you can read and debug it.

npm and package.json

Required

Installing dependencies, semver ranges, scripts, devDependencies vs dependencies, and lockfiles.

pnpm and yarn

Recommended

Faster alternatives to npm with disk-efficient stores and workspaces for monorepos.

Vite

Required

The default modern dev server and bundler: instant HMR, native ESM in dev, Rollup for production.

Vite official docs

Bundlers Conceptually

Recommended

What webpack, Rollup, esbuild, and Turbopack actually do and why bundling exists.

Linting and Formatting

Recommended

ESLint catches bugs, Prettier kills bikeshedding. Run both in pre-commit hooks and CI.

09

9

A Modern Framework (React)

5 topics · 4 required · 1 optional

Pick one mainstream framework, ship real apps in it, and the others become easy to learn later.

Components and JSX

Required

Functional components, JSX syntax, and how it compiles to plain JavaScript.

React official docs

Props and Composition

Required

Pass data down with props, compose small components into bigger ones, and avoid deep prop drilling.

Hooks: useState and useEffect

Required

Manage local state with useState; subscribe to external systems and run side effects with useEffect.

Conditional Rendering and Lists

Required

Render based on state, map over arrays with stable keys, and avoid common rendering bugs.

Comparing React, Vue, and Svelte

Optional

Know enough about each to pick the right one for a project or a job market.

10

State Management

4 topics · 2 required · 2 recommended

Most state belongs in components. Learn when it does not, and pick the right store for the job.

Local State vs Lifted State

Required

Start with useState in the component that owns the data; lift state up only when siblings need it.

Context API

Required

Pass values to deeply nested components without prop drilling, plus the re-render trade-offs.

External Stores: Zustand, Redux Toolkit, Jotai

Recommended

When the Context API stops scaling, reach for a small store. Know one well.

When You Do Not Need a Store

Recommended

Server state belongs in a data-fetching library; URL state belongs in the URL; not everything is global.

11

Routing and Data Fetching

5 topics · 2 required · 3 recommended

How your single-page app moves between views and talks to the backend.

Client-Side Routing

Required

Map URLs to components with React Router, TanStack Router, or your framework router; handle nested routes.

REST APIs

Required

Read, parse, and design against REST endpoints; understand status codes, methods, and pagination.

GraphQL

Recommended

Query exactly what you need from a single endpoint; learn enough to read schemas and write basic queries.

Data-Fetching Libraries

Recommended

TanStack Query and SWR handle caching, deduping, retries, and revalidation so you stop reinventing them.

TanStack Query official docs

Server vs Client Data

Recommended

Know the difference between data the server already has and ephemeral UI state. They want different tools.

12

Styling Approaches

4 topics · 1 required · 2 recommended · 1 optional

Several ways to scale styles in a real app. Pick one per project and stay consistent.

Vanilla CSS and CSS Modules

Required

Plain CSS works fine for small apps; CSS Modules add automatic class scoping with zero runtime.

Tailwind CSS

Recommended

A utility-first framework that ships small bundles and keeps styles co-located with markup.

Tailwind CSS official docs

CSS-in-JS

Optional

Styled Components, Emotion, and the runtime trade-offs. Increasingly being replaced by Tailwind or vanilla CSS.

Design Tokens and Theming

Recommended

Use CSS variables for colors, spacing, and typography so themes and dark mode are one switch away.

13

TypeScript for Frontend

4 topics · 2 required · 2 recommended

Static types catch a huge class of bugs at compile time and supercharge editor autocomplete.

TypeScript Basics

Required

Primitives, arrays, objects, interfaces vs types, unions, and literal types.

TypeScript Handbook

Typing React Components and Props

Required

Function components, props interfaces, children, event handlers, and refs typed correctly.

Generics and Utility Types

Recommended

Partial, Pick, Omit, Record, ReturnType, and writing your own generic helpers.

tsconfig and Strict Mode

Recommended

Turn on strict, noUncheckedIndexedAccess, and exactOptionalPropertyTypes early to avoid pain later.

14

Testing

4 topics · 2 required · 1 recommended · 1 optional

Tests are how you ship changes confidently. Spread them across the testing pyramid.

Unit Tests with Vitest or Jest

Required

Test pure functions, hooks, and small modules in isolation. Fast and run in milliseconds.

Component Tests with React Testing Library

Required

Render components and assert on what the user sees, not on implementation details.

Testing Library guiding principles

End-to-End with Playwright or Cypress

Recommended

Drive a real browser through real flows: sign in, add to cart, checkout. Slowest but highest signal.

Visual Regression Testing

Optional

Tools like Chromatic and Percy catch unintended UI changes by diffing screenshots.

15

Web Performance and Core Web Vitals

5 topics · 4 required · 1 recommended

A slow site loses users. Learn the metrics that matter and the levers that move them.

Core Web Vitals: LCP, INP, CLS

Required

Largest Contentful Paint (load), Interaction to Next Paint (responsiveness), Cumulative Layout Shift (stability).

web.dev: Learn Core Web Vitals

Code Splitting and Lazy Loading

Required

Ship less JavaScript up front with dynamic import, React.lazy, and route-based splitting.

Image Optimization

Required

Modern formats (AVIF, WebP), responsive srcset, width and height to prevent CLS, lazy loading.

Caching, HTTP/2, and HTTP/3

Recommended

Cache-Control headers, immutable assets, and how newer HTTP versions reduce round trips.

Lighthouse and Web Vitals Tools

Required

Measure with Lighthouse in DevTools and the web-vitals library; track real-user metrics in production.

16

Accessibility

5 topics · 4 required · 1 recommended

Accessibility is not optional. Most fixes are small, and the same patterns also help SEO and keyboard users.

Semantic HTML and Landmarks

Required

The right element for the right job removes most accessibility bugs before you write any ARIA.

WCAG 2.2 at a glance

Keyboard Navigation and Focus Management

Required

Every interaction must work without a mouse. Manage focus deliberately on route changes and in modals.

ARIA: When to Use It (and When Not To)

Required

The first rule of ARIA is do not use ARIA when a native element will do the job.

Color Contrast and Forms

Required

Hit WCAG AA contrast ratios, label every input, and pair errors with the field they describe.

Screen Reader Testing

Recommended

Try VoiceOver on macOS or NVDA on Windows. Five minutes a feature catches issues automated tools miss.

17

Progressive Web Apps and Service Workers

4 topics · 2 recommended · 2 optional

Make your app installable, fast on repeat visits, and usable offline.

Web App Manifest

Recommended

A small JSON file that lets users install your site to the home screen with an icon and start URL.

Service Workers: caching and offline

Recommended

A scriptable network proxy that runs even when the page is closed; powers offline support and push.

MDN: Service Worker API

Push Notifications

Optional

Re-engage users with the Push API and a service worker that handles notification events.

Workbox

Optional

Googles library that wraps service worker caching strategies into a few lines of config.

18

Deployment, CI, and Hosting

5 topics · 2 required · 3 recommended

Get your code from a feature branch in front of real users, automatically and safely.

Static Hosting

Required

Vercel, Netlify, Cloudflare Pages, and GitHub Pages host SPA and SSG sites with a single git push.

Continuous Integration with GitHub Actions

Required

Run lint, tests, and a production build on every PR; fail fast before code reaches main.

GitHub Actions docs

Preview Deployments

Recommended

A unique URL for every PR so reviewers click around the change in a real environment before merge.

Environment Variables and Secrets

Recommended

Keep API keys out of the bundle and out of git history; use platform-managed secrets per environment.

Monitoring and Error Tracking

Recommended

Sentry, Datadog, or Better Stack catch production errors and real-user performance issues.

Reset Progress?

This will clear all your checked topics in this roadmap. This action cannot be undone.

Comments

You might also enjoy

Check out some of our other posts on similar topics

JavaScript Beginner to Expert

Mohammad Abu Mattar
Web development

This roadmap guides you through the complete JavaScript journey from writing your first variable to architecting production-grade applications on the frontend and backend. Work through each stage sequ

#Javascript #Frontend #Nodejs +2 tags

Release Engineer Beginner to Expert

Mohammad Abu Mattar
Devops
Cloud
Release engineering

This roadmap takes you from release engineering principles and version control mastery through to advanced GitOps patterns and multi-account AWS delivery at scale. Each stage builds on the last treat

#Aws #Ci cd #Terraform +4 tags

Site Reliability Engineer Beginner to Expert

Mohammad Abu Mattar
Sre
Cloud
Devops

This roadmap takes you from the fundamentals of Linux and systems thinking through to advanced observability, chaos engineering, and SRE organisational culture. Each stage builds on the last master re

#Sre #Aws #Observability +3 tags

Solutions Architect Beginner to Expert

Mohammad Abu Mattar
Cloud
Architecture

This roadmap guides you from cloud fundamentals through to professional-level AWS solutions architecture. Each stage builds on the last master the foundations before tackling advanced networking, secu

#Aws #Solutions architect #Cloud +3 tags

DevOps Engineer Beginner to Expert

Mohammad Abu Mattar
Devops
Cloud

This roadmap guides you from Linux fundamentals through to advanced platform engineering and MLOps. Each stage builds on the last work through them sequentially to develop a deep, well-rounded DevOps

#Devops #Linux #Docker +4 tags