CSS Cards — Practice Activities
Rebuild each card using HTML and CSS.
Start at Card 1 and move forward.
Quick image tip:
If you don’t have an image yet, you can use:
https://picsum.photos/200
This gives you a random placeholder image while you work.
Card 1 — Info Card (Hello CSS)
Prerequisites: div, padding, border-radius
Colors:
Body background: #0f1117
Card background: #1e1e21
Text: rgb(255,255,255)
Muted text: #9a9a9a
Hello CSS
This is my first card.
Card 2 — Profile Card
Prerequisites: text-align, img, border-radius:50%
Colors:
Body: #0f1117
Card: #1e1e21
Text: #ffffff
Download image
Coder
Level 1 Student
Card 3 — Button Card
Prerequisites: button, :hover, cursor
Colors:
Card: #1e1e21
Button: #3b3a3d
Hover: #4a4950
Card 4 — Pricing Card
Prerequisites: span, margin:auto
Colors:
Body: #eef2ff
Card: #ffffff
Border: #dddddd
Free Plan
$0 per month
Card 5 — Feature Card (⚡ Fast)
Prerequisites: box-shadow
Colors:
Background: #ffffff
Text: #003366
Shadow: rgba(0,0,0,0.2)
⚡ Fast
Loads instantly everywhere
Card 6 — Users Stats
Prerequisites: text-align, large font sizes
Colors:
Card: #0f766e
Text: #ffffff
Card 7 — Notification / Warning
Prerequisites: border-left
Colors:
Background: #fff3cd
Text: #664d03
Border-left: #ffcc00
⚠ Warning
Your session will expire soon
Card 8 — CTA Join Now
Prerequisites: linear-gradient
Gradient:
linear-gradient(135deg,#6366f1,#9333ea)
Join Now
Start learning real web skills
Card 9 — Kids Coding Club (Robot)
Prerequisites: padding, margin:auto, border, box-shadow
Colors:
Body: #3b2a6f
Card: #ffd84d
Border: #ffb300
Download image
Kids Coding Club
Fun and interactive coding lessons for kids.
Card 10 — Space Mission (Advanced)
Prerequisites: box-shadow, multiple inner divs
Colors:
Body: #21325a
Card border: #4bb9c9
Button: #f28a2e
Download image
Space Mission
Blast off on an exciting
adventure through space!
If you can recreate these cards cleanly,
you are building real-world frontend skills.