Chapter 43: HTML & CSS Practice & Exams
HTML & CSS Practice & Exams
This is where 90% of beginners fail — not because they don’t understand concepts, but because they never seriously practice and never test themselves under pressure.
Theory is like watching cooking videos. Practice & exams are like actually cooking biryani 20 times until it tastes perfect — and then having your family judge it while you’re under time limit.
Let’s break it down very realistically — what real practice looks like, how to do it effectively, what kind of “exams” actually help you grow, and real examples you can start today.
1. Why Practice & Exams Are Non-Negotiable (Real Talk 2026)
- Watching tutorials / reading docs = input
- Writing code yourself = output (only output builds real skill)
- Most people stop at input → they “know” Flexbox but can’t center a div in 30 seconds during interview
- Exams / timed challenges force you to apply knowledge quickly → builds muscle memory
- Real jobs = deadlines + pressure + bugs + “make this responsive by tomorrow” → practice simulates that
Goal of practice: Turn knowledge into reflex so that when interviewer says “center this card vertically & horizontally on mobile” → your fingers already know what to type.
2. Levels of HTML & CSS Practice (Start from Level 1 – Don’t Skip)
Level 1 – Deliberate Repetition (First 2–4 weeks after theory)
Goal: Burn concepts into fingers Do small, focused, repeated exercises — 10–20 times each
Examples to repeat until perfect:
- Semantic structure boilerplate (10 times) Write full <!DOCTYPE html> → semantic page with header/nav/main/footer
- Flexbox centering (20 times) Different variations:
- Vertical + horizontal center
- Center only vertically
- Center only horizontally
- Multiple items centered with gap
- Grid card layout (15 times) 3–6 cards, auto-fit, minmax(280px, 1fr), responsive
- Media object (comment style) (10 times) Avatar left + name + time + text right
- Button states (15 times) Default / hover / focus / active / disabled / loading
Do these without looking at notes after 3–4 attempts.
Level 2 – Mini Projects (Daily for 1–2 months)
Build small but complete pages — 4–8 sections each
Real mini-project ideas (do 1 per day):
- Personal portfolio card (photo + name + bio + social links)
- Pricing table (3 plans – free / pro / enterprise)
- Testimonial carousel (3–5 quotes with photo)
- Contact form (name, email, message, submit)
- Feature section (3–4 icons + heading + description)
- Product card grid (e-commerce style – image + title + price + button)
- Blog post layout (article with image, headings, blockquote)
- Simple dashboard sidebar + content area
Rule:
- Mobile-first
- Use only HTML + CSS (no framework yet)
- Make it responsive (at least 2 breakpoints)
- Use custom properties for colors/spacing
- Add hover/focus states & transitions
- Run Lighthouse → aim 90+ Accessibility & Best Practices
Level 3 – Timed Challenges / Exams (Build Speed & Confidence)
This is where you prove you can really do it.
Daily 30–60 minute challenges (use these websites):
- Frontend Mentor (free & paid challenges) — excellent for real-world layouts
- CodePen Challenges (weekly themes)
- CSSBattle (recreate designs with least code)
- Daily UI (email yourself daily UI challenge)
- DevChallenges (free responsive + component challenges)
Exam-style practice (do once a week – timed):
- Set timer: 60–90 minutes
- Pick a real design from Frontend Mentor / Dribbble / Behance
- Build mobile + tablet + desktop version
- No copy-paste from previous work
- At end → run Lighthouse + test keyboard navigation
- Self-grade:
- Responsive? (0–10)
- Accessible? (alt text, focus, semantics)
- Clean code? (custom properties, no !important)
- Visual polish? (transitions, hover states)
4. Real Example – One Complete Practice Day (Copy-Paste & Do It Today)
Task: Build a responsive pricing card section in 60 minutes
Goal:
- 3 pricing cards
- Mobile → stacked
- Tablet+ → side-by-side
- Hover lift effect
- Use custom properties
- Semantic HTML
- Accessible (focus styles, alt text if images)
index.html
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pricing Cards Practice</title> <link rel="stylesheet" href="style.css"> </head> <body> <main class="container"> <h1>Choose Your Plan</h1> <p>Simple, transparent pricing for everyone</p> <div class="pricing-grid"> <div class="card"> <h2>Basic</h2> <p class="price">Free</p> <ul> <li>5 projects</li> <li>Basic support</li> <li>Community access</li> </ul> <a href="#" class="btn">Get Started</a> </div> <div class="card featured"> <h2>Pro</h2> <p class="price">₹ 999 / month</p> <ul> <li>Unlimited projects</li> <li>Priority support</li> <li>Advanced analytics</li> </ul> <a href="#" class="btn primary">Choose Pro</a> </div> <div class="card"> <h2>Enterprise</h2> <p class="price">Custom</p> <ul> <li>Everything in Pro</li> <li>Dedicated account manager</li> <li>Custom integrations</li> </ul> <a href="#" class="btn">Contact Sales</a> </div> </div> </main> </body> </html> |
style.css (mobile-first + responsive)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
/* Reset + tokens */ * { margin:0; padding:0; box-sizing:border-box; } :root { --primary: #3b82f6; --primary-dark: #2563eb; --text: #1e293b; --bg: #f8fafc; --card-bg: white; --radius: 12px; --shadow: 0 6px 20px rgba(0,0,0,0.08); } body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); padding: 40px 16px; min-height: 100vh; } .container { max-width: 1100px; margin: 0 auto; text-align: center; } h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: 1rem; } .pricing-grid { display: flex; flex-direction: column; gap: 2rem; margin-top: 3rem; } .card { background: var(--card-bg); border-radius: var(--radius); padding: 2.5rem 1.5rem; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); } .card h2 { margin-bottom: 1rem; font-size: 1.8rem; } .price { font-size: 2.5rem; font-weight: bold; color: var(--primary); margin-bottom: 1.5rem; } ul { list-style: none; margin-bottom: 2rem; } li { margin: 0.8rem 0; } .btn { display: block; padding: 1rem; background: var(--primary); color: white; border-radius: var(--radius); text-decoration: none; font-weight: 600; transition: background 0.25s ease; } .btn:hover { background: var(--primary-dark); } .featured { border: 2px solid var(--primary); background: #eff6ff; } /* Tablet+ */ @media (min-width: 640px) { .pricing-grid { flex-direction: row; flex-wrap: wrap; } .card { flex: 1 1 45%; } } /* Desktop+ */ @media (min-width: 1024px) { .pricing-grid { gap: 3rem; } .card { flex: 1 1 30%; max-width: 380px; } } |
Your task today:
- Build this in 60–90 minutes
- Time yourself
- No copy-paste from previous work
- After finishing → run Lighthouse → check Accessibility score
- Try dark mode by adding a .dark class later
Do this kind of practice daily for 30–60 days → you will be shocked how fast you become.
How does it feel when you finish a timed challenge and everything looks good on mobile too? That confidence is what gets you jobs and freelance clients.
Next possible lessons — tell me:
- “30-day HTML/CSS practice challenge calendar”
- “Best websites for daily frontend challenges”
- “How to grade your own practice work”
- “Common mistakes during timed practice”
- “From practice to portfolio — how to showcase your work”
You’re in the real growth zone now. Keep practicing — speed + quality will come. Chai second cup? Let’s keep coding! 🚀 😄
