Web Fundamentals · Homework · HTML + CSS

Someone shipped div-soup. You're the inspector.

A local startup's site is built entirely out of <div>s, its boxes overflow in every direction, and nobody remembers what rem does. Clean up the markup, hit the exact box specs, prove you understand units — and climb from Div Rookie to Semantic Architect.

• Level 1 — Div Detective · interrogate 6 divs · up to 60 XP
• Level 2 — Pixel Architect · 4 box-model rounds · up to 60 XP
• Level 3 — Unit & Color Check · 6 rapid-fire questions · up to 40 XP

Progress saves in this browser automatically — close the tab anytime and resume later.

Level 1 · up to 60 XP

Div Detective

This “production” page renders fine — but its markup is a crime scene. Read the snippet, then interrogate each flagged <div> one at a time.

<!-- top banner of every page -->
<div class="header"> … site logo & tagline … </div>
<!-- links to the site's pages -->
<div class="nav"> … Home · Blog · Contact … </div>
<div class="main">
  <div class="news-section"> <!-- groups related posts -->
    <div class="news-item"> <!-- self-contained post --> … </div>
  </div>
</div>
<!-- related links, beside the content -->
<div class="sidebar"> … related links … </div>
<!-- photo with a text caption under it -->
<div class="photo"> <img …> <p>Our Tashkent campus</p> </div>
<!-- bottom bar of every page -->
<div class="footer"> … © 2026 … </div>

0 / 6 divs interrogated

Level 2 · up to 60 XP

Pixel Architect

Every diagram below is a live-rendered box — real width, padding, border, margin and box-sizing, accurate to the pixel. Check the numbers against your own mental math, then answer.

0 / 4 rounds built

Level 3 · up to 40 XP

Unit & Color Check

Rapid fire. Six short questions on sizing units and color formats — no diagrams, just judgment.

0 / 6 checks passed

Case closed

Final report

Per-level breakdown