Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
Design System API Review
A design system API review treats component props as a public contract before code ships. It catches inconsistent naming, prop bloat, and breaking changes that fragment the product. Teams skip it because "it is just UI," creating unmaintainable interfaces.
Automated Deprecation Warnings in Design Systems
Deprecation warnings are a design system's immune system: they flag outdated components in an editor before bad code ships. They matter most when dozens of teams consume the system. The footgun is warning fatigue; silenced errors hide real breaking changes.
Quantify UI Debt Before It Compounds
UI debt quantification turns messy interfaces into measurable cost. Teams track component adoption, override rates, and design-dev drift to prioritize refactors. The footgun is treating every inconsistency as debt, ignoring the business value of shipping fast.
Pair Programming Drives Design System Adoption
Pair programming with the system team embeds design system knowledge directly into product code. Use it when a squad ships their first feature with new tokens or components. The footgun is treating the session as code review rather than knowledge transfer.
Federated Design System Team Model
Federated ownership spreads design system control across teams, not a silo. A lean core owns standards while contributors ship components from the field. The footgun is treating federation as zero governance, splintering the system into forks.
Semantic HTML: Structure as Accessibility Infrastructure
Semantic HTML assigns real roles to page elements so screen readers can navigate them. Use buttons for actions, headings for outline, and tables for data. The footgun is using divs with click handlers as buttons; they are invisible to keyboard and screen…
Design Token Documentation as Usage Contracts
A design token dictionary translates raw values into intent: it tells engineers when to use color-action-primary versus the raw hex across web, iOS, and Android. Without usage context, teams treat tokens as magic numbers and drift from the system.
Interactive Component Previews: Docs That Behave
Component previews are live playgrounds: tweak props in docs to see real behavior. Storybook and design system portals use them so developers test variants before adoption. Let preview code drift from production and your docs become lies.
Component Usage Guidelines as Guardrails
Usage guidelines are guardrails, not the component itself. They tell engineers when to pick primary versus secondary buttons, or when a modal becomes a page. Without them, teams reinvent one component for different contexts, fragmenting the system.
Page Templates: The Floor Plan for UI
Page templates are the floor plan, not the furniture: fixed zones where components slot in. Use them for recurring screens like dashboards so teams stop rebuilding skeletons. The footgun is treating them as giant components, forcing brittle overrides later.
Card Pattern: Self-Contained Content Objects
A card groups related info into a bounded, scannable object you can rearrange like playing cards. Use it for dashboards, product grids, or feeds where items need equal visual weight.
Storybook: Design System Documentation
Storybook is a workshop for building UI components in isolation, then auto-publishing docs from those living examples. Teams use it to catalog design systems without maintaining a separate documentation site.
Create a staggered list fade-in using only CSS
Tests CSS animation orchestration via keyframes and delay strategies. Great answers use :nth-child or --index variables for scalable staggering, set fill-mode forwards, and honor prefers-reduced-motion.
How do you trigger a CSS transition? Provide two methods.
Set transition on the element, then change a property via :hover or by toggling a class with JavaScript. That you know a transition needs a property change to fire, not just a declaration.
Using CSS Grid, how do repeat, auto-fit, and minmax create responsive columns?
Tests intrinsic sizing and responsive tracks without media queries. A strong answer gives repeat(auto-fit, minmax(250px, 1fr)), noting repeat generates tracks, auto-fit collapses empties, and minmax sets a floor with fractional growth.
What are CSS container queries and what problem do they solve?
This tests component-level responsive awareness. A strong answer states container queries style elements based on their container size, letting components adapt regardless of viewport. Red flag: believing media queries alone solve component context adaptation.
How would you use srcset and sizes for responsive image performance?
This tests responsive image selection in the browser. A strong answer covers srcset with w or x descriptors, sizes for layout width hints, and the browser picking before CSS loads. Red flag: suggesting JS detection or CSS backgrounds instead.
Build a responsive 3-column layout with Flexbox and Grid
Tests whether you pick right tool for responsive layouts. Good answers use flex-wrap and flex-basis for Flexbox, repeat() or grid-template-areas for Grid, in min-width 768px query. Red flag: desktop-first max-width queries or claiming Grid replaces Flexbox.
Make an image scale fluidly without exceeding its original size
Tests intrinsic sizing awareness. Good answer: max-width: 100% scales the image down with its container but never stretches it beyond intrinsic size; add height: auto to preserve aspect ratio. Red flag: width: 100% or omitting height, causing distortion.
Explain the mobile-first approach and how it differs from desktop-first
Mobile-first starts small, layers up with min-width; desktop-first starts large, overrides down with max-width. whether you tie progressive enhancement to min-width.
How do min-content, max-content, and fit-content work in CSS Grid?
It tests intrinsic track sizing. A strong answer defines min-content as the smallest no-overflow width, max-content as widest no-wrap width, and fit-content as clamped max-content; then shows labels hugging longest word.
Implement a fixed-width sidebar with Flexbox and CSS Grid
This tests Flexbox as one-dimensional versus Grid as 2-dimensional. A strong answer covers Flexbox with flex: 1 on main and flex: none on sidebar, and Grid with grid-template-columns: 250px 1fr. Red flag: claiming Grid is always superior or ignoring overflow.
Explicit vs implicit grid: how do you control implicit tracks?
Explicit tracks use grid-template; implicit tracks appear on overflow. Control via grid-auto-rows/columns and grid-auto-flow. Grid track generation beyond explicit bounds.
Create a responsive card grid without media queries
This tests CSS Grid intrinsic sizing. Answer: grid-template-columns with repeat(auto-fit, minmax(min, 1fr)), leveraging repeat, minmax, and auto-fit for fluid wrapping. Red flag: defaulting to Flexbox or media queries instead of intrinsic grid behavior.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.