Intermediate everything in Frontend Dev, page 16
Lists and Keys in React
React turns arrays into UI with map, yet each child needs a unique key prop or you get console warnings. Filter first, then map. The footgun: forgetting keys or failing to include stable unique IDs in your source data.
CSS will-change: purpose, appropriate use, and overuse consequences
Tests whether you know will-change is a last-resort hint, not a default. Strong answers: hint imminent changes, toggle via script, and warn that overuse wastes memory. Red flag: leaving it in CSS permanently or applying it preemptively to many elements.
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.
Why is animating transform preferred over top or margin-left?
Grasp of the rendering pipeline and frame rate. A strong answer says transform skips layout and runs on the compositor, while top and margin-left force layout and drop frames.
Explain advantages of rem and em over px in responsive design
This tests cascading font scaling and accessibility. Strong answers mention user zoom, root-level rem control, component em scaling, and avoiding px fragmentation. Red flag: claiming px handles all user preferences automatically.
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.
Key differences between responsive and adaptive design, and when to choose adaptive
It tests layout strategy trade-offs beyond media queries. A strong answer contrasts responsive fluid grids with adaptive device-specific layouts. Red flag: claiming they are identical or that adaptive means more breakpoints.
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.
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.
Explain flex-grow, flex-shrink, flex-basis and their interaction
Tests deep understanding of flexbox sizing beyond keywords. A strong answer defines grow and shrink as ratios for distributing leftover or overflow space, basis as the starting size, and explains the two-step calculation.
How do CSS Custom Properties manage a design system color palette?
Define --color-primary on :root, use var() for buttons and headings, mention fallbacks.
What is font-display and how do swap and block differ?
This tests knowledge of the font display timeline. Swap shows fallback immediately then swaps in custom font, while block hides text for a short block period before fallback. A red flag is claiming swap prevents layout shift or that block is superior.
Create a vertical black gradient overlay on a background image
Use linear-gradient with rgba black stops, layer it over the image via stacked backgrounds or a pseudo-element.
Which CSS background properties make a hero image cover its container?
Tests background-size keywords and aspect-ratio behavior. Lead with cover, note it fills the container by cropping while preserving ratio, unlike contain. Red flag: recommending 100% 100% or explicit lengths, which stretch and distort the image.
How is CSS specificity calculated for a complex selector?
This tests ID-CLASS-TYPE algorithm fluency. A strong answer gives the three-column tally, counts IDs, classes or attributes, and types in order, and notes combinators add zero. A red flag is counting combinators or mixing inline styles into selector scores.
What is margin collapsing? Give a sibling scenario and prevention.
This tests understanding of vertical margin combination in normal flow. A strong answer defines collapsing, gives a sibling paragraph example where the larger margin wins, and names a block formatting context or padding as prevention.
Describe the full CSS cascade precedence order
This tests deep cascade knowledge beyond specificity. A strong answer lists the six origins in order, notes !important reverses them, then layers, specificity, and source order.
Design System Roadmap: Sequence Adoption Over Completeness
A design system roadmap sequences components by business impact, not visual completeness, to stop teams rebuilding the same UI. Use it when multiple squads duplicate buttons and forms. The footgun is a perfect Figma library engineers never adopt.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles