Practical HTML Project: Building a Simple Portfolio Website
Creating a practical HTML project is an excellent way to solidify your understanding of HTML and demonstrate your skills. In this article, we'll guide you through building a simple portfolio website using HTML. This project will help you apply various HTML elements in a real-world scenario and create a foundation that you can expand upon in the future.
Project Overview
The goal of this project is to create a basic portfolio website that includes the following sections:
- Header: Contains the site’s title and navigation links.
- About Me: A brief introduction to yourself.
- Portfolio: A showcase of your work with images and descriptions.
- Contact: A form for visitors to get in touch with you.
- Footer: Contains copyright information and additional links.
1. Setting Up the Project
Start by creating an HTML file named index.html. This file will serve as the main page of your portfolio website.
<!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"> <!-- Link to your CSS file -->
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
Output:
- A page header displaying "My Portfolio."
- A navigation bar with links to the "About Me," "Portfolio," and "Contact" sections.
2. Creating the About Me Section
Next, add the "About Me" section to introduce yourself. This section should include a heading, a brief paragraph, and an image.
<section id="about">
<h2>About Me</h2>
<p>Hello! I’m Ridoy Hasan, a web developer with a passion for creating beautiful and functional websites.</p>
<img src="profile.jpg" alt="My Profile Picture">
</section>
Output:
- A heading that says "About Me."
- A paragraph introducing yourself.
- An image (replace
profile.jpgwith your actual image file).
3. Building the Portfolio Section
The portfolio section will showcase your work. Use an unordered list to display your projects with images and descriptions.
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<h3>Project 1</h3>
<img src="project1.jpg" alt="Screenshot of Project 1">
<p>A brief description of Project 1.</p>
</li>
<li>
<h3>Project 2</h3>
<img src="project2.jpg" alt="Screenshot of Project 2">
<p>A brief description of Project 2.</p>
</li>
<li>
<h3>Project 3</h3>
<img src="project3.jpg" alt="Screenshot of Project 3">
<p>A brief description of Project 3.</p>
</li>
</ul>
</section>
Output:
- A "Portfolio" heading.
- A list of projects with images and descriptions for each.
4. Adding the Contact Form
The contact form allows visitors to reach out to you. This form will include fields for the visitor's name, email, and message.
<section id="contact">
<h2>Contact Me</h2>
<form action="mailto:youremail@example.com" method="post" enctype="text/plain">
<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>
<input type="submit" value="Send">
</form>
</section>
Output:
- A "Contact Me" heading.
- A form with fields for the visitor’s name, email, and message, plus a submit button.
5. Finalizing with the Footer
Finally, add a footer at the bottom of the page with copyright information and links to your social media profiles.
<footer>
<p>© 2024 Ridoy Hasan. All rights reserved.</p>
<ul>
<li><a href="https://twitter.com/yourprofile">Twitter</a></li>
<li><a href="https://linkedin.com/in/yourprofile">LinkedIn</a></li>
</ul>
</footer>
</body>
</html>
Output:
- A footer with your copyright information.
- Links to your social media profiles.
6. Adding CSS for Styling (Optional)
To enhance the look and feel of your portfolio, you can add some basic CSS. Create a styles.css file in the same directory as your HTML file and link it within the <head> section.
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
margin: 20px 0;
padding: 20px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
footer {
text-align: center;
padding: 10px 0;
background-color: #333;
color: #fff;
}
footer ul {
list-style: none;
padding: 0;
}
footer ul li {
display: inline;
margin: 0 10px;
}
footer ul li a {
color: #fff;
text-decoration: none;
}
Output:
- A clean and visually appealing layout for your portfolio website.
Conclusion
By completing this practical HTML project, you've created a simple yet functional portfolio website. This project has helped you apply key HTML elements like headers, sections, forms, and lists in a real-world context. You can continue to expand this project by adding more sections, integrating CSS for better styling, or even including JavaScript for interactive features. This portfolio website not only showcases your skills but also serves as a foundation for more advanced projects in the future.
Happy coding!
Top comments (0)