6 exercises — learn breakpoint, container query, layout, viewport, and responsive image vocabulary used in responsive and adaptive design.
0 / 6 completed
1 / 6
Match the term to its correct definition:
1. Mobile-first · 2. min-width · 3. max-width
Mobile-first vs. desktop-first — two opposite strategies for structuring responsive CSS, both still widely used:
• Mobile-first — base (unwrapped) styles target the smallest/simplest layout; @media (min-width: 768px) {"{ }"} queries progressively add complexity as the viewport grows. Encourages designing the essential experience first, then enhancing it • Desktop-first — base styles target the largest layout; @media (max-width: 768px) {"{ }"} queries simplify/override for smaller screens. Common in older codebases or complex data-dense desktop tools (dashboards, admin panels)
• Fluid layout — sizes flex continuously with the viewport using percentages, fr units, or clamp(), with no hard breakpoints • Fixed layout — a set pixel width regardless of viewport (rare today, mostly legacy email templates)
Most modern design systems default to mobile-first because it forces prioritisation: if a feature doesn't fit on the smallest screen, the team must decide what to cut or how to progressively disclose it, rather than cramming everything in and hoping it "adapts down" later.
2 / 6
What is a "container query" and how does it differ from a traditional media query?
Container queries (@container) — a CSS feature that lets a component respond to the size of its nearest sized ancestor (its "container"), rather than the whole viewport. This solves a real limitation of media queries: a component might be full-width on a wide viewport, but narrow when placed in a sidebar — with only media queries, it can't tell the difference; with container queries, it can adapt to its actual available space.
Container query vocabulary: • Container type — the CSS property (container-type: inline-size) that opts an element into being a query-able container • Inline size — the size along the text-flow direction (width, in horizontal-writing languages like English) • Block size — the size along the block direction (height, in horizontal-writing languages) • Container query units — cqw, cqh, cqi, cqb — sizing units relative to the container's dimensions, analogous to viewport units (vw, vh) but scoped to the container
When a designer says "this card should be container-aware, not viewport-aware," they mean: the card's internal layout (image position, text truncation) should change based on the width of the column it's dropped into, not the overall page width.
3 / 6
A designer describes a card grid as using "intrinsic sizing" instead of a fixed number of columns. What does this mean?
Intrinsic / content-based sizing — a layout approach where the number of columns (or the size of an element) emerges from a rule about minimum/maximum size, rather than being hard-coded per breakpoint.
Classic example — CSS Grid's repeat(auto-fit, minmax(240px, 1fr)): this tells the browser "give every card at least 240px, then fit as many equal-width columns as will fit in the row, and let them grow to fill leftover space." The result: 1 column on a narrow phone, 3 on a tablet, 6 on an ultra-wide monitor — with zero explicit breakpoints, purely a function of available space divided by minimum item width.
Contrast with the traditional breakpoint approach: "2 columns below 768px, 4 columns above 1024px" requires anticipating every screen size and hardcoding a rule for each. Intrinsic sizing is more resilient to devices the designer never explicitly considered (foldables, ultra-wide monitors, split-screen multitasking).
Related terms: Grid (two-dimensional layout, rows and columns), Flex (one-dimensional layout along a single axis), both of which support intrinsic sizing patterns via properties like flex-wrap, minmax(), and auto-fit/auto-fill.
4 / 6
A mobile design spec reads: "Respect the safe area on notched devices — do not place critical controls within 44px of the top or bottom edge." What is being described?
Safe area / notch vocabulary — terms for designing around physical device hardware that overlaps or obscures parts of the screen:
• Notch — the cutout at the top of many phone screens housing the camera and sensors (also called the "dynamic island" on newer iPhones) • Safe area — the region of the screen guaranteed not to be covered by hardware or system UI (notch, status bar, home indicator). In CSS, exposed via env(safe-area-inset-top), env(safe-area-inset-bottom), etc. • Home indicator — the thin bar at the bottom of gesture-based iPhones; placing a tappable element directly under it risks accidental system gesture triggers (going home) instead of the intended tap
Vocabulary for dynamic viewport units, useful for the same problem: dvh (dynamic viewport height) and dvw (dynamic viewport width) adjust automatically as mobile browser chrome (the address bar) appears or disappears — unlike the older, static vh/vw units, which can cause content to be hidden behind a browser toolbar that shows up mid-scroll.
Annotating "respect the safe area" tells developers to use safe-area-inset CSS variables rather than a hardcoded padding value, so the layout adapts correctly across the wide variety of notch/home-indicator shapes across devices.
5 / 6
Read this navigation spec: "The navigation collapses into a hamburger menu below the 768px breakpoint." What UI pattern is being described?
Hamburger menu pattern — one of the most common responsive navigation patterns: a horizontal nav bar (all links visible) transforms into a collapsed icon-triggered menu below a given breakpoint, because there is no longer enough horizontal space to show every link legibly.
Related responsive navigation vocabulary: • Hamburger icon — the ≡ (three horizontal lines) icon that triggers the collapsed menu • Drawer / off-canvas menu — the panel that slides in from the side when the hamburger is tapped • Priority+ pattern (or "priority navigation") — an adaptive pattern where the most important links stay visible and less-important ones collapse into a "More" overflow menu as space shrinks, rather than collapsing everything at once • Bottom navigation bar — a mobile-specific alternative pattern (common in native apps) that keeps the 3-5 most important destinations always visible at the bottom of the screen, instead of hiding them behind a hamburger
When writing this kind of spec, always state the exact breakpoint value and exactly what changes — "collapses below 768px" is precise; "collapses on mobile" leaves the exact threshold to interpretation, and different team members may implement different pixel values.
6 / 6
What do the `srcset` and `sizes` attributes on an `` tag communicate, and what design vocabulary term describes swapping a completely different crop/composition for different screen sizes (not just resolution)?
Responsive image vocabulary — precise terms for serving the right image to the right device:
• `srcset` — lists multiple versions of the same image at different resolutions/widths, letting the browser pick the most efficient one for the user's screen density and viewport (avoiding downloading a huge 4K image on a small phone screen) • `sizes` — tells the browser how much horizontal space the image will actually occupy at various breakpoints, so it can choose the right `srcset` candidate before it even knows the final rendered layout • Art direction — a distinct, more advanced technique using the `` element: serving a genuinely different image (different crop, composition, or even subject framing) at different breakpoints, e.g. a wide landscape hero photo on desktop that becomes a tightly-cropped portrait close-up on mobile, because the wide version would lose all detail at a small size • Lazy loading — deferring the load of off-screen images (`loading="lazy"`) until they're about to scroll into view, to improve initial page load performance
Design handoff notes should specify which technique is needed: "just serve a smaller file" (srcset/sizes) vs. "the composition genuinely needs to change" (art direction, ``) — these require different image exports and different developer implementation.
What will I practice in "Responsive Design Vocabulary — Product Design Exercises"?
This is a Product Design exercise set. It walks through 6 scenario-based multiple-choice questions built around real usage of product design terminology that IT professionals encounter on the job.
Is this exercise free to use?
Yes. Every exercise on CoderSlingo, including this one, is free to complete with no account, sign-up, or paywall.
How many questions are in this exercise?
This set contains 6 questions. Each one shows immediate feedback and a detailed explanation after you answer, so you learn the correct usage right away rather than waiting for a final score.
Do I need prior experience to complete this exercise?
No prior experience is required. Each question includes a full explanation covering the reasoning behind the correct answer, so the exercise itself teaches the product design vocabulary as you go.
Can I retry the exercise if I get questions wrong?
Yes — use the "Try again" button on the results screen to reset your answers and go through all the questions again. There is no limit on attempts.
Is my progress saved?
Your answers and score for the current session are tracked in the browser as you go. No account or login is needed, and there is nothing to install.
What if I don't understand a term used in a question?
Read the explanation shown after you answer each question — it breaks down the correct term in plain English with a real-world example. You can also check the site Glossary for quick definitions.
How is this different from reading a blog article on the topic?
Exercises like this one are interactive drills that test and reinforce specific vocabulary through multiple-choice questions, while blog articles explain concepts in prose. Practising here after reading builds active recall, not just passive recognition.
Where can I find more Product Design exercises?
See the Product Design exercises hub for the full set of related pages, or browse all exercise categories from the main Exercises index.
Can I use this exercise to prepare for a technical interview?
Yes — product design vocabulary comes up often in technical discussions and interviews. Pair this exercise with our dedicated Interview Preparation section for role-specific practice.