How to Build a Simple Portfolio Page Using CSS

A portfolio website showcases your skills, projects, and personality professionally. In this tutorial, you’ll learn how to build a simple, clean, and responsive portfolio page step-by-step using basic HTML and CSS.

Step 1: HTML Structure for Portfolio

Create a basic layout including a header, navigation, about section, portfolio gallery, and footer.

HTML:

<body>
    <header>
        <h1>Your Name</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <section id="about">
        <h2>About Me</h2>
        <p>A short description about yourself and your skills.</p>
    </section>

    <section id="projects">
        <h2>My Projects</h2>
        <div class="gallery">
            <div class="project-card">
                <img src="project1.jpg" alt="Project 1">
                <h3>Project Title</h3>
            </div>
            <div class="project-card">
                <img src="project2.jpg" alt="Project 2">
                <h3>Project Title</h3>
            </div>
            <!-- Add more projects here -->
        </div>
    </section>

    <footer id="contact">
        <h2>Contact Me</h2>
        <p>Email: your.email@example.com</p>
    </footer>
</body>

Step 2: CSS for Basic Styling

Now style your layout using CSS:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

header, footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 20px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

nav a:hover {
    color: #f4b41a;
}

section {
    padding: 40px 20px;
}

.gallery {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.project-card {
    width: 300px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #fff;
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
}

.project-card img {
    width: 100%;
}

.project-card h3 {
    padding: 15px;
    margin: 0;
}

Step 3: Make Your Portfolio Responsive

Ensure your portfolio looks great on smaller screens by adding media queries:

@media (max-width: 768px) {
    .gallery {
        flex-direction: column;
        align-items: center;
    }

    nav a {
        display: block;
        margin: 5px 0;
    }
}

Step 4: Add Simple CSS Animations

Enhance the interactivity with a fade-in effect for sections:

section {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Step 5: Tips for a Great Portfolio Page

Keep your layout clean and simple.
Choose professional images and clear project titles.
Ensure easy navigation between sections.
Include your best projects only—quality over quantity.

Conclusion

Building a portfolio website doesn’t have to be complicated. Follow these easy steps using basic CSS and HTML to showcase your skills and projects professionally. Start your portfolio now to make a strong online presence.

Harshit Sharma

Harshit Sharma

How to Build a Simple Portfolio Page Using CSS