Portfolio Project

Build a personal portfolio website to showcase your skills, projects, and contact information.

Project Overview

This project will guide you through creating a modern, responsive portfolio website using HTML and CSS. You'll learn to structure your content, style your site, and make it visually appealing and accessible.

Responsive layout with navigation
About, Skills, Projects, and Contact sections
Modern design with CSS Grid and Flexbox
Accessible and easy to maintain

Estimated Time

Beginner: 4-6 hours | Intermediate: 3-4 hours | Advanced: 2-3 hours

Difficulty Level: Beginner to Intermediate

Step-by-Step Implementation

1 Create the HTML Structure

HTML Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <h1>John Doe</h1>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home" class="hero">
            <h2>Welcome! I'm John Doe</h2>
            <p>Web Developer & Designer</p>
        </section>
        <section id="about">
            <h2>About Me</h2>
            <p>I'm a passionate web developer with experience in HTML, CSS, and JavaScript.</p>
        </section>
        <section id="skills">
            <h2>My Skills</h2>
            <div class="skills-grid">
                <div class="skill">HTML</div>
                <div class="skill">CSS</div>
                <div class="skill">JavaScript</div>
            </div>
        </section>
        <section id="contact">
            <h2>Contact</h2>
            <form>
                <input type="text" placeholder="Your Name" required>
                <input type="email" placeholder="Your Email" required>
                <textarea placeholder="Your Message" required></textarea>
                <button type="submit">Send</button>
            </form>
        </section>
    </main>
    <footer>
        <p>© 2024 John Doe. All rights reserved.</p>
    </footer>
</body>
</html>

2 Add CSS for Layout & Design

Basic CSS Example

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background: #f8f9fa;
    color: #333;
}
header {
    background: linear-gradient(90deg, #667eea, #764ba2);
    color: white;
    padding: 1.5rem 0;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}
nav h1 {
    font-size: 2rem;
    margin: 0;
}
nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}
nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
nav a:hover {
    color: #f093fb;
}
.hero {
    text-align: center;
    padding: 5rem 2rem 3rem;
    background: white;
}
.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.hero p {
    font-size: 1.2rem;
    color: #666;
}
section {
    max-width: 900px;
    margin: 2rem auto;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.skills-grid {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}
.skill {
    background: #667eea;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
}
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
input, textarea {
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1rem;
}
button[type="submit"] {
    background: linear-gradient(90deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
button[type="submit"]:hover {
    background: #764ba2;
}
footer {
    text-align: center;
    padding: 2rem 0 1rem;
    color: #666;
    background: none;
}
@media (max-width: 700px) {
    nav {
        flex-direction: column;
        gap: 1rem;
    }
    .skills-grid {
        flex-direction: column;
        align-items: center;
    }
    section {
        padding: 1rem;
    }
}

3 Add Content & Polish

                    Tips for Content
                    Write a short, engaging bio in the About section
List your top skills and technologies
Showcase 2-3 projects with links and screenshots (add a Projects section if you wish)
Make the contact form functional with a service or mailto link
Use consistent colors, spacing, and font sizes

                

4 Test Responsiveness & Accessibility

                    Checklist
                    Test on mobile, tablet, and desktop
Check keyboard navigation and focus states
Use semantic HTML for all sections
Ensure color contrast is accessible
Validate your HTML and CSS

                