All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4330 bites
Page 142
What problem does subgrid solve? Give a concrete example.
This tests whether you know nested grids create track contexts breaking cross-level alignment. A strong answer explains subgrid inherits parent tracks, using a card whose internals align to a global page grid.
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.
How can CSS aspect-ratio and modern layout properties prevent CLS?
Set width/height attributes, use CSS aspect-ratio for responsive scaling, and reserve container space with min-height.
What is the viewport meta tag and what does width=device-width, initial-scale=1.0 do?
This tests mobile viewport behavior and CSS pixels. The tag instructs browsers how to size the viewport; width=device-width sets width to screen CSS pixels; initial-scale=1.0 sets a 1:1 zoom ratio. A red flag is confusing viewport width with physical pixels.
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.
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.
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.
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.
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.
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.
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.
Implement fluid typography from 16px to 24px across 400px–1200px in one declaration?
This tests clamp() fluency for viewport-relative type scaling without media queries. A strong answer states clamp(16px, calc(16px + 8 * (100vw - 400px) / 800), 24px) and explains the slope math. A red flag is multiple media queries or calc() without clamp().
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.
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.
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.
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.
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.
How do you programmatically sync CSS animation progress to scroll?
This tests scroll-driven APIs beyond legacy scroll listeners. A strong answer names CSS animation-timeline and scroll-timeline declaratively, plus the Web Animations API with ScrollTimeline in JS. A red flag is using only requestAnimationFrame style mutations.
How should you adapt animations for prefers-reduced-motion?
Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible.
How do you structure and tokenize animation and transition values?
This tests semantic token architecture for motion. Structure duration and easing into tiered tokens: primitive values, semantic aliases like feedback or navigation, and component bindings. Avoid hardcoding values or using only raw milliseconds without meaning.