Portfolio Building with HTML & CSS

#webdev #programming #css #html

Portfolio

A portfolio is a visual and detailed representation of your professional skills, projects, and experiences. Unlike a traditional CV, which is primarily text-based, a portfolio showcases your work through images, descriptions, and other multimedia elements. It serves as a platform to highlight your achievements and capabilities, making it easier for potential employers, clients, or collaborators to understand your expertise.
Importance of a Portfolio
Creating a portfolio is crucial for growing your online presence and getting noticed in your field. It can help you secure jobs, freelance gigs, or internships by showcasing your skills and projects in a visually appealing manner. A well-designed portfolio can leave a lasting impression on hiring managers, recruiters, and potential clients.
Who Should Have a Portfolio ?
Portfolios are beneficial for various professionals, including software developers, UX designers, graphic designers, photographers, marketing professionals, architects, and writers. Essentially, anyone who wants to showcase their work and skills can benefit from having a portfolio.
How to create ?
By using HTML and CSS we will able to create a perfect portfolio webpage in our browsers, with the help of HTML tags and CSS tags for styling creates a perfect Portfolio.

Firstly we have to plan a layout of our Portfolio, like i want a one header section and three body sections and one footer section for my Portfolio.
Next we have to open a code running environment(visual studio code) for our code to create a live page in web browsers.
And then, start writing a code inside a <body> to dispay a content in body section.
After that, inside the <body> we have to create our first header section. in the <header>section, we have to write our name with bold letters using <h1>.
After writing our name in header, we have to move our name to center for best view by using text-align: center.
text-align: center tag is used to align the texts from any direction to move center of the box. Not only used for center we can use it for align left or right directions also.
In header section we want to add some links by using <a href=""> tag and inside the double quotes we insert our link for redirection.
If we want highlight our <header> section, set a background colors by using background color: black; comments. for adding text colors we use color: white; to highlight the texts.
After we complete the header section move to <body> sections, inside the sections we write our contents like about me, Projects, Contact details and for that we use <h2> for secondary headings and <p> for word contents.
And we use <ul> tag for unordered list, inside that we use <li> list items tag to enter our item names.
we use border: 1px solid tag for border line of box, in that we can add colors by this border: 1px solid red comment.
Next we use box-sizing: border-box comment for mention or view the whole box.
And then, we see border-radius:20% comment to curve or round the box.
After completing the <body> sections we move to our last one <footer> section, in that section we use <p> tag to display the content in the webpage.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing:border-box;
        }
        header{
            background-color:black;
            padding:20px;
            h1{
                text-align:center;
                color:white;
                margin-bottom:15px;
            }
            nav{
                text-align:center;
            }a{
                    color:white;
                    text-decoration:none;
                    margin-right:15px;
            }
        }
        section{
            width:65%;
            margin:auto;
            margin-top:20px;
            padding:20px;
            background-color:gainsboro;
            border-radius:25px;
        }
        h2{
            margin-bottom:15px;
        }
        ul{
            margin-left: 25px;
        }
        footer{
            text-align:center;
            background-color:black;
            color:white;
            padding:10px;
            margin-top:20px;        }
    </style>
</head>

<body>
    <header>
        <h1>Kavin loyola S</h1>
        <nav>
            <a href="">About me</a>
            <a href="">Projects</a>
            <a href="">Contact</a>
            <a href="">Login page</a>
        </nav>
    </header>
    <section>
        <h2>About Me</h2>
        <p>I am a web developer passionate about building beautiful and functional websites.</p>
    </section>
    <section>
        <h2>Projects</h2>
        <ul>
            <li>Portfolio Website</li>
            <li>Landing Page</li>
            <li>Blog Template</li>
        </ul>
    </section>
    <section>
        <h2>Contact</h2>
        <p>Email: kavinloyola777@gmail.com</p>
    </section>
    <footer>
        <p>© 2026 kavin</p>
    </footer>
</body>
</html>

Output

DEV Community

Portfolio Building with HTML & CSS

Portfolio

Top comments (0)