How to Create a Complete Portfolio Website with HTML and CSS in 2025 – Step by Step Full Tutorial (in hindi)
Namaste dosto! Aaj hum sikhte hain ki 2025 mein ek professional aur responsive portfolio website kaise banaaye sirf HTML aur CSS use karke. No JavaScript, no framework, bilkul simple aur clean code jo Google AdSense ke liye bhi 100% safe aur approval friendly hai. Yeh tutorial beginners ke liye perfect hai aur end mein aapko ek modern dark/light mode toggle bhi milega jo 2025 ka trend hai!
Kyun Portfolio Website Banayein?
2025 mein freelancing aur job market mein competition bahut zyada hai. Ek attractive portfolio website aapko developers, designers, photographers ya kisi bhi creative field mein alag dikhata hai. Hiring managers aur clients pehla impression isi se lete hain.
Project Structure (Folder Banayein)
portfolio-website/
├── index.html
├── style.css
├── about.html
├── projects.html
├── contact.html
├── images/
│ ├── profile.jpg
│ ├── project1.jpg
│ └── favicon.ico
└── assets/
└── font-awesome (optional)
Step 1: Basic HTML Structure (index.html)
Yeh raha aapka main index.html code:
<!-- Navigation Bar -->
<nav class="navbar">
<div class="logo">YourName</div>
<ul class="nav-links">
<li><a href="#home" class="active">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>
<li><button id="theme-toggle">🌙</button></li>
</ul>
<div class="hamburger">☰</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1>Hi, I'm <span>Your Name</span></h1>
<p>Full Stack Developer | UI/UX Designer | Freelancer</p>
<div class="social-links">
<a href="#">GitHub</a>
<a href="#">LinkedIn</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
</div>
<a href="#contact" class="cta-btn">Hire Me</a>
</div>
<img src="images/profile.jpg" alt="Your Photo" class="profile-img">
</section>
<!-- About Section -->
<section id="about" class="about">
<h2>About Me</h2>
<div class="about-content">
<p>Main ek passionate developer hoon jo clean aur modern websites banata hai. 3+ years ka experience hai HTML, CSS, JavaScript, React aur Node.js mein.</p>
<div class="stats">
<div><h3>50+</h3><p>Projects Completed</p></div>
<div><h3>30+</h3><p>Happy Clients</p></div>
<div><h3>3+</h3><p>Years Experience</p></div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills">
<h2>My Skills</h2>
<div class="skill-bars">
<div class="skill">
<p>HTML & CSS</p>
<div class="bar"><span style="width:95%"></span></div>
</div>
<div class="skill">
<p>JavaScript</p>
<div class="bar"><span style="width:85%"></span></div>
</div>
<div class="skill">
<p>React.js</p>
<div class="bar"><span style="width:80%"></span></div>
</div>
<div class="skill">
<p>Node.js</p>
<div class="bar"><span style="width:75%"></span></div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<h2>My Projects</h2>
<div class="project-grid">
<div class="project-card">
<img src="images/project1.jpg" alt="E-commerce Website">
<h3>E-commerce Website</h3>
<p>Full responsive online store built with React and Firebase</p>
<a href="#" class="live-btn">Live Demo</a>
</div>
<!-- Repeat similar cards -->
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<h2>Get In Touch</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" rows="5" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<!-- Footer -->
<footer>
<p>© 2025 Your Name. All rights reserved.</p>
</footer>
Step 2: Modern CSS Code (style.css) – 2025 Style
:root {
--primary: #6366f1;
--text: #333;
--bg: #ffffff;
--card: #f8f9fa;
}
[data-theme="dark"] {
--text: #e2e8f0;
--bg: #0f172a;
--card: #1e293b;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Poppins', sans-serif; background:var(--bg); color:var(--text); transition:0.4s; }
.navbar {
position:fixed; top:0; width:100%; padding:1rem 5%; background:var(--bg);
box-shadow:0 2px 10px rgba(0,0,0,0.1); display:flex; justify-content:space-between;
align-items:center; z-index:1000;
}
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { text-decoration:none; color:var(--text); font-weight:500; }
.hamburger { display:none; cursor:pointer; font-size:1.5rem; }
.hero {
min-height:100vh; display:flex; align-items:center; justify-content:center;
padding:0 5%; gap:5rem; flex-wrap:wrap;
}
.hero h1 { font-size:3.5rem; }
.hero span { color:var(--primary); }
.profile-img { width:350px; height:350px; border-radius:50%; object-fit:cover; border:5px solid var(--primary); }
.about, .skills, .projects, .contact { padding:5rem 5%; text-align:center; }
.about-content p { max-width:800px; margin:2rem auto; font-size:1.1rem; line-height:1.8; }
.skill-bars { max-width:800px; margin:0 auto; }
.bar { background:#ddd; height:30px; border-radius:50px; margin:1rem 0; overflow:hidden; }
.bar span { display:block; height:100%; background:var(--primary); border-radius:50px; }
.project-grid {
display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:2rem; margin-top:3rem;
}
.project-card {
background:var(--card); padding:1.5rem; border-radius:15px; transition:0.3s;
}
.project-card:hover { transform:translateY(-10px); box-shadow:0 10px 30px rgba(0,0,0,0.2); }
form input, form textarea {
width:100%; padding:1rem; margin:1rem 0; border:1px solid #ddd; border-radius:10px; font-size:1rem;
}
button { background:var(--primary); color:white; padding:1rem 2rem; border:none; border-radius:50px; cursor:pointer; }
#theme-toggle {
background:none; border:none; font-size:1.5rem; cursor:pointer;
}
/* Responsive Design */
@media (max-width:768px) {
.nav-links { display:none; position:absolute; top:100%; left:0; width:100%; background:var(--bg); flex-direction:column; padding:1rem; }
.nav-links.active { display:flex; }
.hamburger { display:block; }
.hero { flex-direction:column; text-align:center; }
.hero h1 { font-size:2.5rem; }
}
Step 3: Dark Mode Toggle (Pure CSS + Little JS – Optional)
Agar aap thoda sa JavaScript add karna chahte ho (AdSense allow karta hai), to yeh code footer se pehle add karo:
<script>
document.getElementById('theme-toggle').addEventListener('click', () => {
document.body.getAttribute('data-theme') === 'dark'
? document.body.removeAttribute('data-theme')
: document.body.setAttribute('data-theme', 'dark');
});
</script>
SEO Tips for Portfolio Website 2025
- Meta tags properly add karo (title, description, keywords)
- Alt text har image mein daalo
- Fast loading ke liye images optimize karo
- Mobile responsive 100% rakho
- Proper heading structure (h1, h2, h3) use karo
- Google Analytics aur Search Console add karo
Read more topics: web-development-kaise-shuru-karein-2025
Bas ho gaya! Aapne ek complete professional portfolio website bana liya sirf HTML aur CSS se jo 2025 mein bhi modern dikhega. Ise GitHub Pages ya Netlify pe free host kar sakte ho. Code ko apne hisaab se customize karo, apne projects add karo aur apna career boost karo!
Agar yeh tutorial helpful laga to comment mein "Thank You" zaroor likhna aur apna portfolio link share karna. All the best dosto! Keep coding!