Folder Structure
Personal_Portfolio
│
├── [Link]
├── [Link]
├── [Link]
└── [Link]
[Link] (Main Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>My Personal Portfolio</h1>
<p>Future Web Developer</p>
</header>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
<section>
<h2>Introduction</h2>
<p>
Hello! My name is <b>Your Name</b>. I am a Class 10 student and a beginner in web
development.
I am learning HTML and CSS and I want to become a professional web developer.
</p>
</section>
<section>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Basic JavaScript</li>
<li>Problem Solving</li>
</ul>
</section>
<section>
<h2>Education Details</h2>
<table>
<tr>
<th>Class</th>
<th>School</th>
<th>Year</th>
</tr>
<tr>
<td>10th</td>
<td>Your School Name</td>
<td>2025</td>
</tr>
<tr>
<td>9th</td>
<td>Your School Name</td>
<td>2024</td>
</tr>
</table>
</section>
<section>
<h2>Image Gallery</h2>
<div class="gallery">
<img src="[Link] alt="Sample Image 1">
<img src="[Link] alt="Sample Image 2">
<img src="[Link] alt="Sample Image 3">
</div>
</section>
<footer>
<p>© 2026 My Portfolio | Designed using HTML & CSS</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>About Me</h1>
</header>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
<section>
<article>
<h2>Who Am I?</h2>
<p>
I am a passionate student who is learning web development.
I enjoy designing websites and improving my coding skills.
</p>
</article>
<article>
<h2>My Hobbies</h2>
<ol>
<li>Coding</li>
<li>Reading</li>
<li>Playing Games</li>
<li>Listening to Music</li>
</ol>
</article>
</section>
<footer>
<p>Thank you for visiting my website</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Me</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Contact Me</h1>
</header>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
<section>
<h2>Get in Touch</h2>
<form>
<label>Name:</label><br>
<input type="text" placeholder="Enter your name"><br><br>
<label>Email:</label><br>
<input type="email" placeholder="Enter your email"><br><br>
<label>Message:</label><br>
<textarea rows="5" placeholder="Enter your message"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</section>
<footer>
<p>Email: yourname@[Link]</p>
</footer>
</body>
</html>
[Link]
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #555;
text-align: center;
padding: 10px;
}
nav a {
color: white;
margin: 15px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: yellow;
}
section {
padding: 20px;
margin: 20px;
background-color: white;
border-radius: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
.gallery {
display: flex;
gap: 15px;
justify-content: center;
}
.gallery img {
border-radius: 10px;
border: 2px solid #333;
}
form input, form textarea {
width: 100%;
padding: 8px;
}
button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}