🧩 Introduction

Every web developer needs a personal portfolio website.
It’s how you showcase your skills, projects, and personality online.

In this beginner project, you’ll learn how to create a simple, clean, and responsive portfolio website using only HTML and CSS. This project is perfect if you want something real you can later improve or convert into WordPress.

🛠️ What You’ll Build

This portfolio includes:

Hero section with name and role
About section
Skills list
Projects section
Contact section
Responsive layout for mobile

📁 Project Structure

portfolio/
│
├── index.html
└── style.css

🧱 Step 1: HTML Structure

Create index.html

<!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 class="hero">
  <h1>John Doe</h1>
  <p>Frontend Web Developer</p>
</header>

<section class="about">
  <h2>About Me</h2>
  <p>
    I am a beginner web developer learning HTML, CSS, and modern web design.
    I love building clean and responsive websites.
  </p>
</section>

<section class="skills">
  <h2>Skills</h2>
  <ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>Responsive Design</li>
    <li>Basic JavaScript</li>
  </ul>
</section>

<section class="projects">
  <h2>Projects</h2>
  <div class="project-grid">
    <div class="project">Landing Page</div>
    <div class="project">Portfolio Website</div>
    <div class="project">Simple Blog Layout</div>
  </div>
</section>

<section class="contact">
  <h2>Contact</h2>
  <p>Email: [email protected]</p>
</section>

<footer class="footer">
  <p>© 2026 John Doe</p>
</footer>

</body>
</html>

🎨 Step 2: CSS Styling

Create style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  line-height: 1.6;
  color: #0f172a;
}

.hero {
  background: #2563eb;
  color: #ffffff;
  text-align: center;
  padding: 70px 20px;
}

.hero h1 {
  font-size: 40px;
}

.hero p {
  font-size: 18px;
  margin-top: 8px;
}

section {
  padding: 50px 20px;
  max-width: 900px;
  margin: auto;
}

h2 {
  margin-bottom: 15px;
  color: #2563eb;
}

.skills ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skills li {
  background: #f1f5f9;
  padding: 8px 14px;
  border-radius: 6px;
}

.project-grid {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.project {
  flex: 1;
  min-width: 200px;
  background: #f8fafc;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

.contact {
  text-align: center;
}

.footer {
  background: #0f172a;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}

📱 Step 3: Responsive Layout

Add this at the bottom of style.css

@media (max-width: 768px) {
  .project-grid {
    flex-direction: column;
  }

  .hero h1 {
    font-size: 32px;
  }
}

✅ What You Learned

How to structure a real portfolio website
How to organize sections cleanly
How to build responsive layouts with Flexbox
How to create a project you can actually use

🚀 How to Improve This Portfolio

Next upgrades you can try:

Add a navigation menu
Replace project boxes with real screenshots
Add a contact form
Animate sections using CSS
Convert this into a WordPress theme

🔗 Related Beginner Projects

Build a Responsive Landing Page
Create a Simple Blog Layout Using HTML & CSS
Design a Contact Form Without JavaScript

🏁 Final Thoughts

This portfolio project is a must-have for beginners. Even a simple portfolio makes you look more professional and confident.

Keep building small, real projects like this. That’s how developers actually grow.

Create a Personal Portfolio Website Using HTML & CSS | Beginner Project