BeingXpert Learn & Build Future

24. HTML Practical Project

What you will build

A one-page personal profile with a header, navigation, an introduction with a photo, a list of skills, a hobbies table, a contact form, and a footer. It uses nearly everything from this course.

Before you start

  • Create a folder called profile-site.
  • Inside it, create a file called index.html.
  • Optional: put a photo called me.jpg in the same folder. Without it you will see the alt text, which is fine for practice.

Step 1: The page skeleton

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sam Rivera - Profile</title>
</head>
<body>

</body>
</html>

Step 2: Header and navigation

Put this inside <body>:

Add to body

<header>
  <h1>Sam Rivera</h1>
  <p>Student and future web developer</p>
  <nav aria-label="Page sections">
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#hobbies">Hobbies</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

Step 3: Main content

Add a <main> element after the header, containing four sections.

Add after the header

<main>

  <section id="about">
    <h2>About me</h2>
    <img src="me.jpg" alt="Portrait of Sam smiling" width="200" height="200">
    <p>Hello! I am learning <strong>HTML</strong> to build my own websites.</p>
  </section>

  <section id="skills">
    <h2>Skills</h2>
    <ul>
      <li>HTML basics</li>
      <li>Writing clear text</li>
      <li>Problem solving</li>
    </ul>
  </section>

  <section id="hobbies">
    <h2>Hobbies</h2>
    <table>
      <caption>My weekly hobbies</caption>
      <thead>
        <tr><th scope="col">Hobby</th><th scope="col">Hours per week</th></tr>
      </thead>
      <tbody>
        <tr><td>Reading</td><td>5</td></tr>
        <tr><td>Football</td><td>3</td></tr>
      </tbody>
    </table>
  </section>

  <section id="contact">
    <h2>Contact me</h2>
    <form action="#" method="post">
      <p>
        <label for="name">Name</label><br>
        <input type="text" id="name" name="name" required>
      </p>
      <p>
        <label for="email">Email</label><br>
        <input type="email" id="email" name="email" required>
      </p>
      <p>
        <label for="message">Message</label><br>
        <textarea id="message" name="message" rows="4" cols="30"></textarea>
      </p>
      <button type="submit">Send</button>
    </form>
  </section>

</main>

The form uses action="#", so it does not send data anywhere. A real contact form needs server-side code, which you will meet in the PHP course.

Step 4: Footer

Add after main

<footer>
  <p>&copy; 2026 Sam Rivera</p>
</footer>

Step 5: Test it

  1. Save with Ctrl+S.
  2. Double-click index.html to open it in your browser.
  3. Click each navigation link and check that it jumps to its section.
  4. Try submitting the empty form and confirm the browser asks you to fill in the required fields.
  5. Press Tab through the whole page and check you can reach every link and field.

Challenges

  • Change the name, text, skills, and hobbies to be about you.
  • Add a second table row and a third skill.
  • Add a link to a website you like, opening in a new tab safely.
  • Add a <figure> with a caption.
  • Validate the page with the W3C Markup Validation Service.

Common mistakes

  • Typing code in the wrong place, such as sections outside <main>.
  • Forgetting a closing tag. Use indentation to spot it.
  • A missing photo file, so only the alt text appears.
  • Duplicate id values.

Summary

  • You built a complete, semantic, accessible page.
  • It used headings, links, images, lists, tables, forms, and semantic elements.
  • Next, the CSS course shows you how to style it.
Scroll to Top