BitWithBite
Full-Stack Worksheet
📱 Responsive Design
SCORE___ / 20
NameClassDate
After this worksheet you can
Name common breakpointsWrite mobile-first media queriesChoose fluid unitsDebug a broken responsive layout📚 Quick Recap
🎯 What you'll practice: Breakpoints, fluid units, and mobile-first media queries.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Mobile-first means writing:
2A common tablet breakpoint is around:
3Which unit is fluid rather than fixed?
4Mobile-first media queries typically use:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Mobile is generally defined as under px.
6The at-rule used for breakpoints is @.
7Write a mobile-first media query that switches a 1-column layout to 2 columns at 600px.
8Why is mobile-first considered better practice than desktop-first?
9Name two fluid CSS units besides percentage.
🚀 Section C · Challenge ● CHALLENGE 5
10Design the full breakpoint plan (mobile/tablet/desktop) for a 3-card row that should show 1, 2, then 3 columns. Write the CSS.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = 600 6 = media 7 = .cards{grid-template-columns:1fr;} @media(min-width:600px){.cards{grid-template-columns:1fr 1fr;}} 8 = Starting with mobile constraints forces you to prioritize essential content and performance, then progressively enhance for larger screens rather than cramming a desktop layout down 9 = rem and vw/vh (also em) | 10 = .cards{grid-template-columns:1fr;} @media(min-width:600px){.cards{grid-template-columns:1fr 1fr;}} @media(min-width:900px){.cards{grid-template-columns:1fr 1fr 1fr;}}