Build a Responsive Portfolio Website with HTML and CSS

Build a Responsive Portfolio Website Using HTML and CSS

In today’s digital-first world, a strong online presence is no longer a luxury but a necessity for professionals across all industries. Whether you’re a designer, developer, writer, photographer, or any creative professional, a portfolio website serves as your digital storefront, showcasing your skills, experience, and unique style to potential clients, employers, and collaborators. It’s your personal brand statement, accessible 24/7, anywhere in the world.

But merely having a website isn’t enough. With a vast array of devices – from smartphones and tablets to laptops and giant desktop monitors – users expect a seamless and enjoyable experience regardless of how they access your content. This is where responsiveness comes into play. A responsive website automatically adjusts its layout and content to fit the screen size it’s being viewed on, ensuring optimal readability and usability across all devices.

This comprehensive guide will walk you through the process of building a responsive portfolio website from scratch, using the fundamental building blocks of the web: HTML for structure and CSS for styling and responsiveness. By the end of this article, you’ll have a solid understanding of how to create a professional, adaptable, and visually appealing online portfolio that effectively presents your work to the world.

Simple Online Survey System Using HTML

9 Best Social Media Management Tools in 2026

Web3 Fellowship Programs: Top Opportunities for Developers

1. Setting Up Your Project: The Foundation

Before diving into code, let’s establish a clean and organized project structure. This makes development easier to manage and maintain.

1.1 Project Folder Structure

Create a main folder for your project (e.g., my-portfolio). Inside it, create the following subfolders:

• css/: For all your CSS stylesheets.
• img/: For all your images (project screenshots, profile picture, etc.).
• js/: (Optional) For any JavaScript files you might add later for interactivity.

Your root folder will contain your main HTML file.

my-portfolio/
├── css/
│   └── style.css
├── img/
│   ├── profile.jpg
│   └── project-1.jpg
├── index.html
└── ...

1.2 Basic HTML Boilerplate

Every HTML document starts with a basic structure. Open your index.html file and add the following boilerplate code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Portfolio</title>
    <!-- Link to your CSS file -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Your website content will go here -->

    <!-- Optional: Link to JavaScript files -->
    <!-- <script src="js/script.js"></script> -->
</body>
</html>

Key elements in the <head>:

• <!DOCTYPE html>: Declares the document type as HTML5.
• <html lang="en">: Specifies the document’s language, important for accessibility and search engines.
• <meta charset="UTF-8">: Ensures proper character encoding for all text.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Crucial for responsiveness! This meta tag tells browsers to set the viewport width to the device’s width and to set the initial zoom level to 1.0. Without this, mobile browsers might render your page at a desktop width and then scale it down, breaking your responsive design.
• <title>: The text that appears in the browser tab.
• <link rel="stylesheet" href="css/style.css">: Links your HTML document to your external CSS file. Make sure the path is correct.

2. Crafting the HTML Structure: The Skeleton of Your Portfolio

Now, let’s build the semantic structure of your portfolio website using HTML5 elements. Semantic HTML uses tags that convey meaning about the content they contain (e.g., <header>, <nav>, <main>, <section>, <footer>). This improves accessibility and SEO.

We’ll break down the website into logical sections:

2.1 Header and Navigation

The header typically contains your logo/name and the main navigation menu.

<header class="header">
    <div class="container">
        <a href="#" class="logo">Your Name</a>
        <nav class="main-nav">
            <ul>
                <li><a href="#hero">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
        <!-- Hamburger menu icon for mobile (will be styled with CSS/JS) -->
        <button class="nav-toggle" aria-label="toggle navigation">
            <span class="hamburger"></span>
        </button>
    </div>
</header>

• We use a div with class container to constrain content width and center it. This will be a recurring pattern.
• <nav> for navigation links.
• A button for a mobile navigation toggle, which we’ll style later.

2.2 Hero Section

This is the first thing visitors see – a prominent introduction to who you are and what you do.

<section id="hero" class="hero">
    <div class="container">
        <p class="hero-subtitle">Hello, I'm</p>
        <h1 class="hero-title">Your Name</h1>
        <h2 class="hero-tagline">A Passionate [Your Profession]</h2>
        <a href="#portfolio" class="btn">View My Work</a>
    </div>
</section>

2.3 About Section

Tell your story, highlight your skills, and include a professional photo.

<section id="about" class="about">
    <div class="container">
        <h2 class="section-title">About Me</h2>
        <div class="about-content">
            <img src="img/profile.jpg" alt="Your Name" class="profile-img">
            <div class="about-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
                <p>
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <h3>My Skills</h3>
                <ul class="skills-list">
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>Responsive Design</li>
                    <li>JavaScript</li>
                    <li>[Your Skill 5]</li>
                    <li>[Your Skill 6]</li>
                </ul>
            </div>
        </div>
    </div>
</section>

2.4 Portfolio/Work Section

Showcase your best projects in a visually appealing grid.

<section id="portfolio" class="portfolio">
    <div class="container">
        <h2 class="section-title">My Work</h2>
        <div class="portfolio-grid">
            <div class="portfolio-item">
                <img src="img/project-1.jpg" alt="Project 1 Title">
                <h3>Project Title 1</h3>
                <p>A brief description of Project 1, highlighting key technologies or achievements.</p>
                <a href="project-1-details.html" class="btn btn-small">View Project</a>
            </div>
            <div class="portfolio-item">
                <img src="img/project-2.jpg" alt="Project 2 Title">
                <h3>Project Title 2</h3>
                <p>A brief description of Project 2, highlighting key technologies or achievements.</p>
                <a href="project-2-details.html" class="btn btn-small">View Project</a>
            </div>
            <div class="portfolio-item">
                <img src="img/project-3.jpg" alt="Project 3 Title">
                <h3>Project Title 3</h3>
                <p>A brief description of Project 3, highlighting key technologies or achievements.</p>
                <a href="project-3-details.html" class="btn btn-small">View Project</a>
            </div>
            <!-- Add more portfolio items as needed -->
        </div>
    </div>
</section>

2.5 Contact Section

Provide a way for visitors to get in touch.

<section id="contact" class="contact">
    <div class="container">
        <h2 class="section-title">Get In Touch</h2>
        <p class="contact-intro">Have a project in mind or just want to say hello? Feel free to reach out!</p>
        <form action="submit_form.php" method="POST" class="contact-form">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">Message:</label>
                <textarea id="message" name="message" rows="6" required></textarea>
            </div>
            <button type="submit" class="btn">Send Message</button>
        </form>
        <div class="social-links">
            <a href="https://linkedin.com/in/yourprofile" target="_blank" aria-label="LinkedIn">
                <i class="fab fa-linkedin"></i> <!-- Using Font Awesome for icons -->
            </a>
            <a href="https://github.com/yourprofile" target="_blank" aria-label="GitHub">
                <i class="fab fa-github"></i>
            </a>
            <!-- Add more social links as needed -->
        </div>
    </div>
</section>

• For social icons, you can use a library like Font Awesome (link in <head>):
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

2.6 Footer

The footer typically contains copyright information and perhaps quick links.

<footer class="footer">
    <div class="container">
        <p>&copy; <span id="current-year"></span> Your Name. All rights reserved.</p>
        <p>Built with <span style="color: #e25555;">&hearts;</span> and code.</p>
    </div>
</footer>

<!-- Optional: JavaScript to dynamically update the year -->
<script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

3. Styling with CSS: Bringing Your Portfolio to Life

With the HTML structure in place, it’s time to add visual appeal using CSS. Create a file named style.css inside your css/ folder.

3.1 Basic Reset and Global Styles

It’s good practice to reset default browser styles and define global properties like fonts and colors.

/ Basic Reset /
 {
    margin: 0;
    padding: 0;
    box-sizing: border-box; / Makes padding and border part of the element's total width/height /
}

html {
    scroll-behavior: smooth; / Smooth scrolling for anchor links /
}

body {
    font-family: 'Arial', sans-serif; / Choose a professional font /
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

/ Global Container for content width /
.container {
    max-width: 1200px; / Max width for desktop /
    margin: 0 auto; / Center the container /
    padding: 0 20px; / Padding on sides for smaller screens /
}

/ Section Titles /
.section-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #222;
}

/ Buttons /
.btn {
    display: inline-block;
    background-color: #007bff; / Primary button color /
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

.btn-small {
    padding: 8px 15px;
    font-size: 0.9em;
}

/ Image styling /
img {
    max-width: 100%; / Ensures images don't overflow their containers /
    height: auto; / Maintains aspect ratio /
    display: block; / Removes extra space below images /
}

3.2 Header and Navigation Styling

We’ll use Flexbox to align items in the header.

.header {
    background-color: #fff;
    padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky; / Makes header stick to top /
    top: 0;
    z-index: 1000; / Ensures header is above other content /
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8em;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    display: flex; / Arrange nav items horizontally /
}

.main-nav ul li {
    margin-left: 30px;
}

.main-nav ul li a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: #007bff;
}

/ Hamburger menu for mobile (hidden by default on desktop) /
.nav-toggle {
    display: none; / Hide on desktop /
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001; / Ensure it's above other elements when active /
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    position: relative;
    transition: background-color 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    position: absolute;
    transition: transform 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

3.3 Hero Section Styling

.hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/hero-bg.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 150px 0; / Adjust height /
    display: flex; / Use flex to center content vertically /
    align-items: center;
    justify-content: center;
    min-height: 80vh; / Minimum height relative to viewport height /
}

.hero-subtitle {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.hero-title {
    font-size: 4em;
    margin-bottom: 15px;
}

.hero-tagline {
    font-size: 2em;
    margin-bottom: 40px;
    color: #eee;
}

3.4 About Section Styling

.about {
    padding: 80px 0;
    background-color: #fff;
}

.about-content {
    display: flex; / Arrange image and text side-by-side /
    gap: 50px; / Space between image and text /
    align-items: center;
}

.profile-img {
    width: 300px;
    height: 300px;
    border-radius: 50%; / Make it circular /
    object-fit: cover; / Crop image to fit /
    flex-shrink: 0; / Prevent image from shrinking /
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.about-text h3 {
    font-size: 1.8em;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #333;
}

.skills-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap; / Wrap skills to next line if needed /
    gap: 15px;
    margin-top: 20px;
}

.skills-list li {
    background-color: #e9ecef;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    color: #555;
}

3.5 Portfolio Section Styling

CSS Grid is excellent for creating responsive layouts like a portfolio grid.

.portfolio {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); / Responsive grid /
    gap: 30px;
}

.portfolio-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    text-align: center;
}

.portfolio-item:hover {
    transform: translateY(-10px);
}

.portfolio-item img {
    width: 100%;
    height: 220px; / Fixed height for consistency */
    object-fit: cover;
}

.portfolio-item h3 {
    font-size: 1.5em;
    margin: 20px 0 10px;
    color: #333;
}

.portfolio-item p {
    padding: 0 20px;
    margin-bottom: 20px;
    color: #666;
}

3.6 Contact Section Styling

.contact {
    padding: 80px 0;
    background-color: #fff;
    text-align: center