Interview Questions for a Frontend Developer

Explain the difference between flexbox and grid, and when you'd reach for each.

What to look for: Flexbox for one-dimensional flow, grid for two-dimensional layout; can articulate real cases rather than reciting that 'grid is newer.'

What causes layout shift, and how do you keep Cumulative Layout Shift near zero?

What to look for: Reserving space with width and height or aspect-ratio for images and embeds, avoiding inserting content above existing content, and font-loading strategy.

How does the browser event loop handle a click handler, a fetch, and a setTimeout?

What to look for: Distinguishes the call stack, microtasks (promises), and the task queue; explains why promise callbacks run before timers.

How do you make a custom dropdown or modal accessible?

What to look for: Keyboard navigation, focus trapping and return, correct ARIA roles, aria-modal, and Escape to close; knows native elements first.

What is the difference between controlled and uncontrolled components, and when do you use each?

What to look for: Controlled state lives in the framework for predictability; uncontrolled defers to the DOM for simple or performance-sensitive inputs.

How would you diagnose and fix a sluggish list that re-renders too often?

What to look for: Profiles renders, identifies unnecessary re-renders, applies memoization, stable keys, and virtualization for long lists rather than guessing.

What's the largest lever for improving Largest Contentful Paint on a content page?

What to look for: Optimizing the hero image and critical CSS, preloading key resources, reducing render-blocking JS, and right-sizing fonts.

How do you ship a responsive image so mobile users don't download a desktop-sized asset?

What to look for: srcset and sizes, modern formats like WebP or AVIF, explicit dimensions, and lazy-loading below the fold.

Tell me about a time you pushed back on a design that would hurt accessibility or performance.

What to look for: Advocates for users, communicates trade-offs to designers, and finds a solution that satisfies both intent and constraints.

Describe a UI bug that only reproduced on a specific device or browser. How did you handle it?

What to look for: Cross-browser testing discipline, isolating the difference, and using progressive enhancement rather than user-agent hacks.

How do you stay current with a frontend ecosystem that changes constantly?

What to look for: Focuses on fundamentals over chasing every library, evaluates tools critically, and avoids resume-driven development.

Tell me about a time you collaborated closely with a designer to ship a polished UI.

What to look for: Respect for design intent, ability to flag technical constraints early, and pride in pixel-level and interaction craft.

A page passes Lighthouse on your laptop but feels slow for real users on mobile. What do you check?

What to look for: Field data versus lab data, network throttling, device CPU, third-party scripts, and bundle size on real connections.

Marketing wants a third-party widget that drags performance down. How do you handle it?

What to look for: Loads it on interaction or lazily, isolates it, measures the cost, and negotiates with stakeholders using data.

You need to support a design system across multiple teams. How do you prevent style drift?

What to look for: Tokens, shared components, documentation, and visual regression testing rather than copy-pasted CSS.

A complex form has grown buggy and hard to maintain. How do you decide whether to refactor or rebuild it?

What to look for: Weighs state-management choices, isolates the messy parts behind tests, and avoids a risky full rewrite when incremental works.