Practice & Assessment
Test your understanding of Responsive Design
Multiple Choice Questions
5Which screen size does the md: prefix apply to?
What does hidden md:flex do to an element?
Which class combination creates a 16:9 image container that crops the image?
In mobile-first Tailwind, which is correct for a heading that should be large on desktop and smaller on mobile?
What does max-w-7xl mx-auto do on a content wrapper?
Coding Challenges
1Responsive feature section: 1 column mobile, 3 columns desktop
Build a features section with 6 cards. Mobile (default): single column. sm (640px+): 2 columns. lg (1024px+): 3 columns. Each card has an icon placeholder (40x40 square, gray bg), title, and 2-line description. Wrap in a max-width container centered on the page. Add responsive section padding (tight mobile, generous desktop). Expected: grid reflows correctly at breakpoints in DevTools. Time estimate: 20-25 minutes.
Mini Project
Responsive Blog Post Layout
Build a responsive blog post page adapting from single-column mobile to two-column desktop. Requirements: full-width hero image (aspect-video, object-cover) with title overlaid using absolute positioning; below hero, two-column layout on lg+ (article in max-w-2xl left column, sticky table of contents in right sidebar hidden below lg); article body uses responsive text-base lg:text-lg with leading-relaxed; code blocks use bg-gray-900 text-green-400 font-mono text-sm p-4 rounded; mobile collapses to single centered column. Use all responsive techniques: breakpoint prefixes, responsive display, responsive images, responsive spacing, containers.