Project: Personal Portfolio Website
-----------------------------------------------------------------------------------------------------------------------------------
Objective
Create a personal portfolio web page with the following sections:
1. Header with navigation links
2. About Me section
3. Projects/Work section
4. Contact Me section
5. Footer
Project Structure
Folder Structure
Portfolio/
│
├── index.html # Main HTML file
├── styles.css # External CSS file
└── images/ # Folder for images
1. index.html
The main HTML file of the project.
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body <!-- Header Section -->
<header>
<nav>
<ul class="nav-links">
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero">
<h1>Welcome to My Portfolio</h1>
<p>Hi, I'm [Your Name], a passionate web developer.</p>
</section>
<!-- About Me Section -->
<section id="about">
<h2>About Me</h2>
<p>I am a beginner web developer who loves creating websites and learning
new technologies.</p>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>My Projects</h2>
<div class="project">
<h3>Project 1: Portfolio Website</h3>
<p>This is a sample portfolio website made using HTML and CSS.</p>
</div>
<div class="project">
<h3>Project 2: To-Do List App</h3>
<p>A simple JavaScript-based app for managing tasks.</p>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contact Me</h2>
<form>
<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" rows="4" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<!-- Footer Section -->
<footer>
<p>© 2025 My Portfolio. All rights reserved.</p>
</footer>
</body>
</html>
2. styles.css
The external CSS file for styling your web page.
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
/* Header Styles */
header {
background-color: #4CAF50;
padding: 10px 20px;
}
.nav-links {
display: flex;
justify-content: flex-end;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
}
/* Hero Section */
.hero {
text-align: center;
padding: 50px 20px;
background-color: #333;
color: white;
}
/* Section Styles */
section {
padding: 40px 20px;
max-width: 900px;
margin: 0 auto;
}
h2 {
color: #4CAF50;
text-align: center;
margin-bottom: 20px;
}
.project {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
background-color: white;
}
/* Form Styles */
form {
max-width: 500px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input, textarea, button {
margin-top: 5px;
padding: 10px;
font-size: 16px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #45a049;
}
/* Footer */
footer {
text-align: center;
padding: 20px;
background-color: #4CAF50;
color: white;
margin-top: 20px;
}
3. Images
Place any images you need for your projects inside the images/ folder. Update the src attribute of
<img> tags in your index.html as needed.
Example:
<img src="images/profile.jpg" alt="Profile Picture">
Features to Add Later
1. Responsive Design: Add media queries in your CSS to make the site mobile-friendly.
2. JavaScript:
a. Validate the contact form.
b. Add interactivity, like a theme switcher.
3. Advanced Styling: Use CSS transitions, animations, or frameworks like Bootstrap for better
visuals.
How to Run This Project
1. Create a folder named Portfolio.
2. Save index.html and styles.css files in the folder.
3. Open index.html in a browser to view your portfolio.
