Blog Post

How to Build a Responsive Personal Portfolio Website with HTML & CSS

By Rohit Patil | Updated: July 27, 2026

Your resume tells people what you can do, but your portfolio shows them. For software developers, designers, and creatives, having a fast, beautifully designed personal website is the single best way to land a job or secure freelance clients. In this guide, we are going to build a modern, 100% responsive portfolio website from scratch using semantic HTML5 and modern CSS (no bloated frameworks required).

Step 1: The Semantic HTML Structure

Great web design starts with accessible, semantic HTML. Screen readers and search engine bots (like Google) rely on proper tags to understand your page. We'll divide our portfolio into four main sections: Header, Hero, Projects, and Contact.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jane Doe | Full Stack Developer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navbar -->
    <header>
        <nav>
            <div class="logo">JD.</div>
            <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Hero Section -->
    <main>
        <section id="hero" class="hero-section">
            <h1>Hi, I'm Jane Doe.</h1>
            <h2>I build digital experiences.</h2>
            <p>I'm a software engineer specializing in building exceptional web applications.</p>
            <a href="#contact" class="cta-btn">Get in touch</a>
        </section>
        
        <!-- Projects Section -->
        <section id="projects" class="projects-section">
            <h2>Featured Work</h2>
            <div class="project-grid">
                <!-- Project Cards will go here -->
            </div>
        </section>
    </main>
</body>
</html>

Step 2: Modern CSS Typography and Variables

In modern web development, we use CSS Custom Properties (Variables) to define our theme colors globally. This makes it incredibly easy to maintain consistency and add a "Dark Mode" later. We also use the CSS clamp() function for fluid typography that smoothly scales between mobile and desktop without needing media queries.

/* style.css */
:root {
    --bg-color: #0f172a;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent-color: #38bdf8;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Fluid Typography using Clamp */
h1 {
    font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
    margin-bottom: 0.5rem;
}

h2 {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 3rem);
    color: var(--text-secondary);
}

Step 3: Responsive Layouts with CSS Grid and Flexbox

For the navigation bar, we use Flexbox to push the logo to the left and the links to the right. For the project portfolio cards, we use CSS Grid. Grid allows us to create an auto-scaling masonry layout that perfectly adapts to phones, tablets, and massive ultra-wide monitors instantly.

/* Flexbox Navbar */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 5%;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

/* The Magic Auto-Responsive Grid */
.project-grid {
    display: grid;
    /* This single line eliminates the need for media queries! */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 5%;
}

.project-card {
    background: #1e293b;
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    border: 1px solid var(--accent-color);
}

Step 4: Deploying Your Portfolio for Free

Once your HTML and CSS files are looking perfect, don't pay for traditional shared hosting. The modern standard for static sites is deploying to Edge networks. Push your code to a free GitHub repository, and link it to Cloudflare Pages or Netlify. Both services will host your portfolio for absolutely free, provide an SSL certificate automatically, and load your site blazingly fast from data centers around the world.

Keep Reading