How to Create a Responsive Portfolio Website Using HTML and CSS

Creating a personal portfolio website is one of the best ways to showcase your skills, experience, and achievements as a web developer. In this article, we will walk through a complete portfolio website built using HTML and CSS, explaining the structure, styling, and responsive design concepts used in the code.

This project is ideal for beginners who want to understand how a real-world portfolio layout is created from scratch without using any frameworks or JavaScript.

Project Overview

The portfolio website includes the following sections:

Header (Name and role)
Navigation menu
About section
Professional summary
Work experience
Education
Achievements
Footer

The website is fully responsive and adapts well to different screen sizes using modern CSS techniques.

HTML Structure Explained

1. Basic HTML Setup

The HTML file starts with the standard document structure:

<!DOCTYPE html> ensures the browser uses HTML5
<meta charset="UTF-8"> supports all characters
<meta name="viewport"> ensures responsiveness on mobile devices
The CSS file is linked using <link rel="stylesheet">

This setup is essential for modern, responsive web development.

2. Header Section

The header contains the developer’s name and professional title.


<header>
    <h1>John Doe</h1>
    <p>Web Developer | Designer | Programmer</p>
</header>

<h1> represents the main heading of the page
<p> describes the role or profession
This section gives a strong first impression to visitors

3. Navigation Menu

The navigation bar allows users to move smoothly between sections.


<nav>
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#summary">Summary</a></li>
        <li><a href="#experience">Experience</a></li>
        <li><a href="#education">Education</a></li>
        <li><a href="#achievements">Achievements</a></li>
    </ul>
</nav>

Each link uses an anchor (#id) to scroll to a specific section on the page, improving usability and accessibility.

4. Main Content Area

All primary sections are wrapped inside the <main> element, which helps search engines and screen readers understand where the main content starts.

5. About Section

This section briefly introduces the developer.


<section id="about">
    <h2>About Me</h2>
    <p>...</p>
</section>

<section> organizes content logically
<h2> defines a clear hierarchy
This section helps visitors quickly understand who you are

6. Professional Summary

The summary highlights technical skills and work style.

This is especially useful for recruiters who want a quick overview without reading the entire page.

7. Experience Section

Work experience is displayed using reusable card components.


<div class="card">
    <h3>Front-End Developer</h3>
    <span>ABC Company | 2022 – Present</span>
    <ul>
        <li>Developed responsive web pages</li>
        <li>Collaborated with teams</li>
    </ul>
</div>

Using cards makes the layout clean, consistent, and easy to scan.

8. Education Section

Education details are also displayed using the same card design, maintaining visual consistency across the website.

9. Achievements Section

Achievements are listed using an unordered list:


<ul class="achievement-list">
    <li>Winner of College Web Design Competition</li>
    <li>Certified Front-End Developer</li>
</ul>

This format is ideal for highlighting accomplishments clearly and concisely.

10. Footer

The footer contains copyright information.


<footer>
    <p>© 2025 John Doe. All Rights Reserved.</p>
</footer>

It gives the website a professional finish and legal clarity.

CSS Styling Explained

1. CSS Reset

The universal selector removes default margins and paddings:


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

This ensures consistent styling across all browsers.

2. Body Styling

The body uses a light background and readable text color to enhance readability.

3. Header and Navigation Styling

Dark background colors create contrast
Centered text improves visual balance
Flexbox is used for navigation alignment


nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

Flexbox ensures the menu adjusts properly on smaller screens.

4. Card Design

Cards are styled with:

White background
Rounded corners
Box shadow for depth


.card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

This design pattern is widely used in modern websites.

5. Responsive Design

Media queries ensure the website works well on mobile devices.


@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
}

Navigation becomes vertical
Font sizes adjust
Content remains readable on smaller screens

Why This Portfolio Structure Works Well

Clean and semantic HTML improves accessibility
CSS Flexbox ensures responsive layouts
Reusable components reduce code duplication
Simple design keeps focus on content
Suitable for beginners and professionals alike

Conclusion

This portfolio website demonstrates how powerful HTML and CSS can be when used correctly. Without relying on external libraries or JavaScript, we created a clean, responsive, and professional portfolio layout suitable for showcasing skills and experience.

If you are a beginner, this project is a great starting point. You can further enhance it by adding animations, a projects section, or JavaScript interactivity as you grow.

Iframe Dev

Search This Blog