Frontend Developer Roadmap

What HTML is, the anatomy of an element, and the document structure every HTML page starts from.

Semantic elements like header, nav, main and article versus div soup, and why it matters for accessibility and SEO.

Building forms with labels, input types, select and textarea, and built-in HTML5 validation attributes.

Content, padding, border and margin, box-sizing: border-box, display types, and the position property.

A deep dive into display: flex — main and cross axes, justify-content, align-items, and flex-grow/shrink/basis.

Two-dimensional layout with display: grid — template columns and rows, gap, grid-area, and a dashboard example.

Media queries, mobile-first design, rem/em/%/vw/vh units, clamp(), and responsive images with srcset.

What JavaScript is, where it runs (browser and Node.js), and how the language has evolved since ES2015.

Function declarations vs expressions vs arrow functions, closures, this binding, and prototypes.

Selecting and traversing elements, creating/modifying nodes programmatically, and event delegation.

The event loop, Promises, async/await, Promise.all, and common async pitfalls to avoid.

Named vs default exports, re-exporting, and code-splitting with dynamic import().

What Git is, installing it, the three areas, and making your first commit.

Why add types to JavaScript, installing TypeScript, tsconfig.json basics, and compiling with tsc.

The utility-first philosophy versus custom CSS, installing Tailwind with Vite/PostCSS, and a first component.

Custom properties, scoping and fallback values, and a complete light/dark theme-switching example.

JSX syntax rules, function components, props, and composing components together.

Managing component state with useState, the rules of hooks, and useRef for DOM access.

useEffect, dependency arrays, cleanup functions, and fetching data with loading and error states.

Client-side routing setup, dynamic segments, nested routes with Outlet, and programmatic navigation.

useContext and useReducer for shared state, and when to reach for Redux or Zustand instead.

Server Components fetching data directly, static/dynamic/ISR rendering modes, and when to use Client Components.

React Testing Library philosophy, querying by role, and complete component test examples.

ARIA roles and attributes, focus management, and a complete accessible modal dialog and dropdown menu example.

React.memo, useMemo, and useCallback with a concrete before/after re-render example, and when not to over-optimize.

Meta descriptions, Open Graph tags for social previews, canonical URLs, and structured data with JSON-LD.

Vercel vs self-hosting with next start or Docker, and environment variables per environment.

Common React interview questions covering the virtual DOM, hooks, context, performance, and testing.