Responsive Portfolio Website Using HTML & CSS -Full Tutorial
Table of Contents
Introduction
This tutorial will guide you through creating a stunning portfolio website using only HTML and CSS. Perfect for beginners, this step-by-step guide will help you build a responsive, professional-looking site to showcase your projects. No JavaScript is required, making it an accessible starting point for anyone interested in web development.
Step 1: Set Up Your Project Structure
Begin by creating a new folder for your project. Inside this folder, create the following files:
index.html– This will be your main HTML file.style.css– This file will contain all your CSS styles.
Practical Tip
Organize your project directory to keep assets like images or additional stylesheets in separate folders. This will help maintain clarity as your project grows.
Step 2: Create the HTML Structure
Open index.html and start building the basic structure of your webpage. Use the following code as a template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>Your Name</h1>
<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>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>A brief introduction about yourself.</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<!-- Project entries will go here -->
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>Your contact information.</p>
</section>
</main>
<footer>
<p>© 2023 Your Name</p>
</footer>
</body>
</html>
Common Pitfall
Ensure you have the correct file paths for your CSS and any other assets to prevent styling issues.
Step 3: Add CSS Styles
Open style.css and start adding styles to make your portfolio visually appealing. Here are some basic styles to get you started:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px;
}
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
}
Practical Tip
Experiment with different colors, fonts, and layouts to find a style that represents you best. Use tools like Google Fonts for more font choices.
Step 4: Make It Responsive
To ensure your portfolio looks good on all devices, add responsive styles. Use media queries to adjust layouts for smaller screens. Here’s an example:
@media (max-width: 600px) {
nav ul {
display: block;
}
nav ul li {
margin: 10px 0;
}
}
Real-World Application
Responsive design is crucial in today’s web environment, as many users access sites via mobile devices.
Step 5: Populate Your Portfolio
Return to index.html and fill in the "My Projects" section with your work. Use the following structure for each project:
<div class="project">
<h3>Project Title</h3>
<p>Description of the project.</p>
<a href="link-to-project" target="_blank">View Project</a>
</div>
Common Pitfall
Make sure to include links to live projects or code repositories to showcase your work effectively.
Conclusion
Congratulations! You’ve successfully created a responsive portfolio website using HTML and CSS. Remember to customize your content and styles to truly reflect your personality and work. As next steps, consider enhancing your site with JavaScript or exploring frameworks like Bootstrap for more advanced layouts. Happy coding!