Build a Responsive Portfolio Website with HTML & CSS – Beginner’s Step‑by‑Step Guide

Welcome! If you’ve ever wanted a sleek online showcase for your projects but felt intimidated by web development, you’re in the right place. In this guide we’ll build a fully responsive portfolio site using only HTML and CSS—no JavaScript required. By the end you’ll have a polished, mobile‑friendly site you can host on any static web host, and you’ll understand the core concepts that power responsive layouts. Let’s dive in.

What You’ll Need

• A text editor (VS Code, Sublime Text, or even Notepad++)
• A modern web browser for testing (Chrome, Firefox, Edge, etc.)
• Basic knowledge of HTML tags and CSS properties
• Optional: A local development server like Live Server extension for VS Code

Step 1: Set Up Your Project Folder

Create a new folder on your computer called portfolio. Inside it, add two sub‑folders: css for stylesheets and images for any pictures you’ll use. Finally, create an index.html file in the root of the folder. Your structure should look like this:

portfolio/
│   index.html
│
├── css/
│   └── style.css
└── images/
    └── profile.jpg

Step 2: Create the Basic HTML Skeleton

Open index.html and paste the following boilerplate. It includes the meta viewport tag, which is essential for responsive design.

<!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="css/style.css">
</head>
<body>
    <header>
        <nav>
            <ul class="nav-list">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="home" class="hero">
        <h1>Hello, I’m Jane Doe</h1>
        <p>Front‑end developer & UI enthusiast</p>
    </section>

    <section id="about" class="about">
        <h2>About Me</h2>
        <p>[Short bio goes here.]</p>
    </section>

    <section id="projects" class="projects">
        <h2>My Work</h2>
        <div class="grid">
            
        </div>
    </section>

    <section id="contact" class="contact">
        <h2>Get In Touch</h2>
        <p>Email: [email protected]</p>
    </section>

    <footer>
        <p>&copy; 2026 Jane Doe. All rights reserved.</p>
    </footer>
</body>
</html>

Step 3: Add a Navigation Bar

Open css/style.css and start by resetting some default browser styles, then style the navigation bar. The following CSS makes the menu horizontal and adds a simple hover effect.

/* 1️⃣ Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 2️⃣ Navigation */
header {
    background: #222;
    padding: 1rem 0;
}
nav .nav-list {
    display: flex;
    justify-content: center;
    list-style: none;
}
nav .nav-list li a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: background 0.3s;
}
nav .nav-list li a:hover {
    background: #555;
    border-radius: 4px;
}

Step 4: Style the Layout with Flexbox

Flexbox is perfect for the hero section and the project grid. Add the following rules to keep the hero content centered and to create a responsive card layout.

/* Hero */
.hero {
    background: url('../images/hero-bg.jpg') no-repeat center/cover;
    color: #fff;
    text-align: center;
    padding: 6rem 1rem;
}

/* Projects grid */
.projects .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    padding: 2rem;
}
.project-card {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 300px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.3s;
}
.project-card:hover {
    transform: translateY(-5px);
}

Step 5: Make It Responsive with Media Queries

Now we’ll ensure the site looks great on tablets and phones. Place the media queries at the bottom of style.css. The breakpoints used are common: 900px for tablets and 600px for phones.

/* 3️⃣ Media Queries */
@media (max-width: 900px) {
    nav .nav-list {
        flex-direction: column;
    }
    .hero {
        padding: 4rem 1rem;
    }
    .projects .grid {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 600px) {
    .hero h1 {
        font-size: 1.8rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .project-card {
        width: 90%;
    }
}

Step 6: Polish with Finishing Touches

Add a few extra details to make the portfolio feel professional:

• Include a smooth scroll effect using scroll-behavior: smooth; on the html element.
• Use :focus styles for accessibility on navigation links.
• Compress images (use tools like TinyPNG) to improve load time.
• Validate your HTML with the W3C validator to catch stray tags.

html {
    scroll-behavior: smooth;
}
nav .nav-list li a:focus {
    outline: 2px solid #fff;
    background: #444;
}

Common Mistakes to Avoid

Even beginners slip into habits that break responsiveness. Here are the most frequent errors and how to prevent them:

• Forgetting the viewport meta tag. Without <meta name="viewport" content="width=device-width, initial-scale=1.0"> the page will render at a fixed width on mobile devices.
• Using fixed widths for containers. Rely on percentages, max-width, or Flexbox instead of width: 800px.
• Over‑nesting selectors. Deep selector chains increase specificity and make later overrides difficult.
• Not testing on real devices. Emulators are helpful, but real‑world testing catches touch‑target size issues.

Tips and Tricks

Boost your workflow and site quality with these quick tips:

• Use CSS variables for colors and spacing; it keeps your stylesheet consistent.
• Leverage display: grid for complex layouts—Flexbox works great for one‑dimensional arrangements, while Grid shines with two‑dimensional layouts.
• Apply object-fit: cover; to images so they fill their containers without distortion.
• Enable prefers‑reduced‑motion media query to respect users who disable animations.

Frequently Asked Questions

Do I need JavaScript for a responsive portfolio?

No. CSS media queries, Flexbox, and Grid can handle most layout changes. JavaScript is optional for advanced interactions like sliders.

Can I host this site for free?

Absolutely. Services like GitHub Pages, Netlify, or Cloudflare Pages let you deploy static HTML/CSS sites at no cost.

How do I add a dark‑mode toggle?

Use the @media (prefers-color-scheme: dark) query to define dark‑mode colors, then optionally add a JavaScript toggle that adds a .dark class to html for manual switching.

Conclusion

Building a responsive portfolio site with just HTML and CSS is an excellent way to cement foundational web‑development skills. By following the steps above, you now have a live, mobile‑friendly showcase that you can expand with new projects, animations, or even a blog. Keep experimenting, validate often, and remember that the best way to learn is by building—so start adding your own flair today!

Photo by Lee Campbell on Unsplash