A personal portfolio website is one of the most important projects for aspiring web developers, designers, freelancers, and students. It serves as your online resume, allowing you to showcase your skills, projects, achievements, and contact information in a professional way. Whether you're applying for jobs or attracting potential clients, a well-designed portfolio can help you make a strong first impression.
In this tutorial, you'll learn how to build a simple, responsive personal portfolio website using HTML, CSS, and JavaScript. We'll create a modern homepage featuring a navigation menu, hero section, about section, skills, projects, and a contact form. Along the way, you'll gain practical experience with page layouts, responsive design, CSS styling, and basic JavaScript for user interaction.
By the end of this guide, you'll have a fully functional portfolio website that you can customize with your own details, projects, and images. This project is beginner-friendly and provides a solid foundation for creating more advanced websites in the future.
Features
- Responsive navigation menu
- Professional hero section
- About Me section
- Skills section
- Project showcase
- Contact form
- Mobile-friendly design
- Smooth and clean layout
- Easy to customize with your own information
Coding Concepts You'll Learn
-
HTML semantic elements (
header,nav,section,footer) - CSS Flexbox and Grid layouts
- Responsive web design with media queries
- Styling buttons, cards, and forms
- JavaScript event listeners
- Form validation basics
- DOM manipulation
<!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>
<h2 class="logo">MyPortfolio</h2>
<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="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Hero -->
<section id="home" class="hero">
<div class="hero-text">
<h1>Hello, I'm <span>KODA TECH</span></h1>
<p>
A passionate Web Developer creating beautiful websites using HTML, CSS, and JavaScript.
</p>
<a href="#projects" class="btn">View My Work</a>
</div>
<div class="hero-image">
<img src="images/profile.jpg" alt="Profile Photo">
</div>
</section>
<!-- About -->
<section id="about">
<h2>About Me</h2>
<p>
I am a front-end developer who enjoys building responsive and user-friendly websites. I love learning new technologies and solving real-world problems through coding.
</p>
</section>
<!-- Skills -->
<section id="skills">
<h2>Skills</h2>
<div class="skills">
<div class="card">HTML5</div>
<div class="card">CSS3</div>
<div class="card">JavaScript</div>
<div class="card">Bootstrap</div>
<div class="card">Responsive Design</div>
<div class="card">Git & GitHub</div>
</div>
</section>
<!-- Projects -->
<section id="projects">
<h2>Projects</h2>
<div class="projects">
<div class="project">
<h3>Calculator App</h3>
<p>A calculator built with HTML, CSS and JavaScript.</p>
</div>
<div class="project">
<h3>Weather App</h3>
<p>Displays live weather using an API.</p>
</div>
<div class="project">
<h3>To-Do List</h3>
<p>A task manager built with JavaScript.</p>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<h2>Contact Me</h2>
<form id="contactForm">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message"></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<footer>
<p>© 2026 My Portfolio. All Rights Reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
style.css
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}
body{
line-height:1.6;
background:#f4f4f4;
}
header{
background:#222;
padding:20px;
position:sticky;
top:0;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
color:white;
}
nav ul{
display:flex;
list-style:none;
}
nav ul li{
margin-left:20px;
}
nav ul li a{
color:white;
text-decoration:none;
}
.hero{
display:flex;
justify-content:space-around;
align-items:center;
padding:80px 10%;
background:white;
}
.hero-text{
max-width:500px;
}
.hero span{
color:#007BFF;
}
.hero-image img{
width:280px;
border-radius:50%;
}
.btn{
display:inline-block;
margin-top:20px;
padding:12px 25px;
background:#007BFF;
color:white;
text-decoration:none;
border-radius:5px;
}
section{
padding:70px 10%;
}
.skills,
.projects{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:30px;
}
.card,
.project{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 5px 10px rgba(0,0,0,.1);
text-align:center;
}
form{
display:flex;
flex-direction:column;
gap:15px;
max-width:500px;
}
input,
textarea{
padding:12px;
border:1px solid #ccc;
border-radius:5px;
}
button{
padding:12px;
background:#007BFF;
color:white;
border:none;
cursor:pointer;
border-radius:5px;
}
button:hover{
background:#0056b3;
}
footer{
text-align:center;
padding:20px;
background:#222;
color:white;
}
@media(max-width:768px){
.hero{
flex-direction:column;
text-align:center;
}
.hero-image{
margin-top:30px;
}
nav{
flex-direction:column;
}
nav ul{
margin-top:15px;
flex-wrap:wrap;
justify-content:center;
}
}
script.js
// Contact Form
document.getElementById("contactForm").addEventListener("submit", function(e){
e.preventDefault();
alert("Thank you for contacting me! I will get back to you soon.");
this.reset();
});
Tags
coding-tutorials