Project: Build a Real Page — HTML Fundamentals

What you'll build

A personal profile page with: a header with navigation, a hero section with your name and role, an about section, a skills list, a projects table, a contact form, and a footer. This is structurally identical to what you'd build for a real portfolio.

profile.html — complete project

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Nelson Njihia — Developer</title>
</head>
<body>

  <header>
    <nav>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <!-- Hero -->
    <section>
      <h1>Nelson Njihia</h1>
      <p>Software Engineer · Building real systems that solve real problems.</p>
      <a href="#contact">Get in touch</a>
      <a href="#projects">See my work</a>
    </section>

    <!-- About -->
    <section id="about">
      <h2>About Me</h2>
      <p>
        I'm a software engineer and founder of NelsonLabs — a free coding
        education platform. I build data-driven systems, automation tools, and
        AI-powered applications in production.
      </p>
      <p>
        I believe in understanding code from first principles, not just
        copying patterns that other people created.
      </p>
    </section>

    <!-- Skills -->
    <section id="skills">
      <h2>Skills</h2>
      <ul>
        <li>JavaScript / TypeScript</li>
        <li>Python</li>
        <li>React & Next.js</li>
        <li>Node.js</li>
        <li>SQL & NoSQL databases</li>
        <li>Machine learning basics</li>
      </ul>
    </section>

    <!-- Projects -->
    <section id="projects">
      <h2>Projects</h2>
      <table>
        <thead>
          <tr>
            <th>Project</th>
            <th>Tech</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><a href="#">NelsonLabs</a></td>
            <td>Next.js, Tailwind</td>
            <td>Free developer education platform</td>
          </tr>
          <tr>
            <td><a href="#">Data Pipeline</a></td>
            <td>Python, PostgreSQL</td>
            <td>Internal business analytics tool</td>
          </tr>
        </tbody>
      </table>
    </section>

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

        <label for="email">Email</label>
        <input type="email" id="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>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Nelson Njihia. Built with HTML.</p>
  </footer>

</body>
</html>

TIP

Next step: add CSS. This page is fully structured and accessible — but it's unstyled. Open it in a browser and it will work. The next course, CSS Styling, will teach you how to transform this into a beautiful, responsive, modern-looking profile page.

What you learned in this course

—How HTML structures every page on the web
—The standard document structure every page shares
—Text elements — headings, paragraphs, emphasis
—Links and images with correct attributes
—Lists — unordered, ordered, and description
—Tables for real tabular data
—Forms with inputs, labels, and validation attributes
—Semantic elements and why they matter
—Modern HTML5 features — video, audio, data attributes