Coding Lesson

← All lessons

HTML: Structure

Build your HTML hobby page

Lesson 6 of 18 · About 20 minutes

Your goal: Combine the HTML skills without copying a complete answer.

Learn

header introduces the page, main holds its main content and footer contains closing information. Choose your own hobby and bring together the elements you have practised.

View starter code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style></style>
  </head>

  <body>
    <header>
      <h1>My hobby</h1>
    </header>
    <main>
      <!-- Add your sections here -->
    </main>
    <footer>
      <p>Made by a beginner</p>
    </footer>
  </body>
</html>

Your challenge

Build two sections with paragraphs, a list, and a descriptive link. Add an image if you have one. Download this version.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

Practise in the sandbox
Show a hint

Start with the sections. Add the list and link after the text makes sense.

Show a sample answer

Try the challenge first. This is one possible answer or a snippet to adapt.

<header>
  <h1>Gardening</h1>
</header>
<main>
  <h2>Why I enjoy it</h2>
  <p>I like growing food.</p>
  <h2>What you need</h2>
  <ul>
    <li>Seeds</li>
    <li>Soil</li>
  </ul>
  <a href="https://playcode123.com/">Learn web skills</a>
</main>
<footer>
  <p>My first HTML project</p>
</footer>

Check your work

Your page has a clear topic, two sections, a list, a working link and a footer.

Completion is your own check, not an automatic grade.