BitWithBite
HTML & CSS Worksheet
🎨 Responsive Design
SCORE___ / 20
NameClassDate
After this worksheet you can
Viewport metaMedia queriesMobile-first approachFluid units🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Responsive pages need meta:
2Breakpoints are written with:
3Mobile-first means base styles for:
4A fluid width unit:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5@media (min-: 768px) { ... } targets bigger screens.
6rem sizes relative to the font size.
7Write the viewport meta tag.
8Stack columns under 700px.
9Why mobile-first?
🚀 Section C · Challenge ● CHALLENGE 5
10px vs rem?
💭 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-A 2-A 3-A 4-A | 5 width 6 root/html 7 = <meta name="viewport" content="width=device-width, initial-scale=1"> 8 = @media (max-width:700px){ .row { flex-direction:column; } } 9 = Most traffic is mobile; simpler base styles enhanced upward | 10 = px fixed; rem scales with user font settings (accessible)