vishwa v

Posted on Jun 3

HTML&CSS basic Portfolio Website

#webdev #beginners #html #css

Introduction
This is a basic portfolio website built with HTML and CSS. It includes a header with navigation links, sections for About Me, Projects, and Contact, and a footer. The design uses a clean layout with centered headings, styled navigation, and a beige content area to highlight information. It’s a simple yet effective way to showcase personal details and web development projects.

Implementation 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{
                color: aliceblue;
                /* border: 1px solid; */
                text-align:center;
                /* padding: 20px; */
                margin-bottom: 15px;
            }
            a{
                color:aliceblue;
                text-decoration: none;
                margin-right: 15px;
            }
            nav{

                text-align:center;   
            }
        }
        section{
            background-color: beige;
            border:1px solid;
            margin:auto;
            width:65%;
            padding:20px;
            margin-top: 20px;
            border-radius: 25px;  
        }
        h2{ 
            /* border:20px solid; */
            margin-bottom: 10px;
        }
        ul{
            margin-left: 25px;
        }
        footer{
            p{
                background-color: black;
                color:aliceblue;
                text-align: center;
                padding:10px;
                margin-top: 20px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Vishwa</h1>
        <nav>
        <a href="">About me</a>
        <a href="">project</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: vijay@example.com</p>
    </section>
    <footer>
        <p>© 2026 vishwa</p>
    </footer>
</body>
</html>

Steps

HTML Structure

<!DOCTYPE html> → Declares the document type as HTML5.

<html lang="en"> → Defines the language of the page.

<head> → Contains metadata like title, character set, and CSS styles.

<body> → Holds all the visible content of the webpage.

Header Section

<header> → Used for the top section of the page.

<h1> → Displays the main heading (your name).

<nav> → Contains navigation links for different sections.

<a> → Anchor tags create clickable links.

About Me Section

<section> → Groups related content.

<h2> → Subheading for the section.

<p> → Paragraph describing yourself.

Projects Section

<ul> → Creates an unordered list.

<li> → List items for each project.

Contact Section

Simple section with contact details.

Footer

<footer> → Used for bottom content like copyright.

CSS Styling

Inside <style> you added rules to make the site look nice:

* { padding:0; margin:0; box-sizing:border-box; } → Resets default spacing.

header { background-color:black; padding:20px; } →Styles the header

h1 { color:aliceblue; text-align:center; } → Makes the heading white and centered.

a { color:aliceblue; text-decoration:none; margin-right:15px; } → Styles navigation links.

section { background-color:beige; width:65%; margin:auto; padding:20px; border-radius:25px; } → Creates neat content boxes.

footer p { background-color:black; color:aliceblue; text-align:center; padding:10px; } → Styles the footer.

Output

DEV Community