✅ Step 1: Plan Your Portfolio
Before writing any code, decide what content you want to include:
✍️ Key Sections:
Hero Section – Your name, profession, and a brief intro
About Me – More detailed information about your background
Projects – Showcase with live links, screenshots, and GitHub links
Skills – Programming languages, tools, frameworks
Contact Form – Simple form or direct email/social links
Resume – Optional downloadable link
🧰 Step 2: Set Up the Project Structure
Create a folder named portfolio-site and structure it like this:
portfolio-site/
│
├── index.html
├── style.css
├── script.js
└── assets/
├── images/
└── fonts/
💻 Step 3: Write the HTML (index.html) html Copy Edit
<!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>
<h1>Your Name</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section id="hero">
<h2>Hi, I'm a Web Developer</h2>
<p>I build responsive and engaging websites.</p>
</section>
<section id="about">
<h2>About Me</h2>
<p>Brief intro about your background and experience.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project-card">
<h3>Project Title</h3>
<p>Short description of the project.</p>
<a href="#">View Project</a>
</div>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: yourname@example.com</p>
</section>
<footer>
<p>© 2025 Your Name</p>
</footer>
</body>
</html>
This is a title🎨 Step 4: Add Styling (style.css) css Copy Edit
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.6;
background: #f4f4f4;
color: #333;
}
header {
background: #333;
color: white;
padding: 1rem;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
section {
padding: 2rem;
}
.project-card {
background: white;
padding: 1rem;
margin-top: 1rem;
border-radius: 8px;
}
footer {
background: #222;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
📱 Step 5: Make It Responsive
Add a media query to make the layout mobile-friendly:
@media (max-width: 768px) {
nav {
display: flex;
flex-direction: column;
gap: 10px;
}
section {
padding: 1rem;
}
}
🚀 Step 6: Deploy Your Portfolio
Options:
GitHub Pages: Free and easy.
Netlify: Great for static site hosting.
Vercel: Ideal for React/Next.js projects.
GitHub Pages Deployment:
Push your code to GitHub.
Go to Repository Settings > Pages.
Choose branch: main and /root.
Done! Your site is live.
✅ Tips for a Great Portfolio:
Keep design clean and minimal
Showcase real, working projects
Keep navigation intuitive
Make it responsive and fast-loading
Use consistent fonts and colors
🧠 Want to Go Advanced?
You can also:
Use Bootstrap or Tailwind CSS for faster styling
Add JavaScript animations
Integrate contact form with Formspree or Netlify Forms
Convert your static portfolio into a React App