Portfolio Structure & Layout
Plan and build the HTML structure of a professional portfolio website. Apply everything from modules 1-9: semantic elements for page structure, proper heading hierarchy for SEO, navigation with anchor links, and accessible landmarks.
Project Planning
A portfolio website needs 5 core sections: Hero (name, title, CTA), About (bio, skills), Projects (work samples with images), Contact (form), and Footer (social links). Structure each as a semantic <section> with proper headings. Use a single-page layout with smooth scrolling between sections — this is the industry standard for developer portfolios.
Semantic elements replace generic divs — improving SEO, accessibility, and code clarity
Portfolio Sections
- Hero: <header> with <h1> (your name), <p> (your title), <a> (call-to-action button)
- About: <section id='about'> with <h2>, skills list using <ul>, and a profile image with proper alt text
- Projects: <section id='projects'> with <article> for each project containing <figure>, <figcaption>, and project links
- Contact: <section id='contact'> with <form> using validated inputs (email, message) and a submit button
- Footer: <footer> with social media links using target='_blank' rel='noopener', copyright notice
Tip
Keep your portfolio focused and curated. Recruiters spend an average of 6 seconds on a portfolio page. Show only your 3-5 best projects with clear screenshots and live demo links. Quality beats quantity — one polished project is more impressive than ten unfinished ones.
Portfolio HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jane Doe - Full Stack Developer Portfolio</title>
<meta name="description" content="Portfolio of Jane Doe, full stack developer specializing in React, Node.js, and Python.">
</head>
<body>
<!-- Skip link for accessibility -->
<a href="#main" class="skip-link">Skip to main content</a>
<!-- Navigation -->
<header>
<nav aria-label="Main navigation">
<a href="#" class="logo">JD</a>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<!-- Hero Section -->
<section id="hero" aria-label="Introduction">
<h1>Hi, I'm Jane Doe</h1>
<p>Full Stack Developer | React & Node.js</p>
<a href="#projects">View My Work</a>
</section>
<!-- About Section -->
<section id="about">
<h2>About Me</h2>
<img src="profile.jpg" alt="Jane Doe smiling at camera" width="200" height="200">
<p>I build web applications that are fast, accessible, and beautiful.</p>
<h3>Skills</h3>
<ul>
<li>HTML5, CSS3, JavaScript</li>
<li>React, Next.js, TypeScript</li>
<li>Node.js, Express, PostgreSQL</li>
</ul>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>My Projects</h2>
<article>
<figure>
<img src="project1.jpg" alt="E-commerce dashboard showing sales analytics" loading="lazy">
<figcaption>ShopDash — E-commerce Analytics Platform</figcaption>
</figure>
<p>Built with React, Node.js, and PostgreSQL.</p>
<a href="https://github.com/janedoe/shopdash" target="_blank" rel="noopener">GitHub</a>
<a href="https://shopdash.demo.com" target="_blank" rel="noopener">Live Demo</a>
</article>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Get In Touch</h2>
<form action="/api/contact" 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" rows="5" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2025 Jane Doe. All rights reserved.</p>
<nav aria-label="Social media links">
<a href="https://github.com/janedoe" target="_blank" rel="noopener">GitHub</a>
<a href="https://linkedin.com/in/janedoe" target="_blank" rel="noopener">LinkedIn</a>
</nav>
</footer>
</body>
</html>Quick Quiz: Portfolio Project
Key Takeaways
- Plan and build the HTML structure of a professional portfolio website.
- Hero: <header> with <h1> (your name), <p> (your title), <a> (call-to-action button)
- About: <section id='about'> with <h2>, skills list using <ul>, and a profile image with proper alt text
- Projects: <section id='projects'> with <article> for each project containing <figure>, <figcaption>, and project links