How to Build a Personal Portfolio Website Using HTML & CSS
This tutorial provides a step-by-step guide on creating a basic personal portfolio website using HTML and CSS. This website will serve as a showcase for your skills, projects, and experience. We will cover the essential HTML structure and then style it using CSS to create a visually appealing and functional website. This tutorial assumes you have basic familiarity with HTML and CSS syntax.
Set Up Your Project Directory
First, create a new folder for your project. Inside this folder, create two files: index.html for the HTML structure and style.css for the CSS styling.
Create the Basic HTML Structure (index.html)
Open index.html in your text editor and add the basic HTML boilerplate code. This includes the <!DOCTYPE html> declaration, the <html> tag, the <head> section (including the title and a link to your stylesheet), and the <body> section.
<!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="style.css">
</head>
<body>
<!-- Content will go here -->
</body>
</html>Add Header Section (index.html)
Within the <body>, add a header section that includes your name and a brief introduction. Use semantic HTML elements like <header>, <h1>, and <p>.
<header>
<h1>John Doe</h1>
<p>Web Developer & Designer</p>
</header>Add Navigation (index.html)
Include a navigation menu with links to different sections of your portfolio. Use the <nav> and <ul> elements for semantic structure.
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Create the "About" Section (index.html)
Add an "About" section where you describe yourself and your skills. Use a <section> element with an ID for easy linking from the navigation.
<section>
<h2>About Me</h2>
<p>I am a passionate web developer with a focus on creating user-friendly and visually appealing websites. I have experience in HTML, CSS, JavaScript, and various frameworks...</p>
</section>Add a "Projects" Section (index.html)
Showcase your projects using the <section> element. You can use <div> elements to group each project with an image, title, and a brief description.
<section>
<h2>Projects</h2>
<div class="project">
<img src="project1.jpg" alt="Project 1">
<h3>Project 1: E-commerce Website</h3>
<p>Developed a fully functional e-commerce website using HTML, CSS, and JavaScript.</p>
</div>
<div class="project">
<img src="project2.jpg" alt="Project 2">
<h3>Project 2: Portfolio Redesign</h3>
<p>Redesigned a personal portfolio website to improve user experience and visual appeal.</p>
</div>
</section>Create the "Contact" Section (index.html)
Include a contact form or contact information in a <section> element. Use <form> and <input> elements for a basic contact form.
<section>
<h2>Contact Me</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" name="email"><br>
<label for="message">Message:</label><br>
<textarea name="message"></textarea><br>
<input type="submit" value="Submit">
</form>
</section>Style the Website with CSS (style.css)
Open style.css and add CSS rules to style the different elements of your portfolio. Focus on layout, typography, and colors. This example includes basic styling; expand upon this to create a design that reflects your personal brand.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 1em 0;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
padding: 0.5em 0;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
nav li {
display: inline;
margin: 0 1em;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
padding: 2em;
margin: 1em;
background-color: #fff;
border-radius: 5px;
}
.project {
margin-bottom: 1em;
border: 1px solid #ddd;
padding: 1em;
}
.project img {
max-width: 100%;
height: auto;
}
footer {
text-align: center;
padding: 1em 0;
background-color: #333;
color: #fff;
position: fixed;
bottom: 0;
width: 100%;
}
Add a Footer (index.html)
Include a footer section with copyright information.
<footer>
<p>© 2023 John Doe. All rights reserved.</p>
</footer>Congratulations! You have successfully built a basic personal portfolio website using HTML and CSS. Remember to replace the placeholder content with your own information and customize the CSS to create a unique and professional design. Further improvements might include adding JavaScript for interactive elements, responsive design using media queries, and deploying your website to a hosting service.