Build a Responsive Portfolio Website Using HTML and CSS

Last Updated : 07 Jun, 2025

Nowadays, having a responsive portfolio website is crucial to effectively present your work and expertise. This guide will walk you through the process of creating a clean and functional portfolio using HTML and CSS.

What You Will Build

By the end of this tutorial, you'll have a responsive portfolio website featuring:

A navigation bar
A hero section
An about section
Academic Qualifications

This design will be mobile-friendly, ensuring a smooth user experience across various devices.

Portfolio Source Code

Let's start by setting up the HTML structure for our portfolio website.

Filename: index.html

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio of John Doe</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1 style="text-align:center;">John Doe</h1>
        <p style="text-align:center;">Home | Projects | Blogs | Contact</p>
    </header>
    <h2 style="text-align:center;">Web Developer and Designer</h2>
    <table border="1" width="100%">
        <tr>
            <td>
                <h3>Portfolio Highlights</h3>
                <ul>
                    <li>Responsive HTML Layout</li>
                    <li>E-commerce Storefront</li>
                    <li>Interactive Form Design</li>
                    <li>Event Countdown Widget</li>
                    <li>Prototype Landing Pages</li>
                </ul>
            </td>
            <td>
                <h3>Career Achievements</h3>
                <p>Frontend Developer [Intern] at XYZ<br>Headed major product redesigns resulting in a 40% increase in user engagement.<br><a href="#">View My LinkedIn Profile</a></p>
                <h3>Community Involvement</h3>
                <p>Active participant in local and online developer forums. Regularly contribute to web development blogs and GitHub projects.<br><a href="#">Visit My GitHub</a></p>
            </td>
            <td>
                <h3>Academic Qualifications</h3>
                <p>B.Tech (Computer Science) from ABC University</p>
                <p>Specializations:</p>
                <ul>
                    <li>Systems Analysis</li>
                    <li>Advanced JavaScript Techniques</li>
                    <li>Web Accessibility Standards</li>
                    <li>Performance Optimization in Web Applications</li>
                    <li>Cloud Computing Infrastructure</li>
                    <li>Security in Web Applications</li>
                    <li>Advanced Algorithms</li>
                </ul>
            </td>
        </tr>
    </table>
    <h3>Peer Reviews</h3>
    <table border="1" width="100%">
        <tr>
            <td>John Doe consistently delivers high-quality, innovative solutions that exceed project expectations. - Steven, Project Lead</td>
            <td>John Doe is known for his precise attention to detail and his ability to mentor younger developers. - David, UI Designer</td>
            <td>John's approach to problem-solving has been instrumental in our success. - Sarah, Frontend Developer</td>
        </tr>
    </table>
    <footer style="text-align:center;">
        © [2025] All rights reserved by John Doe
    </footer>
</body>
</html>

Portfolio HTML Output (CSS Excluded):

Now, let's add some basic CSS to style our portfolio and make it responsive.

Filename: styles.css

CSS

/* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header styling */
header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

header p {
    font-size: 1.1em;
}

header p a {
    color: #3498db;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s;
}

header p a:hover {
    color: #2980b9;
}

/* Main heading */
h2 {
    color: #2c3e50;
    margin: 20px 0;
    font-size: 1.8em;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

table td {
    padding: 20px;
    vertical-align: top;
    border: 1px solid #ddd;
}

h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.4em;
}

/* List styling */
ul {
    list-style-type: none;
    padding-left: 20px;
}

ul li {
    margin-bottom: 10px;
    position: relative;
}

ul li::before {
    content: '•';
    color: #3498db;
    position: absolute;
    left: -20px;
}

/* Links */
a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* Paragraph spacing */
p {
    margin-bottom: 10px;
}

/* Footer styling */
footer {
    background-color: #2c3e50;
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

/* Responsive design */
@media (max-width: 768px) {
    table {
        display: block;
    }
    
    table tr {
        display: block;
        margin-bottom: 20px;
    }
    
    table td {
        display: block;
        border: none;
        border-bottom: 1px solid #ddd;
    }
    
    header h1 {
        font-size: 2em;
    }
    
    h2 {
        font-size: 1.5em;
    }
    
    h3 {
        font-size: 1.2em;
    }
}

Explanation

1. Header: Name and Navigation Links

The <header> contains John Doe's name and navigation links to other sections of the website. The background is styled with a dark color scheme (using background-color), and the text is centered using text-align. The links are styled using anchor tags (<a>) with a hover effect that changes the link color on interaction.

2. Main Heading: "Web Developer and Designer"

The <h2> element introduces John’s profession. It's styled with a specific font size (font-size: 1.8em) and color (color: #2c3e50). Margins are applied using margin for proper spacing around the text.

3. Portfolio Highlights, Career Achievements, and Academic Qualifications

The content is structured within a <table> layout, organizing sections into columns using table cells (<td>).

Portfolio Highlights uses an unordered list (<ul>) with custom bullets created using the ::before pseudo-element.
Career Achievements and Academic Qualifications are presented using paragraphs (<p>) and lists to break down the content.

The table utilizes CSS properties like border-collapse, box-shadow, and padding for styling, ensuring a clean, well-structured layout.

4. Peer Reviews

Similar to the previous table, this section uses <table> and <td> elements to display testimonials in separate columns. Each testimonial is styled with padding and borders to keep the layout organized.

The <footer> at the bottom contains a copyright notice. It's styled with a dark background and white text, matching the header for design consistency. The footer is centered using text-align: center.

6. Responsive Design

A media query (@media) is used to adjust the layout for smaller screens. It modifies the table layout from horizontal columns to a block format, making each row stack vertically. Additionally, font size is reduced for better readability on mobile devices.

Conclusion

In this tutorial, we've created a simple, responsive portfolio website using HTML and CSS. Note, your HTML and CSS files should be in the same folder. This foundation can be expanded with more advanced features like JavaScript interactivity, animations, and backend integration as you progress in your web development journey.

Build a Responsive Portfolio Website Using HTML and CSS

abhivir1lur

Improve

Article Tags :

Build a Responsive Portfolio Website Using HTML and CSS

What You Will Build

Portfolio Source Code