Scribd
Upload
3 views

HTML Project

The document outlines the creation of a personal portfolio website, detailing its structure and required sections including a header, about me, projects, contact, and footer. It provides the HTML and CSS code necessary for the main webpage and styling, along with instructions for adding images and future enhancements like responsive design and JavaScript interactivity. Additionally, it includes steps for running the project by organizing files in a designated folder and opening the HTML file in a browser.

Uploaded by

sameergill9595
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML Project

The document outlines the creation of a personal portfolio website, detailing its structure and required sections including a header, about me, projects, contact, and footer. It provides the HTML and CSS code necessary for the main webpage and styling, along with instructions for adding images and future enhancements like responsive design and JavaScript interactivity. Additionally, it includes steps for running the project by organizing files in a designated folder and opening the HTML file in a browser.

Uploaded by

sameergill9595
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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>&copy; 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.

You might also like