Welcome to the final tutorial in our series — this HTML mini project tutorial brings together everything you’ve learned so far into one complete, responsive-ready webpage.
This is Tutorial 8 of 8, the capstone of our complete HTML series on Tutorials Ocean’s HTML category. If you missed it, check out Tutorial 7: Meta Tags & SEO Basics first.
What We’re Building
In this HTML mini project tutorial, you’ll build a simple one-page personal portfolio site using nothing but the tags covered across this entire series — structure, text formatting, links, images, tables, forms, and semantic layout.
This project pulls together concepts from all 7 previous tutorials, so if you’ve been following along and completing each practice exercise, most of this will already feel familiar.
Planning the Page Structure
Before writing code, it helps to sketch out the sections you need. For this project, we’ll build:
- A header with your name and navigation
- A main “About Me” section
- A “Skills” section with a list
- A “Projects” section using articles
- A “Contact” section with a form
- A footer with copyright info
The Complete Code
Here’s the full structure combining everything from this HTML mini project tutorial series into one page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Personal portfolio built with HTML">
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>Your Name</h1>
<nav>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>A short paragraph introducing yourself.</p>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<article>
<h3>Project One</h3>
<p>A short description of this project.</p>
</article>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form action="/submit" 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</button>
</form>
</section>
</main>
<footer>
<p>© 2026 Your Name. All rights reserved.</p>
</footer>
</body>
</html>Why This Structure Works
Notice how every section uses a meaningful tag — header, nav, main, section, article, footer — instead of generic divs everywhere. This is the exact approach taught in Tutorial 6, and it’s what separates beginner code from professional code.
The contact form uses required attributes for validation, proper label-input pairing for accessibility, and clean naming — all concepts straight from Tutorial 5.
Making It Responsive-Ready
This HTML mini project tutorial focuses purely on structure, but a few habits here already prepare your page for responsiveness once you add CSS:
- The viewport meta tag is already set correctly
- Sections are logically separated, making them easy to style individually
- No inline width/height values are hardcoded on layout containers
For the complete official reference on structuring pages, check the MDN Learn HTML guide.
Final Project Challenge
Now build your own complete version using everything from this HTML mini project tutorial series.
Requirements:
- Use the full skeleton above as your starting point
- Fill in real content about yourself — not placeholder text
- Add at least one image with proper alt text (Tutorial 3)
- Add a table somewhere, such as a skills-proficiency table (Tutorial 4)
- Add proper meta tags and a favicon in the head section (Tutorial 7)
- Make sure every input has a matching label
Bonus challenge: Add an <aside> section with 2-3 fun facts about yourself, and link your social media profiles in the footer.
Once complete, you’ll have a full, semantic, accessible personal portfolio page built entirely with hand-written HTML — no page builders, no shortcuts.
Series Complete!
Congratulations on completing all 8 tutorials in this HTML mini project tutorial series. You now know structure, text formatting, links, images, tables, forms, semantic layout, and SEO basics — the complete foundation every web developer needs.
Explore the rest of our tutorials in the HTML category anytime you need a refresher, and keep an eye on Tutorials Ocean for the next series in this learning path.
This HTML mini project tutorial is part of the complete HTML series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.
