HTMLHTML · Lesson 7 of 8

Mini Project: Personal Page

Build a complete personal homepage using semantic HTML. No CSS yet — pure structure. You'll add styles later.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Personal page for Alice Smith, software developer">
  <title>Alice Smith — Developer</title>
</head>
<body>

  <header>
    <h1>Alice Smith</h1>
    <p>Software Developer · Open Source Enthusiast · Coffee Drinker</p>
    <nav aria-label="Page sections">
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>

    <section id="about">
      <h2>About Me</h2>
      <img src="avatar.jpg" alt="Alice Smith smiling" width="200" height="200">
      <p>
        I'm a software developer with 5 years of experience building web applications.
        I specialize in Python backends and React frontends, and I contribute to
        open-source projects in my free time.
      </p>
    </section>

    <section id="skills">
      <h2>Skills</h2>
      <h3>Languages</h3>
      <ul>
        <li>Python</li>
        <li>JavaScript / TypeScript</li>
        <li>Go</li>
        <li>SQL</li>
      </ul>
      <h3>Tools</h3>
      <ul>
        <li>Git, Docker, Kubernetes</li>
        <li>PostgreSQL, Redis</li>
        <li>AWS, GCP</li>
      </ul>
    </section>

    <section id="projects">
      <h2>Projects</h2>
      <article>
        <h3><a href="https://github.com/alice/taskr">Taskr</a></h3>
        <p>A command-line task manager built in Python.
           <strong>500+ GitHub stars.</strong></p>
      </article>
      <article>
        <h3><a href="https://github.com/alice/goqueue">GoQueue</a></h3>
        <p>A high-performance message queue implementation in Go.</p>
      </article>
    </section>

    <section id="contact">
      <h2>Get In Touch</h2>
      <form action="/contact" method="POST">
        <label for="sender-name">Your Name:</label>
        <input type="text" id="sender-name" name="name" required>

        <label for="sender-email">Your Email:</label>
        <input type="email" id="sender-email" name="email" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="5" required></textarea>

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

      <ul>
        <li><a href="https://github.com/alice">GitHub</a></li>
        <li><a href="https://linkedin.com/in/alice">LinkedIn</a></li>
        <li><a href="mailto:alice@example.com">alice@example.com</a></li>
      </ul>
    </section>

  </main>

  <footer>
    <p>© 2024 Alice Smith · Built with pure HTML (and some grit)</p>
  </footer>

</body>
</html>

◆ Note
Notice the semantic structure: header, main with sections, articles within sections, footer. Every section has an id for anchor linking. Every image has alt text. Every form input has a label. This is good, accessible, semantic HTML.