🎨 Day 6: HTML Portfolio Mini Project
Today you'll create a basic personal portfolio page using only HTML and the semantic tags we’ve learned so far. This project helps you practice structure, content organization, and confidence-building.
📄 What You'll Build
A simple portfolio page that includes:
- Header with your name & profession
- Navigation with internal page links
- About Me section
- Projects section with a list
- Contact Form using inputs
- Footer with copyright
💻 Full HTML Code (with Tailwind)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
<header class="text-center p-6 bg-blue-600 text-white">
<h1 class="text-3xl font-bold">Muzammil Riaz</h1>
<p>Web Developer & Designer</p>
</header>
<nav class="text-center bg-blue-100 py-2">
<a href="#about" class="mx-2 text-blue-600">About</a>|
<a href="#projects" class="mx-2 text-blue-600">Projects</a>|
<a href="#contact" class="mx-2 text-blue-600">Contact</a>
</nav>
<main class="p-6">
<section id="about" class="mb-6">
<h2 class="text-xl font-semibold text-gray-700">About Me</h2>
<p>Hello! I'm Muzammil, a passionate web developer learning HTML, CSS, and JavaScript.</p>
</section>
<section id="projects" class="mb-6">
<h2 class="text-xl font-semibold text-gray-700">My Projects</h2>
<ul class="list-disc list-inside">
<li>Quiz App</li>
<li>Blog System</li>
<li>Portfolio Website</li>
</ul>
</section>
<section id="contact">
<h2 class="text-xl font-semibold text-gray-700">Contact Me</h2>
<form class="space-y-4 mt-2">
<div>
<label class="block mb-1 font-medium">Name:</label>
<input type="text" class="w-full px-3 py-2 border rounded" />
</div>
<div>
<label class="block mb-1 font-medium">Email:</label>
<input type="email" class="w-full px-3 py-2 border rounded" />
</div>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Send</button>
</form>
</section>
</main>
<footer class="text-center p-4 mt-6 bg-gray-200">
<p>© 2025 Muzammil Riaz</p>
</footer>
</body>
</html>
🧪 Practice Task
- Customize the header text
- Add 2 more sample projects
- Try changing colors using Tailwind utility classes
🚀 What’s Next?
In Day 8, we'll begin learning CSS to style our portfolio and make it responsive and beautiful!
No comments:
Post a Comment