Episode 1 — Fundamentals / 1.9 — CSS Responsive Design

1.9 — Exercise Questions: CSS Responsive Design

Practice questions for all seven subtopics in Section 1.9. Mix of short-answer, CSS writing, and DevTools drills. Try each without reopening the lesson files first.

How to use this material (instructions)

  1. Read lessons in order — README.md, then 1.9.a → 1.9.g in sequence.
  2. Answer closed-book first — write an answer (bullets or short code), then compare to the matching lesson.
  3. Hands-on DevTools — use Device Toolbar, Rendering panel, and Network throttling where indicated.
  4. Redo misses — retry the next day; mark weak subtopics.
  5. Interview prep — pair with 1.9-Interview-Questions.md.

1.9.a — Mobile-First Strategy (Q1–Q9)

Q1. What does "mobile-first" mean in CSS? Is it about targeting phones specifically?

Q2. Write two CSS rules: one using min-width (mobile-first) and one using max-width (desktop-first) that both make .sidebar visible only at 768px and wider.

Q3. Why does mobile-first CSS tend to produce smaller stylesheets for phone users?

Q4. What is the recommended minimum touch target size according to Google/Material Design guidelines?

Q5. A button has font-size: 14px and padding: 4px 8px. Is this button likely to meet touch target guidelines? What would you change?

Q6. List three performance benefits of the mobile-first approach.

Q7. Your teammate wrote all desktop styles first, then added max-width queries to "fix mobile." Name two problems with this approach.

Q8. What does "progressive enhancement" mean, and how does mobile-first CSS implement it?

Q9. Hands-on: Open any responsive website. Open DevTools → Device Toolbar. Toggle between a phone size (375px) and desktop (1440px). Identify which layout changes happen at which widths.

1.9.b — Media Queries (Q10–Q20)

Q10. Write the basic @media syntax from memory (type, feature, rules block).

Q11. What are the three reliable media types? Which deprecated types should you avoid?

Q12. Write a media query that hides .no-print and changes body font to 12pt when printing.

Q13. What is the difference between hover: hover and any-hover: hover?

Q14. Write a media query that disables all CSS animations and transitions for users who prefer reduced motion.

Q15. Write a media query that applies dark mode styles when the OS is set to dark mode.

Q16. Combine conditions: write a query that applies only on screens at least 768px wide and in landscape orientation.

Q17. Rewrite (min-width: 768px) and (max-width: 1023px) using Media Queries Level 4 range syntax.

Q18. What does not negate in a media query — the entire query or just the next condition?

Q19. Write a media query using pointer: coarse that increases button padding for touch devices.

Q20. Hands-on: Open DevTools → Rendering panel → find "Emulate CSS media feature prefers-color-scheme." Toggle between light and dark. Does the site respond?

1.9.c — Breakpoint Planning (Q21–Q29)

Q21. What is the difference between device-driven and content-driven breakpoints?

Q22. List the common breakpoint ranges (name + pixel range) for mobile, tablet, desktop, and wide.

Q23. Why is "set a breakpoint at 768px because that's the iPad width" a fragile strategy?

Q24. Explain the difference between major and minor breakpoints with an example of each.

Q25. Why can't CSS custom properties be used directly inside @media conditions?

Q26. Write a Sass mixin called from($breakpoint) that generates a min-width media query.

Q27. What problem do CSS Container Queries solve that viewport-based queries cannot?

Q28. Write a CSS grid that adapts from 1 to 3 columns without any media queries using auto-fit and minmax().

Q29. Hands-on: Open DevTools → Device Toolbar → set to "Responsive" mode. Slowly drag the viewport from 320px to 1440px. At what widths does the layout shift? Are those content-driven or device-driven breakpoints?

1.9.d — Responsive Images (Q30–Q39)

Q30. Name all five object-fit values and describe each in one sentence.

Q31. What does object-position: top center do when combined with object-fit: cover?

Q32. Write an <img> tag with srcset providing three widths (400w, 800w, 1200w) and sizes that uses 50vw on desktop (≥1024px) and 100vw otherwise.

Q33. When would you use <picture> instead of srcset?

Q34. Write a <picture> element that serves AVIF first, WebP second, and JPEG as fallback.

Q35. What does loading="lazy" do? When should you not use it?

Q36. What is the aspect-ratio CSS property, and how does it help prevent CLS?

Q37. Write CSS for a thumbnail that is full-width, 16:9 ratio, and uses cover fit.

Q38. List five steps from the image performance checklist.

Q39. Hands-on: Open DevTools → Network tab → filter by "Img." Reload a page. How many images loaded? How large are they? Are any images significantly wider than their display size?

1.9.e — Fluid Typography (Q40–Q48)

Q40. What two problems does font-size: 5vw (without clamp()) create?

Q41. Write the clamp() syntax and explain each of its three parameters.

Q42. A heading should scale from 1.5rem at 320px to 3rem at 1200px. Write the clamp() rule (you can approximate the preferred value).

Q43. Why should the min and max values in clamp() use rem instead of px?

Q44. What is a fluid type scale, and name one tool that generates one.

Q45. What is the recommended line length range for comfortable reading, and what CSS property enforces it?

Q46. Write clamp() rules for three sizes: --text-sm, --text-base, --text-lg.

Q47. How do you test that your fluid typography respects browser zoom at 200%?

Q48. Hands-on: Add font-size: clamp(1rem, 2vw + 0.5rem, 2rem) to a paragraph. Resize the browser slowly. At what viewport widths does the font stop growing/shrinking?

1.9.f — Spacing & Rhythm (Q49–Q55)

Q49. What is vertical rhythm, and why does it matter visually?

Q50. A design system uses a 4px base unit. List the first eight values in the spacing scale.

Q51. Write CSS custom properties for a spacing scale from --space-1 (4px) to --space-16 (64px).

Q52. Why is gap on a flex/grid container better than margin-bottom on children?

Q53. What is a magic number in CSS, and why should you avoid them?

Q54. Write a "stack" pattern using display: flex and gap that puts consistent vertical space between all children.

Q55. Write responsive section padding using clamp() that scales from 2rem on mobile to 6rem on desktop.

1.9.g — CSS Frameworks Overview (Q56–Q62)

Q56. Name the three categories of CSS frameworks and give one example of each.

Q57. What is the fundamental difference between how you build a button in Bootstrap vs Tailwind?

Q58. List three pros and three cons of using Bootstrap.

Q59. List three pros and three cons of using Tailwind CSS.

Q60. When would custom CSS be a better choice than any framework?

Q61. What does "purging" or "tree-shaking" do for a framework's production bundle size?

Q62. Hands-on: Visit the Bootstrap documentation and the Tailwind CSS documentation. Compare how each one documents a "card" component. Which provides pre-built HTML? Which provides utility classes for you to compose?

Answer Hints

Q#Key point to include
Q1Base CSS for smallest screen, queries add complexity upward
Q2min-width: 768px shows sidebar; max-width: 767px hides sidebar
Q3Base styles are minimal; complex rules inside queries phones never match
Q5Total box height likely ≈ 26px — needs min-height: 48px
Q10@media <type>? and (<feature>: <value>) { rules }
Q14prefers-reduced-motion: reduce → set animation-duration: 0.01ms
Q17(768px <= width < 1024px)
Q21Device = fixed widths (iPhone, iPad); Content = where layout breaks
Q28grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
Q30fill (stretch), contain (fit inside), cover (fill + crop), none (natural), scale-down (smaller of contain/none)
Q33Art direction — different crops/images at different breakpoints
Q36Reserves height from width + ratio before image loads
Q40No lower bound (tiny on small screens), ignores browser zoom
Q43rem respects user font-size preferences; px does not
Q4545–75 characters; max-width: 65ch
Q52No :last-child hack needed; gap only applies between items
Q53Hard-coded value with no clear origin (e.g., margin: 13px 27px)
Q57Bootstrap: class="btn btn-primary"; Tailwind: class="bg-blue-600 text-white py-2 px-4 rounded"
Q61Removes unused CSS classes from the final bundle, reducing file size dramatically