Mini Project: Build a Simple Web Page

Chapter 16 • Intermediate

45 min

Now it is time to put everything together! We will build a simple "Digital Business Card" or Personal Profile page. This project uses lists, links, images, headings, and a small contact form.

Project Requirements

Header: Your name and a tagline.
About Me: A paragraph introducing yourself with a photo.
Skills: An unordered list of things you are learning.
Projects: An ordered list of projects you want to build.
Contact: A simple form to send you a message.
Footer: Copyright year.

Tips for Success

Use semantic tags (<header>, <main>, <footer>, <section>).
Don't worry about styles (CSS) yet; focus on structure.
Ensure your image has alt text.
Check that your links work.

Suggested image prompt

"Screenshot of the finished mini-project result: a clean, simple text-based profile page with a photo, bullet points, and a contact form."

Hands-on Examples

Solution: Personal Profile Page

<!DOCTYPE html>
<html>
<head>
  <title>My Personal Profile</title>
</head>
<body>
  <header>
    <h1>Alex Developer</h1>
    <p>Future Full Stack Engineer</p>
  </header>
  <hr>

  <main>
    <section>
      <h2>About Me</h2>
      <img src="profile.jpg" alt="Photo of Alex" width="150">
      <p>Hi! I am learning HTML to build amazing websites. I love solving problems and coding.</p>
    </section>

    <section>
      <h2>My Skills</h2>
      <ul>
        <li>HTML5</li>
        <li>Basic CSS</li>
        <li>JavaScript (Coming Soon)</li>
      </ul>
    </section>
    
    <section>
      <h2>Contact Me</h2>
      <form action="/send">
        <label for="msg">Message:</label><br>
        <textarea id="msg" name="message" rows="4" cols="50" required placeholder="Say hello..."></textarea>
        <br>
        <button type="submit">Send Message</button>
      </form>
    </section>
  </main>
  
  <hr>
  <footer>
    <p>
      <a href="mailto:alex@example.com">Email Me</a> | 
      <a href="https://github.com" target="_blank">GitHub</a>
    </p>
    <p>&copy; 2026 Alex Developer</p>
  </footer>
</body>
</html>

This code combines headings, paragraphs, images, lists, forms, and links into a complete Semantic HTML document structure. It represents a real-world usage of the tags you have learned.

HTML – Accessibility Basics