Project: Build a Portfolio Page

📚 Lesson 16 of 25  •  ⏱ 30 min project  •  Beginner

What You Will Build

A personal portfolio page that includes a header, about section, skills list, projects section, and a contact form. This page uses everything you have learned in the HTML course.

Complete Code

Create a file called portfolio.html and paste this code. Then replace the placeholder text with your own information:

HTML — portfolio.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mohan — Web Developer</title>
  <meta name="description" content="Personal portfolio of Mohan, CSE student at Anna University">
</head>
<body>

  <!-- HEADER -->
  <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 id="hero">
      <h1>Hi, I'm Mohan 👋</h1>
      <p>CSE Student at Anna University | Aspiring Web Developer</p>
      <a href="#contact">Get In Touch</a>
    </section>

    <!-- ABOUT -->
    <section id="about">
      <h2>About Me</h2>
      <img src="photo.jpg" alt="Mohan smiling" width="200">
      <p>
        I am a final-year CSE student passionate about building
        web applications. Currently learning HTML, CSS and JavaScript.
      </p>
    </section>

    <!-- SKILLS -->
    <section id="skills">
      <h2>My Skills</h2>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>PHP</li>
        <li>MySQL</li>
        <li>Git</li>
      </ul>
    </section>

    <!-- PROJECTS -->
    <section id="projects">
      <h2>Projects</h2>

      <article>
        <h3>Study Planner App</h3>
        <p>A web app to track study progress and set goals. Built with HTML, CSS and JavaScript.</p>
        <a href="https://github.com/mohan/study-planner" target="_blank" rel="noopener">View on GitHub</a>
      </article>

      <article>
        <h3>AU Results Checker</h3>
        <p>Quickly check Anna University results with a clean interface.</p>
        <a href="#">Live Demo</a>
      </article>
    </section>

    <!-- CONTACT -->
    <section id="contact">
      <h2>Contact Me</h2>
      <form action="contact.php" method="POST">
        <label for="name">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="msg">Message</label>
        <textarea id="msg" name="message" rows="4" required></textarea>
        <button type="submit">Send Message</button>
      </form>
    </section>

  </main>

  <footer>
    <p>&copy; 2026 Mohan. Built with ♥ and HTML.</p>
  </footer>

</body>
</html>

What to Customize

Next Step: Style It!

Right now the portfolio is unstyled — plain text. In the CSS Course, you will make it look professional with colors, layout, fonts and animations.

← Meta Tags & SEO Start CSS Course →