CSS Examples & Practice
CSS Code Challenges
Challenges are bigger than exercises: you are given a set of requirements and asked to build a complete component. Try each one from a blank editor before checking the sample solution — there is usually more than one right answer. These seven challenges each produce something you could ship in a real project.
Challenge 1 — Pricing card
Requirements: a centered card with a plan name, a large price, a bulleted feature list and a full-width call-to-action button. Add a subtle shadow and a hover lift.
Example
<!DOCTYPE html>
<html>
<head><style>
body { display:grid; place-items:center; height:100vh; margin:0;
font-family:system-ui,sans-serif; background:#f1f5f9; }
.plan { width:260px; background:#fff; border-radius:16px; padding:28px;
text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:transform .2s; }
.plan:hover { transform:translateY(-6px); }
.plan h3 { margin:0; color:#0f766e; }
.price { font-size:40px; font-weight:800; margin:10px 0; }
.price span { font-size:15px; color:#64748b; font-weight:400; }
ul { list-style:none; padding:0; margin:0 0 20px; text-align:left; }
li { padding:6px 0; border-bottom:1px solid #f1f5f9; }
.cta { width:100%; padding:12px; border:none; border-radius:8px;
background:#0f766e; color:#fff; font-weight:600; cursor:pointer; }
</style></head>
<body>
<div class="plan">
<h3>Pro</h3>
<div class="price">₹499<span>/mo</span></div>
<ul><li>Unlimited projects</li><li>Priority support</li><li>Custom domain</li></ul>
<button class="cta">Choose Pro</button>
</div>
</body>
</html>Challenge 2 — Dual-ring loader
Requirements: a pure-CSS loading animation using @keyframes, with no images or JavaScript.
Example
<!DOCTYPE html>
<html>
<head><style>
body { display:grid; place-items:center; height:100vh; margin:0;
background:#0f172a; }
.loader { width:56px; height:56px; border-radius:50%;
border:6px solid transparent;
border-top-color:#38bdf8; border-bottom-color:#a855f7;
animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
</style></head>
<body><div class="loader"></div></body>
</html>Challenge 3 — Responsive navbar
Requirements: a brand on the left, links pushed to the right with margin-auto, hover states, and links that wrap on small screens.
Example
<!DOCTYPE html>
<html>
<head><style>
* { box-sizing:border-box; margin:0; }
body { font-family:system-ui,sans-serif; }
.nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
padding:14px 20px; background:#1e293b; }
.brand { font-weight:800; color:#fff; margin-right:auto; }
.nav a { color:#cbd5e1; text-decoration:none; padding:8px 12px;
border-radius:6px; }
.nav a:hover { background:#334155; color:#fff; }
</style></head>
<body>
<nav class="nav"><span class="brand">Acme</span>
<a href="#">Products</a><a href="#">Pricing</a>
<a href="#">Docs</a><a href="#">Login</a></nav>
</body>
</html>Challenge 4 — Pure-CSS tabs
Requirements: three tabs that switch panels using only radio inputs and the :checked selector — no JavaScript.
Example
<!DOCTYPE html>
<html>
<head><style>
body { font-family:system-ui,sans-serif; padding:24px; }
.tabs input { display:none; }
.tabs label { display:inline-block; padding:10px 16px; cursor:pointer;
border:1px solid #cbd5e1; border-bottom:none;
border-radius:8px 8px 0 0; }
.panel { display:none; padding:18px; border:1px solid #cbd5e1;
border-radius:0 8px 8px 8px; }
#t1:checked ~ #p1, #t2:checked ~ #p2, #t3:checked ~ #p3 { display:block; }
</style></head>
<body>
<div class="tabs">
<input type="radio" name="t" id="t1" checked><label for="t1">One</label>
<input type="radio" name="t" id="t2"><label for="t2">Two</label>
<input type="radio" name="t" id="t3"><label for="t3">Three</label>
<div class="panel" id="p1">First panel content.</div>
<div class="panel" id="p2">Second panel content.</div>
<div class="panel" id="p3">Third panel content.</div>
</div>
</body>
</html>Challenge 5 — Image gallery with hover zoom
Requirements: a responsive grid of colored tiles where each tile zooms slightly and reveals a caption on hover.
Example
<!DOCTYPE html>
<html>
<head><style>
body { margin:0; font-family:system-ui,sans-serif; background:#0f172a; }
.gallery { display:grid; gap:10px; padding:16px;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.tile { position:relative; height:120px; border-radius:10px;
overflow:hidden; }
.tile div { position:absolute; inset:0;
transition:transform .3s; }
.tile:hover div { transform:scale(1.12); }
.tile span { position:absolute; bottom:0; left:0; right:0; color:#fff;
padding:8px; background:rgba(0,0,0,.5); font-size:13px;
opacity:0; transition:opacity .3s; }
.tile:hover span { opacity:1; }
</style></head>
<body>
<div class="gallery">
<div class="tile"><div style="background:#06b6d4"></div><span>Ocean</span></div>
<div class="tile"><div style="background:#f59e0b"></div><span>Sunset</span></div>
<div class="tile"><div style="background:#22c55e"></div><span>Forest</span></div>
</div>
</body>
</html>Challenge 6 — Toggle switch
Requirements: an accessible on/off switch built from a checkbox styled with :checked, sliding a knob across a track.
Example
<!DOCTYPE html>
<html>
<head><style>
body { display:grid; place-items:center; height:100vh; margin:0; }
.switch { position:relative; width:56px; height:30px; display:inline-block; }
.switch input { display:none; }
.track { position:absolute; inset:0; background:#cbd5e1;
border-radius:999px; cursor:pointer; transition:.2s; }
.track::before { content:""; position:absolute; width:24px; height:24px;
left:3px; top:3px; background:#fff; border-radius:50%;
transition:.2s; }
input:checked + .track { background:#22c55e; }
input:checked + .track::before { transform:translateX(26px); }
</style></head>
<body>
<label class="switch"><input type="checkbox"><span class="track"></span></label>
</body>
</html>Challenge 7 — Hero section with overlay
Requirements: a full-width hero with a gradient background, a dark overlay, centered headline and a button.
Example
<!DOCTYPE html>
<html>
<head><style>
* { box-sizing:border-box; margin:0; }
.hero { position:relative; min-height:100vh; display:grid;
place-items:center; text-align:center; color:#fff;
font-family:system-ui,sans-serif;
background:linear-gradient(135deg,#6366f1,#ec4899); }
.hero::before { content:""; position:absolute; inset:0;
background:rgba(0,0,0,.35); }
.hero .content { position:relative; padding:24px; }
.hero h1 { font-size:clamp(30px,6vw,56px); }
.hero p { margin:12px 0 24px; opacity:.9; }
.hero a { background:#fff; color:#111827; padding:12px 26px;
border-radius:8px; text-decoration:none; font-weight:600; }
</style></head>
<body>
<section class="hero"><div class="content">
<h1>Launch something great</h1>
<p>A bold hero built entirely with CSS.</p>
<a href="#">Get started</a>
</div></section>
</body>
</html>💡
Once you can build these from scratch without the solution, you have the practical CSS skills employers look for. Add your best builds to a portfolio.