Design a Portfolio Webpage using HTML and CSS

To design a portfolio webpage using HTML and CSS can be useful to showcase your best works and attract attention of professionals in collaborating or hiring you. Portfolio website serves as a platform to display your work and demonstrate your skills. It has the same purpose as a CV (Curriculum vitae). The portfolio website will showcase them with engaging visual images and often more detailed than a hand-written CV.

In this article, we will learn and understand how we can design a portfolio webpage using HTML and CSS through stepwise explanation and example code.

Why Create a Portfolio Website?

There are several reasons for creating a portfolio website such as

• To showcase your best work and emphasize your abilities in front of potential employers, clients, and collaborators.
• A portfolio website assists in building your personal brand and establishing yourself as an expert in your field.
• It facilitates networking with other professionals, by sharing this website with others they can explore your work and reach out to you if they are interested in collaborating or hiring you.

Basic Layout of a Portfolio Website

In creating a portfolio website layout that grabs the attention of clients, or collaborators, certain sections should be included as follows

• Homepage: It is initial point of contact for visitors, thus make a good first impression and include an introduction about yourself along with your skills and past work engagements as highlights.
• About Me: To provide visitors detailed information regarding your educational background as well as prior experiences.
• Projects: Include your projects with description and project links.
• Contact Me: Add your professional contact details such as Email, GitHub profile, LinkedIn, YouTube, etc. Do not include your personal contacts.

Steps to Design a Portfolio Webpage

We will be following below mentioned steps to design portfolio webpage using HTML and CSS

• Creating Layout of Portfolio Using HTML
• Styling Portfolio with CSS

Creating Layout of Portfolio Using HTML

We have used two div elements to define header and body section of portfolio. The header section of portfolio consist of a nav bar with various links and two buttons created using nav, anchor and button tag respectively and a logo using img tag.

<div class="header">
    <nav>
        <a href="#"><img src="/images/logo.png?v2" alt="logo"></a>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">CONTACT ME</a></li>
            <li><button type="button" class="button-gfc">Get Free Consultant</button></li>
            <li><button type="button" class="button-cv">DOWNLOAD CV</button></li>
        </ul>
    </nav>
    <div class="body">
        <p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
        <h1>Hello <br> I'm <span class="green">Tutorials</span> <span>Point.</span></h1>
        <p class="demo2">From concept to deployment, I bring ideas<br> to life as a versatile full stack developer...</p>
        <button type="button" class="button-lrn">LEARN MORE</button>
        <button type="button" class="button-hire">HIRE ME</button>
    </div>
    <div class="image">
        <img src="/assets/questions/media/1269191-1730184507.jpg" class="icon" alt="Profile Picture">
    </div>
</div>

Styling Portfolio with CSS

We have used universal selector to reset the margin and padding to 0 and set the font of whole document. The header class set the background-color and dimension of header using CSS height and width property.

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.header {
    width: 100%;
    height: 100vh;
    background-color: lightblue;
}
nav {
    display: flex;
    margin: auto;
    width: 90%;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
}

Styling Navigation and Buttons

The navigation styles include removing default list styling and adding hover effects to links and buttons

li {
    display: inline-block;
    list-style: none;
    margin: 10px;
}
a {
    text-decoration: none;
    color: black;
    font-weight: bolder;
    padding: 5px;
}
a:hover {
    background-color: seagreen;
    border-radius: 2px;
    color: white;
}
.button-cv, .button-gfc {
    display: inline-block;
    border-radius: 5px;
    transition: background-color 0.5s;
    background: black;
    padding: 10px;
    font-weight: bold;
    color: white;
    border: none;
    cursor: pointer;
}
.button-gfc {
    background: lightsalmon;
}

Complete Example

Here is the complete portfolio webpage combining HTML structure with CSS styling

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Portfolio</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
        .header {
            width: 100%;
            height: 100vh;
            background-color: lightblue;
        }
        nav {
            display: flex;
            margin: auto;
            width: 90%;
            padding: 20px;
            align-items: center;
            justify-content: space-between;
        }
        li {
            display: inline-block;
            list-style: none;
            margin: 10px;
        }
        a {
            text-decoration: none;
            color: black;
            font-weight: bolder;
            padding: 5px;
        }
        a:hover {
            background-color: seagreen;
            border-radius: 2px;
            color: white;
        }
        .button-cv, .button-gfc {
            display: inline-block;
            border-radius: 5px;
            transition: background-color 0.5s;
            background: black;
            padding: 10px;
            font-weight: bold;
            color: white;
            border: none;
            cursor: pointer;
        }
        .button-cv:hover {
            background-color: white;
            color: black;
        }
        .button-gfc {
            background: lightsalmon;
        }
        .button-gfc:hover {
            background-color: white;
            color: black;
        }
        .body {
            margin-left: 100px;
            margin-top: 100px;
        }
        h1 {
            font-size: 30px;
            color: black;
            margin-bottom: 20px;
        }
        .demo1 {
            color: orange;
            margin-bottom: 30px;
        }
        .demo2 {
            line-height: 20px;
        }
        .button-lrn, .button-hire {
            background: lightsalmon;
            padding: 10px 12px;
            font-weight: bold;
            color: whitesmoke;
            display: inline-block;
            margin: 30px 8px;
            border-radius: 5px;
            transition: background-color 0.3s;
            border: none;
            letter-spacing: 1px;
            cursor: pointer;
        }
        .button-lrn:hover {
            background-color: whitesmoke;
            color: black;
        }
        .button-hire {
            background: black;
        }
        .button-hire:hover {
            background-color: seagreen;
        }
        .green {
            color: seagreen;
        }
        .image {
            max-width: fit-content;
            height: 70%;
            position: absolute;
            bottom: 25%;
            right: 25%;
        }
        .icon {
            height: 120%;
            position: absolute;
            left: 50%;
            transform: translate(-60%);
            clip-path: circle(26%);
        }
    </style>
</head>
<body>
    <div class="header">
        <nav>
            <a href="#"><img src="/images/logo.png?v2" alt="logo"></a>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">PROJECTS</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">CONTACT ME</a></li>
                <li><button type="button" class="button-gfc">Get Free Consultant</button></li>
                <li><button type="button" class="button-cv">DOWNLOAD CV</button></li>
            </ul>
        </nav>
        <div class="body">
            <p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
            <h1>Hello <br> I'm <span class="green">Tutorials</span> <span>Point.</span></h1>
            <p class="demo2">From concept to deployment, I bring ideas<br> to life as a versatile full stack developer...</p>
            <button type="button" class="button-lrn">LEARN MORE</button>
            <button type="button" class="button-hire">HIRE ME</button>
        </div>
        <div class="image">
            <img src="/assets/questions/media/1269191-1730184507.jpg" class="icon" alt="Profile Picture">
        </div>
    </div>
</body>
</html>

A professional portfolio webpage with a light blue background, featuring a navigation bar with links and buttons, a main content area with an introduction and call-to-action buttons, and a circular profile picture positioned on the right side. The layout is responsive and includes hover effects on interactive elements.

Conclusion

In this article, we learnt and understood to design portfolio webpage using HTML and CSS. We have designed a basic portfolio webpage that consist of nav bar, links, logo, buttons and a profile picture with modern styling and interactive hover effects.