🌐 How to Make Your Own Portfolio Website (Beginner → Intermediate Guide)
🌐 How to Make Your Own Portfolio Website (Beginner → Intermediate Guide)
A portfolio website is your digital identity. It’s not just about showing off projects — it’s proof that you can build, design, and maintain something on the web. Whether you are a student, developer, or designer, your portfolio is the first thing people will check before hiring you or collaborating with you.
In this 2,000-word tutorial, I’ll take you step by step from zero to a live portfolio site. We’ll use only HTML, CSS, and a little bit of JavaScript. No frameworks, no shortcuts — just the raw web fundamentals you can build on forever.
📌 What You’ll Learn
- ✅ How to structure a portfolio website with HTML
- ✅ How to style it with CSS (responsive design)
- ✅ How to add interactivity with JavaScript
- ✅ How to host it online for free
By the end, you’ll have your own professional-looking portfolio website, ready to share with the world.
🧱 Step 1: Setting Up the Project
First, let’s create the folder structure for our portfolio project. Open your editor (VS Code, Sublime, etc.)
and create a new folder called portfolio-website. Inside it, make three files:
portfolio-website/ ├── index.html ├── style.css └── script.js
The index.html will hold the structure, style.css will make it look beautiful,
and script.js will add some interactivity.
📝 Step 2: Writing the Basic HTML
Let’s start with a simple HTML boilerplate. Copy this into 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 and Navigation -->
<header>
<nav>
<h1>MyPortfolio</h1>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section id="home">
<h2>Hi, I’m <span>Your Name</span></h2>
<p>Aspiring Web Developer | Frontend Enthusiast</p>
</section>
<!-- About Section -->
<section id="about">
<h2>About Me</h2>
<p>Write a few lines about yourself, your interests, and your career goals.</p>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>My Projects</h2>
<div class="project-grid">
<div class="project-card">Project 1</div>
<div class="project-card">Project 2</div>
<div class="project-card">Project 3</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contact Me</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message"></textarea>
<button type="submit">Send</button>
</form>
</section>
<!-- Footer -->
<footer>
<p>© 2025 Your Name | All Rights Reserved</p>
</footer>
<script src="script.js"></script>
</body>
</html>
This is our skeleton. If you open it in a browser, you’ll just see unstyled text. Next, let’s style it.
🎨 Step 3: Adding Styles with CSS
Now, let’s make the portfolio look professional. Open style.css and paste this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
line-height: 1.6;
background: #fff;
color: #333;
}
header {
background: #f4f4f4;
padding: 20px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav h1 {
color: #333;
}
nav ul {
list-style: none;
display: flex;
gap: 15px;
}
nav a {
text-decoration: none;
color: #333;
font-weight: bold;
transition: 0.3s;
}
nav a:hover {
color: #0077ff;
}
section {
padding: 50px;
text-align: center;
}
#home {
background: #eaf2ff;
padding: 80px 20px;
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.project-card {
background: #f4f4f4;
padding: 30px;
border-radius: 10px;
transition: transform 0.3s;
}
.project-card:hover {
transform: translateY(-5px);
background: #0077ff;
color: white;
}
form {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 400px;
margin: auto;
}
input, textarea, button {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
background: #0077ff;
color: white;
border: none;
cursor: pointer;
}
Now your portfolio has a clean, light theme with hover effects, spacing, and a professional layout.
⚡ Step 4: Adding Interactivity with JavaScript
We’ll add smooth scrolling for navigation links. Open script.js and paste:
// Smooth Scroll
document.querySelectorAll("nav a").forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
document.querySelector(this.getAttribute("href"))
.scrollIntoView({ behavior: "smooth" });
});
});
Now when you click on Home, About, Projects, Contact, the page will scroll smoothly.
📱 Step 5: Making It Responsive
Your portfolio should look good on mobile too. Add this at the bottom of style.css:
@media(max-width: 768px) {
nav ul {
flex-direction: column;
background: #f4f4f4;
padding: 10px;
}
section {
padding: 30px 20px;
}
}
Now, if you shrink the browser window, the navigation will stack vertically, and sections will have smaller padding.
🚀 Step 6: Hosting Your Portfolio
A website isn’t complete until it’s live. Here are free ways to host:
Upload your files, and within minutes, your portfolio will have its own URL to share with the world.
🎯 Next Steps & Improvements
You now have a basic but functional portfolio website. From here, you can:
- Add a profile photo in the hero section.
- Replace placeholder projects with real screenshots.
- Add social media icons (LinkedIn, GitHub, Twitter).
- Integrate email services (like Formspree) to make the contact form work.
- Experiment with animations like fade-in, slide, or hover effects.
✅ Final Thoughts
Congratulations 🎉 — you just built and deployed your very own portfolio website! You’ve covered:
- HTML for structure
- CSS for design
- JavaScript for interactivity
- Responsiveness for mobile users
- Hosting for making it live
This project is the perfect beginner-to-intermediate transition. You now understand how websites are structured, styled, and deployed. Keep improving your portfolio, and soon, it will become your strongest tool in landing opportunities.
Sarthak .k
Hey! I’m Sarthak, a frontend developer, tech entrepreneur, and avid gamer. I build educational platforms like Codido, create open-source projects like DevSnips, and share insights on web development, AI, and tech innovation. Passionate about learning, gaming, and shaping the future of the web
