Mini Project: Build a personal profile page with HTML

Web Design

Now that you’ve learned the basics of HTML, it’s time to put everything into practice. In this mini project, you will be building your very first complete webpage – a Personal Profile Page.

This page will introduce you, display your hobbies, goals, and even include a contact form. By the end of this task, you’ll have a working webpage that looks and feels professional.

What You Will Do

Set up the page structure

Use <!DOCTYPE html>, <html>, <head>, and <body>. Add a <title> with your name.
Create a Header Section

Your name should appear in a <h1>. Add a short tagline in a <p> (e.g., Web Designer | Student | Innovator).
Insert Your Profile Image

<img src="profile.jpg" alt="My Profile Picture" width="200">

Add your picture (or a placeholder image). Example:
Write an “About Me” Section

Add a short introduction in paragraphs. Use headings for subsections like Education, Hobbies, Skills.
Add Lists

Create an unordered list of your hobbies. Create an ordered list of your personal or career goals.
Create a Navigation Menu

Use <nav> for links like Home, About, Contact. Add at least one external link (e.g., LinkedIn or GitHub).
Build a Contact Form

Add input fields for Name, Email, and Message. Include a Submit button.
Finish with a Footer

Add copyright information. Example: © 2025 Olatech School of Programming.

Example Layout (Simplified)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>My Profile - Adewumi Samuel</title>

</head>

<body>

  <header>

    <h1>Adewumi Olawale Samuel</h1>

    <p>Teacher | Web Designer | Data Analyst</p>

  </header>
  <nav>

    <a href="#about">About Me</a> |

    <a href="#contact">Contact</a>

  </nav>
  <article id="about">

    <h2>About Me</h2>

    <p>I am passionate about teaching, web design, and raising men for global impact.</p>
    <h3>Hobbies</h3>

    <ul>

      <li>Reading</li>

      <li>Designing</li>

      <li>Music</li>

    </ul>
    <h3>Goals</h3>

    <ol>

      <li>Build impactful websites</li>

      <li>Train 1000 students</li>

      <li>Grow Olatech globally</li>

    </ol>

  </article>
  <section id="contact">

    <h2>Contact Me</h2>

    <form>

      <label>Name:</label>

      <input type="text"><br>

      <label>Email:</label>

      <input type="email"><br>

      <label>Message:</label>

      <textarea></textarea><br>

      <button type="submit">Send</button>

    </form>

  </section>

Assignment for You

Create your Personal Profile Page using all the topics we covered in Module One.

Save it as profile.html.

Upload it or share a screenshot for feedback.

Remember: Don’t just copy my example. Customize it to tell your own story! That’s how you’ll truly learn.