Build a Personal Portfolio Using HTML

Building a personal portfolio is a rite of passage for every aspiring web developer. It showcases your skills, your voice, and your attention to detail. In this project, we’ll build a clean, semantic, and SEO-friendly portfolio using HTML — no frameworks, no distractions. Just pure markup with purpose.

We’ll begin by defining the main layout using semantic HTML5 elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio - Jane Doe</title>
  <meta name="description" content="Welcome to Jane Doe's portfolio. Web developer, designer, and banana enthusiast.">
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
</html>

<header>
  <h1>Jane Doe</h1>
  <p>Front-End Developer | Lover of Clean Code | Banana Smoothie Maker</p>
  <nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

[ Screen reader recognizes this as the top of the page and announces your identity ]

<section id="about">
  <h2>About Me</h2>
  <p>Hi! I'm Jane, a front-end web developer with a love for design, accessibility, and cherry-picked code standards. I’ve built projects in HTML, CSS, and JavaScript.</p>
</section>

<section id="projects">
  <h2>My Projects</h2>

  <article>
    <h3>Fruit Catalog</h3>
    <p>A searchable fruit database built using HTML and CSS. Try filtering for banana, cherry, or apple!</p>
    <a href="https://example.com/fruit-catalog" target="_blank">View Project</a>
  </article>

  <article>
    <h3>Hello World Blog</h3>
    <p>My first blog project using semantic HTML and proper heading hierarchy.</p>
    <a href="https://example.com/hello-world" target="_blank">Read Blog</a>
  </article>
</section>

<section>
  <h2>Media Work</h2>
  <figure>
    <img src="jane-profile.jpg" alt="Jane Doe smiling" width="300">
    <figcaption>My profile image, with a hint of banana yellow.</figcaption>
  </figure>

  <video width="400" controls>
    <source src="portfolio-intro.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</section>

<section id="contact">
  <h2>Contact Me</h2>
  <form action="/submit-form" 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="message">Message:</label>
    <textarea id="message" name="message"></textarea>

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

[ Users can now fill in and submit their contact details directly from the page ]

<footer>
  <p>© 2024 Jane Doe</p>
  <a href="https://linkedin.com/in/janedoe">LinkedIn</a>
  <a href="mailto:jane@example.com">Email</a>
</footer>

You've now built a personal portfolio page that is:

• Structured with semantic HTML
• SEO-friendly with clear titles and descriptions
• Rich in content with images, video, and projects
• Interactive with a working contact form

Choose the option that lists all and only the correct statements.

1. Using anchor tags with href referencing section IDs
2. Embedding all content in a single long scroll without links
3. Using a sticky header with navigation links
4. Linking to external social media profiles only

Choose the option that lists all and only the correct statements.

1. name
2. type
3. aria-label or label tag
4. autoplay

From here, you can:

• Add CSS to style your portfolio
• Host it using GitHub Pages
• Include your résumé, testimonials, or blog

This is just the beginning. Keep it personal, keep it clean, and keep building!