HTML Treasure Hunt
Use HTML to solve clues and find hidden messages.
HTML Treasure Hunt is a free HTML for Kids lesson on CoddyKit. This is lesson 2 of 2. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, and your progress syncs across the web and the CoddyKit app. The HTML for Kids course includes 2 lessons in total.
Starting the Treasure Hunt
HTML Treasure Hunt
Welcome to the HTML Treasure Hunt! Your mission is to uncover the hidden treasure by solving clues hidden in the HTML code. Follow each step carefully and modify the code to progress.
Goal: Find the treasure by completing each task!
Setting Up the Treasure Map
Step 1: Setting Up the Treasure Map
The first clue is hidden in a comment. Open the HTML code and find the clue!
Here’s the starting HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Treasure Hunt</title>
</head>
<body>
<h1>Welcome to the Treasure Hunt!</h1>
<p>Follow the clues to find the treasure.</p>
<!-- Clue 1: Add an image to this page with a description of "Treasure Map". -->
</body>
</html>
Adding the Treasure Map
Step 2: Adding the Treasure Map
Did you add the treasure map? Here’s an example:
<img src="treasure-map.jpg" alt="Treasure Map" />Packing Your Tools
Step 3: Packing Your Tools
To continue, create a list of tools you would bring on a treasure hunt. Use the <ul> and <li> tags.
Example:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
Finding More Information
Step 4: Finding More Information
Add a link to a website about treasure hunting using the <a> tag.
Example:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
The Final Challenge
Step 5: The Final Challenge
The treasure is almost yours! To unlock it, create a button that reveals a hidden message when clicked.
Use the following example as a guide:
<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
Reveal the Treasure
</button>
Testing Your Page
Step 6: Testing Your Page
Now that you’ve added all the elements, test your page. Make sure:
- The image displays correctly.
- The list of tools is visible.
- The link opens the website in a new tab.
- The button reveals the treasure message.
If everything works, congratulations—you’ve completed the treasure hunt!
Final Treasure
Here’s how your final page might look:
<!DOCTYPE html>
<html>
<head>
<title>Treasure Hunt</title>
</head>
<body>
<h1>Welcome to the Treasure Hunt!</h1>
<p>Follow the clues to find the treasure.</p>
<!-- Step 1: Added the treasure map -->
<img src="treasure-map.jpg" alt="Treasure Map" />
<!-- Step 2: Listed tools for treasure hunting -->
<h2>My Treasure Hunting Tools</h2>
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
<!-- Step 3: Added a useful link -->
<h2>Learn More</h2>
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
<!-- Step 4: Added the hidden treasure -->
<h2>Your Treasure</h2>
<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
Reveal the Treasure
</button>
</body>
</html>
Treasure Hunt Recap
Great Job!
Congratulations! You’ve completed the HTML Treasure Hunt. You’ve practiced working with images, lists, links, and buttons—all essential elements of web development. Keep exploring and creating amazing projects!
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 16
- Lessons
- 35
Frequently Asked Questions
Is the “HTML Treasure Hunt” lesson free?
Yes — the full text of “HTML Treasure Hunt” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO. The HTML for Kids course includes 2 lessons in total.
What will I learn in “HTML Treasure Hunt”?
Use HTML to solve clues and find hidden messages. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML for Kids?
No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 2.
How long does the “HTML Treasure Hunt” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML for Kids lesson?
Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Code-Along: Build a Simple Web Page
- HTML Treasure Hunt