BitWithBite
Full-Stack Worksheet
🚀 Project 2: Landing Page
SCORE___ / 20
NameClassDate
After this worksheet you can
Combine Flexbox and GridApply CSS variables project-widePlan 3-breakpoint responsivenessAdd hover animation📚 Quick Recap
🎯 What you'll practice: Planning and reviewing a full responsive landing page combining Lessons 7–12.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1The nav bar should be built with:
2The cards section is best built with:
3The colour palette should be defined using:
4Cards should go from 1 to 2 to 3 columns as the screen:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The CTA button needs at least one hover or transition.
6The project requires breakpoints (mobile, tablet, desktop).
7List the 4 required page sections in order.
8Why combine Flexbox for the nav and Grid for the cards, rather than using one for everything?
9Write the CSS variable declaration and its usage for a primary colour.
🚀 Section C · Challenge ● CHALLENGE 5
10Plan the full breakpoint behaviour: what changes at 600px and at 900px for both the nav and the cards grid?
💭 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-A 3-B 4-B | 5 = animation 6 = three 7 = nav, hero, cards/features, footer 8 = Flexbox excels at one-dimensional alignment (a single row of nav items); Grid excels at two-dimensional layouts (rows and columns of cards) — using each for its strength keeps the CSS simpler 9 = :root{--primary:#fb923c;} then background:var(--primary); | 10 = At 600px: cards go from 1 to 2 columns; at 900px: cards go from 2 to 3 columns — nav may switch from a stacked/hamburger mobile layout to a full horizontal Flexbox row at the tablet breakpoint.