HTML Challenges
Challenges are bigger than exercises. Instead of filling in a blank, you build a small feature from scratch in the Tryit editor. There's no auto-checker — the goal is to use what you've learned end-to-end.
Starter challenges
| Challenge | Skills used |
|---|---|
| Build a personal landing page. | Headings, paragraphs, image, link. |
| Recreate a familiar product card. | Image, headings, list, button. |
| Make a 3-column responsive layout. | Semantic layout, CSS Flexbox, media query. |
| Lay out a restaurant menu. | Tables or definition lists, sections, semantic markup. |
| Build a contact form. | Form, label, input types, validation. |
| Embed a YouTube video with custom controls. | iframe, aspect-ratio CSS, JavaScript. |
How to approach a challenge
- Sketch the page on paper first — boxes, headings, where each piece goes.
- Write the HTML skeleton with semantic tags.
- Add content in one pass.
- Style in a separate
<style>block — don't get distracted by colours until the structure works. - Open the browser dev tools, find one thing to refine, fix it, repeat.
Tip: Don't aim for perfect. A finished, messy challenge teaches you more than a half-built polished one.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Challenges</title>
</head>
<body>
<h1>HTML Challenges</h1>
<p>This is a demo page for the "HTML Challenges" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
The daily challenge appears on which page?
/
Where you also see the global ranking.
Discussion
Loading…