Frontend Developer Roadmap: HTML to React, Performance & System Design

Frontend engineering is often misread as "making things look nice". In practice, a frontend engineer at a product company owns what the user experiences: how fast the page becomes usable on a ₹10,000 Android phone over a patchy 4G connection, whether a screen reader user can complete checkout, whether the UI stays consistent when three API calls return in an unexpected order. That is real engineering, and frontend interviews at good companies test it.

This roadmap covers the frontend path in six stages, from the platform fundamentals to frontend system design, with code you should be able to write and the interview topics each stage unlocks. If you are new to web development in general, start with the broader web development roadmap, which covers backend basics as well.

What Frontend Engineers Actually Do

• Build features in a component framework, from design mockups to production.
• Manage client state and server data: caching, optimistic updates, error and loading states.
• Own performance: bundle size, rendering cost, images, Core Web Vitals.
• Ensure accessibility and internationalization (important in India's multilingual market).
• Maintain design systems and shared component libraries.
• Collaborate on API contracts with backend engineers.
• Debug issues that only happen on a particular browser, device or network.

Stage 1: The Web Platform (HTML and CSS)

Frameworks change every few years; the platform does not. Engineers with strong HTML and CSS are noticeably faster and produce fewer accessibility bugs.

HTML

• Semantic elements and document structure; landmarks (header, nav, main, footer).
• Forms: input types, labels, validation attributes, accessible error messages.
• When to use button vs a (actions vs navigation), and why a clickable div is a bug.
• Meta tags, responsive images (srcset, sizes), lazy loading.

CSS

• The cascade, specificity, inheritance, and the box model.
• Flexbox and Grid in depth, including minmax, auto-fit and alignment.
• Positioning, stacking contexts and why z-index: 9999 sometimes does nothing.
• Responsive design, container queries, custom properties (CSS variables), theming and dark mode.
• Transitions and animations that only animate transform and opacity for smoothness.
• One approach to scaling CSS: CSS Modules, a utility framework like Tailwind, or CSS-in-JS. Know the trade-offs.

Interview check: centre an element in five ways, explain specificity of #nav .item a, build a responsive card grid without media queries. See HTML and CSS interview questions.

Stage 2: JavaScript Depth

Frontend interviews in India lean very heavily on JavaScript fundamentals. Expect output-prediction questions, polyfill implementations and async puzzles.

function promiseAll(items) {
  return new Promise((resolve, reject) => {
    const results = new Array(items.length);
    let remaining = items.length;
    if (remaining === 0) return resolve(results);

    items.forEach((item, i) => {
      Promise.resolve(item)            // accept plain values as well as promises
        .then((value) => {
          results[i] = value;          // keep input order, not completion order
          remaining -= 1;
          if (remaining === 0) resolve(results);
        })
        .catch(reject);                // first rejection wins
    });
  });
}

Three details interviewers check in this question: results preserve input order even when promises settle out of order, an empty input resolves immediately, and non-promise values are handled through Promise.resolve. Then they often ask for Promise.allSettled as a follow-up.

TypeScript

Most new professional frontend codebases use TypeScript. Learn types and interfaces, unions and narrowing, generics, utility types (Partial, Pick, Record), and typing React props and hooks. See TypeScript interview questions.

Stage 3: React and State Management

React has the largest frontend job market in India. Angular remains common in enterprises and services companies, and Vue at some startups. Whichever you pick, go deep enough to explain how it works, not just how to use it.

React concepts to master

• Rendering model: what triggers a re-render, reconciliation, why keys matter in lists.
• Hooks in depth: useState batching, useEffect dependencies and cleanup, useRef for mutable values, useMemo/useCallback and when they actually help.
• Custom hooks for reusable logic.
• Controlled vs uncontrolled components, forms at scale.
• Context and its re-render cost; state libraries (Redux Toolkit, Zustand) and server-state libraries (TanStack Query, SWR).
• Error boundaries, Suspense, code splitting with React.lazy.
• Server rendering concepts via Next.js: SSR, SSG, ISR, hydration, React Server Components. See Next.js interview questions.

import { useEffect, useState } from 'react';

type Suggestion = { id: string; label: string };

export function useSuggestions(query: string, delayMs = 250) {
  const [data, setData] = useState<Suggestion[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (query.trim() === '') { setData([]); setLoading(false); return; }

    const controller = new AbortController();
    const timer = setTimeout(async () => {
      setLoading(true);
      setError(null);
      try {
        const res = await fetch(`/api/suggest?q=${encodeURIComponent(query)}`,
                                { signal: controller.signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        setData(await res.json());
      } catch (e) {
        if ((e as Error).name !== 'AbortError') setError((e as Error).message);
      } finally {
        if (!controller.signal.aborted) setLoading(false);
      }
    }, delayMs);

    // Runs when query changes or the component unmounts:
    // cancels the pending debounce AND any in-flight request.
    return () => { clearTimeout(timer); controller.abort(); };
  }, [query, delayMs]);

  return { data, loading, error };
}

This hook is a compact demonstration of several things frontend interviewers probe: debouncing inside an effect, cleanup functions, and the stale response race condition. Without the abort, typing "ra" then "raz" could show results for "ra" if that request happens to return last. Aborting the previous request on every query change guarantees only the latest query's response is applied.

Stage 4: Browser Internals and Performance

This is the stage that turns a framework user into a frontend engineer. In India, performance is not academic: a large share of users are on mid-range Android devices and variable mobile networks.

How the browser renders

• The critical rendering path, render-blocking CSS and parser-blocking scripts (defer vs async).
• Reflow (layout) vs repaint vs compositing; layout thrashing from interleaved reads and writes.
• The main thread: why long tasks (over 50 ms) make the page feel frozen.
• Caching: HTTP cache headers, service workers, CDNs.

Core Web Vitals

Interaction to Next Paint (INP) replaced First Input Delay as a Core Web Vital in March 2024. See Google's web.dev Core Web Vitals documentation for current definitions.

Learn to measure before optimizing: Lighthouse for lab data, the Chrome DevTools Performance panel for traces, and real-user monitoring for field data. An interviewer will be far more impressed by "LCP went from 4.1 s to 2.2 s on a throttled mid-range device after preloading the hero image and moving to SSG" than by a list of optimization techniques.

Stage 5: Accessibility, Testing and Security

Accessibility (a11y)

• Keyboard navigation and visible focus; focus management in modals and route changes.
• Semantic HTML first, ARIA only when needed (and correctly).
• Colour contrast, text alternatives, form labels and error announcements.
• Testing with a screen reader (NVDA on Windows, VoiceOver on Mac/iOS, TalkBack on Android) and automated checkers like axe.
• The WCAG guidelines at a working level.

Testing

• Unit and component tests with Vitest or Jest and Testing Library (test behaviour, not implementation).
• End-to-end tests with Playwright or Cypress for critical flows like login and checkout.
• Visual regression testing for design systems.

Frontend security

• XSS and why dangerouslySetInnerHTML and innerHTML with user input are dangerous; Content Security Policy.
• CSRF, cookie flags (HttpOnly, Secure, SameSite), where to store tokens and the trade-offs.
• CORS: what it protects and what it does not.

Internationalization

For Indian products, supporting Hindi and regional languages is common. Learn i18n libraries, locale-aware number and date formatting (Intl.NumberFormat('en-IN') formats 1234567 as 12,34,567), and layout that handles longer strings.

Stage 6: Frontend System Design

Frontend system design rounds ask you to design the client side of a product. Common prompts: news feed, autocomplete/typeahead, chat application, image carousel or gallery, e-commerce product listing with filters, Google Docs-style editor, video player, notifications panel, or a design system.

A structure that works in the round

1. Requirements. Functional (what the user does) and non-functional: devices, network conditions, offline support, accessibility, SEO, i18n, scale of data on screen.
2. Component architecture. Break the UI into components; identify which are reusable and which own state.
3. Data model and state. What lives in server cache, global client state, local component state, and the URL. Normalize entities when they appear in multiple places.
4. API interface. Endpoints or GraphQL queries the client needs, pagination style (cursor for feeds), real-time channel (WebSocket or SSE; see WebSockets vs SSE vs long polling).
5. Rendering strategy. CSR, SSR, SSG or a hybrid, and why.
6. Performance. Virtualized lists, image strategy, code splitting, prefetching, caching and optimistic updates.
7. Accessibility, security, i18n, observability. Error tracking and real-user monitoring.

Worked mini-example: an infinite news feed

Many backend-focused system design problems have a frontend counterpart. Reading the backend design for the same product, such as search autocomplete or news feed, helps you design a sensible API contract in the frontend round.

A Stage-by-Stage Timeline and Projects

At around 12 to 15 hours a week, this is a realistic plan. People who already program will move faster through the first two stages; nobody should rush Stage 2.

Run DSA practice alongside from Stage 3 onwards if you are targeting product companies. Our web development roadmap covers enough backend to build the APIs your frontend projects need, and the backend roadmap is useful later for full-stack or API-design conversations.

Frontend Interview Topics by Round

Processes differ by company; confirm with your recruiter. Typical rounds at Indian product companies:

What machine coding evaluators look for

• A working core flow first, then edge cases (empty states, errors, loading).
• Sensible component boundaries and state placement.
• Keyboard support and basic accessibility.
• Readable code: naming, small functions, no giant component.
• Being able to explain what you would add with more time.

Expectations by Level

Mistakes to Avoid on the Frontend Path

1. Learning React before JavaScript. Most confusing React bugs are JavaScript closure or reference-equality bugs in disguise.
2. Treating CSS as an afterthought. Weak CSS shows immediately in machine coding rounds.
3. Ignoring the network and device reality. Test on throttled networks and low-end devices, not only on a fast laptop.
4. Using useMemo and useCallback everywhere. Memoization has costs; profile first.
5. Skipping accessibility. It is increasingly asked in interviews and is part of doing the job properly.
6. Chasing every new framework. Concepts transfer; depth in one framework plus strong platform fundamentals beats shallow knowledge of five.
7. Neglecting DSA. Product company frontend loops usually include it.

Frequently Asked Questions

Pranjal Jain

Ex-Microsoft SDE · IIT Kanpur · Founder of Prepflix. Helps engineers crack startup and product company interviews across India.