A Personal Portfolio webpage serves as your digital resume, showcasing your skills, projects, and experience. It’s an essential project for beginners learning HTML, as it teaches basic structure, layout, and content organization. A well-designed portfolio helps you stand out to potential employers or clients.
Basic HTML Structure for Personal Portfolio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Name - Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f8f9fa;
text-align: center;
}
header {
background: #007bff;
color: white;
padding: 20px;
font-size: 24px;
}
nav {
margin: 20px 0;
}
nav a {
text-decoration: none;
color: #007bff;
margin: 0 15px;
font-size: 18px;
}
section {
padding: 20px;
max-width: 800px;
margin: auto;
}
.project {
border: 1px solid #ddd;
padding: 15px;
margin: 15px 0;
background: white;
border-radius: 8px;
}
footer {
background: #333;
color: white;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Web Developer | Designer | Creator</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About Me</a>
<a href="#">Projects</a>
<a href="#">Contact</a>
</nav>
<section>
<h2>About Me</h2>
<p>Write a short introduction about yourself, your skills, and your passion for coding.</p>
</section>
<section>
<h2>Projects</h2>
<div class="project">
<h3>Project 1: Portfolio Website</h3>
<p>A simple personal portfolio showcasing skills and projects.</p>
</div>
<div class="project">
<h3>Project 2: JavaScript Calculator</h3>
<p>A basic calculator built using HTML, CSS, and JavaScript.</p>
</div>
</section>
<section>
<h2>Contact</h2>
<p>Email: yourname@example.com</p>
<p>GitHub: github.com/yourname</p>
</section>
<footer>
<p>© 2025 Your Name. All Rights Reserved.</p>
</footer>
</body>
</html>
Output
Key Features:
- Header Section – Displays your name and a tagline.
- Navigation Bar – Links to different sections of the portfolio.
- About Me Section – A brief introduction about yourself.
- Projects Showcase – Lists projects with descriptions.
- Contact Information – Displays your email and social links.
- Footer – Adds a copyright notice.
This structure gives you a solid foundation—you can expand it by adding images, animations, or interactive elements.
