⬅ Previous TopicHTML Clean Code Standards
Next Topic ⮕HTML Blog Page Project
HTML Project: Personal Portfolio
HTML Project: Personal Portfolio
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.
1. Structuring Your Portfolio Page
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>
2. Header: Your Personal Introduction
<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 ]
3. About Section Using Semantic <section>
<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>
4. Projects Section: Showcase Your Work
<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>
5. Embedding Media: Image and Video
<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>
6. Contact Form 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 ]
7. Footer with Social Links
<footer>
<p>© 2024 Jane Doe</p>
<a href="https://linkedin.com/in/janedoe">LinkedIn</a>
<a href="mailto:jane@example.com">Email</a>
</footer>
8. Summary
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
Next Steps
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!