--- title: "Frontend Developer Beginner to Expert" description: "A roadmap for learning frontend development, from HTML, CSS, and JavaScript fundamentals to modern frameworks, state management, performance, and accessibility." author: "Mohammad Abu Mattar" canonical: https://mkabumattar.com/roadmaps/post/frontend-developer-roadmap --- # 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 cover shipping apps that are fast, accessible and tested. Skim sections you already know, slow down on the ones you do not, and build something at every stage. ## Roadmap ### Stage 1: How the Web Works 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 Requests, responses, methods, status codes, and how TLS protects them in transit. - [MDN: HTTP overview](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview) #### DNS and Domains How human-readable names become IP addresses your browser can actually reach. #### How Browsers Render a Page The pipeline from HTML parsing to the DOM, CSSOM, render tree, layout, and paint. - [web.dev: Inside look at modern web browsers](https://web.dev/articles/howbrowserswork) #### Hosting and CDNs _(recommended)_ Where your code lives and how content delivery networks make it fast for users worldwide. ### Stage 2: HTML and Semantic Markup Learn the document structure and the semantic elements that give your content meaning for browsers and assistive tech. #### Document Structure Doctype, head, body, meta tags, character encoding, and the viewport meta for mobile. - [MDN: HTML basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) #### Semantic Elements header, nav, main, article, section, aside, footer, and figure communicate meaning, not just style. #### Forms and Inputs 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. ### Stage 3: CSS Fundamentals The building blocks of styling: selectors, the box model, the cascade, and the units you reach for daily. #### Selectors and Specificity Type, class, id, attribute, and pseudo selectors plus the specificity rules that decide who wins. - [MDN: CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors) #### The Box Model Content, padding, border, margin, and the difference between content-box and border-box sizing. #### Colors, Units, and Custom Properties 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. ### Stage 4: CSS Layout and Responsive Design Move beyond floats and absolute positioning to modern, fluid, mobile-first layout. #### Flexbox One-dimensional layout: alignment, distribution, wrapping, and order. - [CSS-Tricks: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) #### CSS Grid Two-dimensional layout: grid templates, areas, auto-fit and auto-fill, and where it beats flex. - [CSS-Tricks: A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) #### Media Queries 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. ### Stage 5: JavaScript Language Essentials The core language features you will use in every single component, hook, and utility for the rest of your career. #### Variables, Types, and Scope var, let, const, primitive vs reference types, block vs function scope, and hoisting. #### Functions and Closures Function declarations vs arrow functions, the this keyword, and how closures capture variables. #### Arrays and Objects Common methods (map, filter, reduce, find), spread/rest, and immutable update patterns. #### Control Flow and Iteration if/else, switch, for/for-of/for-in, while, and when each loop is the right tool. #### Modern ES6+ Features Destructuring, template literals, default parameters, optional chaining, nullish coalescing, and ES modules. - [MDN: JavaScript reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) ### Stage 6: The DOM and Browser APIs How JavaScript talks to the page and to the platform itself. #### DOM Selection and Manipulation querySelector, createElement, appendChild, classList, and modifying attributes safely. #### Events and Event Delegation addEventListener, bubbling vs capturing, and delegating to a common ancestor for dynamic elements. #### Fetch API and Promises Make HTTP requests with fetch, handle responses, errors, and AbortController for cancellation. #### async and await 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. ### Stage 7: Version Control with Git and GitHub Every job and every team uses Git. Get comfortable with the daily workflow and basic collaboration. #### Git Basics init, clone, status, add, commit, push, pull, and reading the log. - [Pro Git book (free)](https://git-scm.com/book/en/v2) #### Branching and Merging Create branches, switch between them, merge changes, and resolve simple conflicts. #### GitHub Workflow 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. ### Stage 8: Package Managers and Build Tooling Modern frontend code ships through a toolchain. Learn the parts so you can read and debug it. #### npm and package.json 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 The default modern dev server and bundler: instant HMR, native ESM in dev, Rollup for production. - [Vite official docs](https://vitejs.dev/guide/) #### 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. ### Stage 9: A Modern Framework (React) Pick one mainstream framework, ship real apps in it, and the others become easy to learn later. #### Components and JSX Functional components, JSX syntax, and how it compiles to plain JavaScript. - [React official docs](https://react.dev/learn) #### Props and Composition Pass data down with props, compose small components into bigger ones, and avoid deep prop drilling. #### Hooks: useState and useEffect Manage local state with useState; subscribe to external systems and run side effects with useEffect. #### Conditional Rendering and Lists 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. ### Stage 10: State Management Most state belongs in components. Learn when it does not, and pick the right store for the job. #### Local State vs Lifted State Start with useState in the component that owns the data; lift state up only when siblings need it. #### Context API 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. ### Stage 11: Routing and Data Fetching How your single-page app moves between views and talks to the backend. #### Client-Side Routing Map URLs to components with React Router, TanStack Router, or your framework router; handle nested routes. #### REST APIs 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](https://tanstack.com/query/latest/docs/framework/react/overview) #### Server vs Client Data _(recommended)_ Know the difference between data the server already has and ephemeral UI state. They want different tools. ### Stage 12: Styling Approaches Several ways to scale styles in a real app. Pick one per project and stay consistent. #### Vanilla CSS and CSS Modules 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](https://tailwindcss.com/docs/installation) #### 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. ### Stage 13: TypeScript for Frontend Static types catch a large class of bugs at compile time and make editor autocomplete far more useful. #### TypeScript Basics Primitives, arrays, objects, interfaces vs types, unions, and literal types. - [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/2/basic-types.html) #### Typing React Components and Props 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. ### Stage 14: Testing Tests are how you ship changes confidently. Spread them across the testing pyramid. #### Unit Tests with Vitest or Jest Test pure functions, hooks, and small modules in isolation. Fast and run in milliseconds. #### Component Tests with React Testing Library Render components and assert on what the user sees, not on implementation details. - [Testing Library guiding principles](https://testing-library.com/docs/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. ### Stage 15: Web Performance and Core Web Vitals A slow site loses users. Learn the metrics that matter and the levers that move them. #### Core Web Vitals: LCP, INP, CLS Largest Contentful Paint (load), Interaction to Next Paint (responsiveness), Cumulative Layout Shift (stability). - [web.dev: Learn Core Web Vitals](https://web.dev/articles/vitals) #### Code Splitting and Lazy Loading Ship less JavaScript up front with dynamic import, React.lazy, and route-based splitting. #### Image Optimization 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 Measure with Lighthouse in DevTools and the web-vitals library; track real-user metrics in production. ### Stage 16: Accessibility Accessibility is not optional. Most fixes are small, and the same patterns also help SEO and keyboard users. #### Semantic HTML and Landmarks The right element for the right job removes most accessibility bugs before you write any ARIA. - [WCAG 2.2 at a glance](https://www.w3.org/WAI/standards-guidelines/wcag/glance/) #### Keyboard Navigation and Focus Management 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) The first rule of ARIA is do not use ARIA when a native element will do the job. #### Color Contrast and Forms 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. ### Stage 17: Progressive Web Apps and Service Workers 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](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) #### Push Notifications _(optional)_ Re-engage users with the Push API and a service worker that handles notification events. #### Workbox _(optional)_ Google's library that wraps service worker caching strategies into a few lines of config. ### Stage 18: Deployment, CI, and Hosting Get your code from a feature branch in front of real users, automatically and safely. #### Static Hosting Vercel, Netlify, Cloudflare Pages, and GitHub Pages host SPA and SSG sites with a single git push. #### Continuous Integration with GitHub Actions Run lint, tests, and a production build on every PR; fail fast before code reaches main. - [GitHub Actions docs](https://docs.github.com/en/actions) #### 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.