TaskBuild a product card. <article> containing: <img src='/keyboard.jpg' alt='Mechanical keyboard with backlit keys' width='400' height='300' loading='lazy'>, <h3>Mechanical Keyboard</h3>, <p>$129</p>, then <dl> with three dt/dd pairs: Type/Tactile, Layout/Full-size, Backlit/Yes.
Module capstone: accessible data card
200 XP12 min
Theory
Putting A4 together
A "data card" β a small standalone unit that lists product details. Real sites build hundreds of these (product cards, customer cards, lesson cards). Building one correctly tests every concept from this module.
The data card we're building
ββββββββββββββββββββββββββββββ β [product photo] β β Mechanical Keyboard β β $129 β β ββββββββββββββββββββββββββ β β Type: Tactile β β Layout: Full-size β β Backlit: Yes β ββββββββββββββββββββββββββββββ
Decompose:
- `<article>` wrapper (independently syndicatable)
- `<img>` with proper alt + width/height + loading="lazy"
- `<h3>` product name
- `<p>` price
- `<dl>` spec sheet (Type/Layout/Backlit as dt+dd pairs)
This combines A2 (<article>), A4 (<img>, <dl>), plus general HTML correctness.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.