HTML Challenges
A build challenge combines several concepts around a useful goal. Start from the requirements, build a small working document, then review how it behaves for different readers.
How it works
- Work without copying a complete finished solution first. You learn more by deciding which elements express each relationship.
- Check off observable requirements: a useful title, logical headings, working links, labels, alternatives, and appropriate table structure.
- A challenge is complete when its required behaviour works, not when its colours resemble another site.
Practice checkpoints
1. Challenge A: build an accessible event timetable.
Include a caption, column headers with scope, row labels where appropriate, and a narrow-screen scrolling wrapper. Confirm that every data cell has understandable context.
2. Challenge B: build a workshop enquiry form.
Use labels, relevant types, names, a related fieldset where needed, and visible instructions. Explain that processing requires your own server endpoint; do not present an unimplemented form as functional.
3. Challenge C: repair a poorly structured page.
Replace decorative bold paragraphs with real headings, fix duplicate ids, replace vague link labels, add missing alternatives, and verify keyboard focus. Record why each change improves the page.
A practical example
<main>
<h1>Open workshop day</h1>
<section><h2>Sessions</h2><p>Choose a session below.</p></section>
<section><h2>Arrival</h2><p>Meet at the garden entrance.</p></section>
</main>
Use this as a small structural starting point. The challenge is to add the missing useful content and relationships rather than merely changing the wording.