HTML Challenges: 15 Practice Exercises for Beginners
Challenges are standalone HTML exercises for practice outside the lessons. There are 15: five easy, five medium and five hard. Some give you a short brief to build from, such as a navigation menu, a pizza order form or a club landing page. Others hand you broken code to fix, like a packing list with bad nesting or a login form with no labels. The automatic checker and the three hints work the same way as in the lessons, and you can run a finished page through the W3C Markup Validation Service (opens in a new tab) for a second opinion. Try one after you finish a module, or use a few to find out how much you already know.
Easy HTML challenges
Build a Contact Card
Mark up a bakery's contact details with address, mailto, tel and time.
easyBuild a Navigation Menu
Turn a row of links into an accessible site menu.
easyCaption the Pet Photos
Turn two loose photos and their captions into proper figures with alt text.
easyFix the Broken Packing List
Repair a packing list that breaks list nesting rules.
easyFix the Heading Order
Turn messy headings into a sensible outline.
Medium HTML challenges
Fix the Media Page
Make a video, a sound clip and an embedded page work for everyone.
mediumPizza Order Form
Build a pizza order form with radio buttons, checkboxes, a select and a textarea.
mediumRescue the Login Form
Fix a login form that keyboard and screen reader users cannot use.
mediumSemantic News Article
Turn a news story built from div soup into semantic HTML.
mediumWorkshop Timetable with Spans
Give a flat timetable a caption, real header cells and merged cells.
Hard HTML challenges
Accessible Pricing Table
Rebuild an old, flat price table as a properly structured plan comparison.
hardCamp Registration Form
Build a long form in sections, with grouped fields and browser validation.
hardClub Landing Page
Build a whole landing page, from the doctype down to the footer.
hardFAQ Accordion
Turn a long FAQ into a details and summary accordion that works without any JavaScript.
hardRestaurant Menu Page
Build a whole restaurant page: a full head, landmarks and a menu with real structure.
Frequently asked questions
How can I practice HTML?
Build small pages with a clear goal and get feedback on each one. That is what these challenges are: a concrete brief plus an automatic checker. For open-ended practice, rebuild a simple page you like in the playground, in plain HTML first, with CSS added afterwards. If you are unsure whether some markup is allowed, the HTML Living Standard (opens in a new tab) has the final word.
Which challenge should I start with?
An easy one, such as building a contact card or fixing the heading order. Medium challenges need one or two full modules behind you, forms or tables for example. Hard ones combine several topics into a complete page and suit learners who have finished most of the course. To train your eye for broken code, browse the mistakes collected on BadHTML (opens in a new tab), a satirical site about what not to do, and then try the packing list fix.
Do I need to finish the course before trying challenges?
No. The easy challenges need only the first few modules: text, links and images. Each challenge stands on its own, so you can try one whenever you like. If you get stuck, every hint is more specific than the last, and the related lessons will fill the gap.