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. We have used ul to create an unordered list of links in nav bar.
• The body section of portfolio consist of a brief description created using p and span tag, buttons and a profile picture of user.

<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.
• We have used nav element selector to style the nav bar. The display property makes it a flexbox. The align-items property centers the nav bar and justify-content is used for even spacing. It sets the margin, padding and width of the nav bar.
• The li style the list items by removing it's default bullets using list-style property and displaying the links horizontally.
• The a styles all the links by removing underlining of links using text-decoration, changing text color and making links appear bold using font-weight property.
• We have used :hover psuedo class with anchor tag, which changes the background color, text color and sets the curved edges upon hovering over the links.
• The .button-cv, .button-gfc styles the buttons. It sets background color, text color, curved edges and a transition effect while changing the background color. The cursor property changes mouse to pointer, reset the left margin to 0, set the padding and removed the border.
• We have changed background color and text color upon hovering over these buttons.
• Then we have set the left and top margin of body section and styled the heading by setting its font size, bottom margin and text color.
• we have used image class to style the div containing image. We have set the max width, height and position of div. We have used bottom and right property to position image in web page.
• At the end we have used icon class to style the image where we have set its height and position. The left and transform property centers the image and clip-path creates a circular shape of image making it look like profile picture.

* {
    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;
    margin-left: 0%;
    border-radius: 5px;
    transition: background-color 0.5s;
    background: black;
    padding: 10px;
    text-decoration: none;
    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;
    text-decoration: none;
    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%);
}

Complete Example Code

<!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;
            margin-left: 0%;
            border-radius: 5px;
            transition: background-color 0.5s;
            background: black;
            padding: 10px;
            text-decoration: none;
            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;
            text-decoration: none;
            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>

Output

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.