0Pricing
HTML for Kids · Lesson

HTML Treasure Hunt

Use HTML to solve clues and find hidden messages.

HTML Treasure Hunt is a free HTML for Kids lesson on CoddyKit — 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, one of 2 lessons in the course, and your progress syncs across the web and the CoddyKit app.

1

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!

HTML Treasure Hunt — illustration 1

2

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>

3

Step 2: Adding the Treasure Map

Did you add the treasure map? Here’s an example:

<img src="treasure-map.jpg" alt="Treasure Map" />

4

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>

5

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>

6

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>

7

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!

8

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>

9

10

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!

HTML Treasure Hunt — illustration 10

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, and the HTML for Kids course includes 2 lessons in total. 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.

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; this is — lesson 2 of 2, so you can start here or from the beginning and move at your own pace.

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

  1. Code-Along: Build a Simple Web Page
  2. HTML Treasure Hunt
← Back to HTML for Kids