HTML Mini Project: Build A Simple Personal Homepage

It’s time to bring everything together! In this mini project, we will build a simple personal homepage using the concepts learned so far: headings, paragraphs, links, images, lists, forms, semantic elements, and more.

Table of Contents

Project Layout

Your homepage should include:

Header – Name and navigation links
About Section – A short intro about yourself
Contact Form – Simple form with name, email, and message fields
Footer – Copyright info

Example Code

<!DOCTYPE html>
<html>
<head>
  <title>My Personal Homepage</title>
</head>
<body>

  <header>
    <h1>Welcome to My Homepage</h1>
    <nav>
      <a href="#about">About</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>Hello! My name is Alex, and I am learning HTML. This is my first personal homepage.</p>
    </section>

    <section id="contact">
      <h2>Contact Me</h2>
      <form>
        <label for="name">Name:</label>
        <input type="text" id="name"><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email"><br><br>

        <label for="message">Message:</label>
        <textarea id="message"></textarea><br><br>

        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer>
    <p>© 2025 My Homepage</p>
  </footer>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>My Personal Homepage</title>
</head>
<body>

  <header>
    <h1>Welcome to My Homepage</h1>
    <nav>
      <a href="#about">About</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>Hello! My name is Alex, and I am learning HTML. This is my first personal homepage.</p>
    </section>

    <section id="contact">
      <h2>Contact Me</h2>
      <form>
        <label for="name">Name:</label>
        <input type="text" id="name"><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email"><br><br>

        <label for="message">Message:</label>
        <textarea id="message"></textarea><br><br>

        <button type="submit">Send</button>
      </form>
    </section>
  </main>

  <footer>
    <p>© 2025 My Homepage</p>
  </footer>

</body>
</html>

Practice Challenge

Customize the homepage with your own details.
Add a profile image with alt text.
Use a list to show your hobbies or skills.

✅ Congratulations! 🎉 You have completed the HTML Tutorial Series. You now have the basics of HTML, accessibility, and a mini project to showcase your learning.