Coding & Web Dev

Building a Responsive Portfolio Website from Scratch

By Poha Web Group June 2026 13 Min Read

In the digital economy, your personal portfolio website is your resume, business card, and proof of capability rolled into one. Whether you are a web developer, digital marketer, freelance designer, or writer, having a dedicated online space showcases your professionalism and projects. Building this portfolio from scratch is also the best way to practice coding.

This tutorial walks you through structuring a modern, single-page responsive portfolio website using semantic HTML5 and styling it using layout properties like CSS Flexbox.

1. The Semantic HTML5 Structure

A good webpage starts with clean, structured markup. HTML5 introduces semantic tags like <header>, <section>, and <footer> to clearly define structural components. Open your text editor, create a file named index.html, and insert the base layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">Jane Doe</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>
    
    <main>
        <section id="hero">
            <h1>Hi, I'm a Digital Creator</h1>
            <p>I build digital solutions that scale.</p>
        </section>
    </main>
</body>
</html>

2. Defining the CSS Layout using CSS Variables

To keep styles organized, create a style.css file and define a color palette using **CSS Variables**. This makes changing colors in the future instant. We will also reset margins and padding to build a predictable layout grid:

/* Style Reset & CSS variables */
:root {
  --primary-color: var(--primary-color);
  --accent-color: #7c3aed;
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --text-color: var(--text-secondary);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
}

3. Responsive Navbars with Flexbox

Flexbox simplifies structural alignment. Let's arrange our navigation header horizontally and add space between elements:

header {
  background-color: var(--primary-color);
  padding: 1.2rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

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

.nav-links a {
  color: #94a3b8;
  text-decoration: none;
  font-weight: 500;
}

.nav-links a:hover {
  color: white;
}

4. Making It Responsive: Media Queries

A website is responsive when it adjusts itself automatically to fit screens of all sizes, from wide desktop displays to narrow smartphone viewports. We achieve this using **CSS Media Queries**:

/* Desktop layout (default styles above) */

/* Mobile styling rules for screens smaller than 768px */
@media (max-width: 768px) {
  .nav-links {
    gap: 0.8rem;
  }
  
  #hero h1 {
    font-size: 2rem;
  }
  
  nav {
    flex-direction: column;
    gap: 1rem;
  }
}

Summary & Best Practices

You have structured and styled a basic responsive portfolio shell! By leveraging semantic elements, CSS variables, and Flexbox, you ensure your code is search-engine friendly, modular, and looks professional on all devices.

To take this to the next level, add a Project section utilizing a grid layout (display: grid) and deploy the completed website on hosting portals like GitHub Pages or Netlify.

Citations & References

Marcotte, E. (2011). Responsive Web Design. A Book Apart.
MDN Web Docs (2026). CSS Flexible Box Layout Guide.