--- title: "Frontend Developer Beginner to Expert" description: "A comprehensive roadmap to master 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 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. ## 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 huge class of bugs at compile time and supercharge editor autocomplete. #### 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)_ Googles 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.