Frontend Fundamentals Questions

Demonstrate foundational knowledge of frontend web technologies and constraints relevant to product and design decisions. Topics include layout systems such as flexbox and grid, responsive breakpoints and mobile considerations, browser compatibility and rendering implications, animation and performance trade offs, accessibility markup and semantics, and effective communication and handoff with frontend engineers. The goal is pragmatic awareness of what is technically feasible, common pitfalls, and how frontend constraints influence design choices.

EasyTechnical

52 practiced

Explain the difference between block, inline, and inline-block elements in HTML/CSS. Give two practical examples where choosing one over the other affects layout and why that matters for a product designer.

MediumTechnical

70 practiced

During handoff, how would you document responsive behavior and edge cases for a complex component (e.g., an adaptive card with image, title, actions)? List the key artifacts and details developers need.

MediumTechnical

42 practiced

What is the CSS box-sizing property and why might you prefer box-sizing: border-box in a design system? Provide an example where content-box causes layout surprises.

HardSystem Design

51 practiced

Design a responsive navigation component for small-screen devices that supports 1) progressive enhancement for JavaScript-disabled environments, 2) keyboard accessibility, and 3) good performance on low-end devices. Describe the HTML/CSS/JS approach and trade-offs.

HardTechnical

52 practiced

Provide a plan to measure and optimize Time to Interactive (TTI) for a marketing landing page with heavy hero imagery and third-party analytics. Focus on design-driven changes a designer should prioritize.

Unlock Full Question Bank

Get access to hundreds of Frontend Fundamentals interview questions and detailed answers.

Join thousands of developers preparing for their dream job.