EduCrush Team
19 May 2026
No money, no experience? No problem. Yeh guide tumhe step by step ek clean, impressive portfolio website banana sikhayegi — sirf HTML, CSS aur free hosting use karke. Ek weekend mein ready.
Recruiter tumhara resume sirf 6 seconds dekhta hai. Ek live portfolio link sab kuch badal deta hai — woh prove karta hai ki tum sirf skills list nahi karte, balki actually kuch build karte ho.
Aur sabse achhi baat? Isko banana mein ek rupaya bhi nahi lagta.
Bahut zyada sections mat banao. Sirf yeh 5 kaafi hain:
- Hero — Tera naam + ek line tagline (e.g. "I build things for the web")
- About — 3-4 lines mein kaun ho tum
- Skills — Tech stack icons ya simple list
- Projects — 2-3 best projects with links
- Contact — Email ya LinkedIn link
Itna hi. Simple portfolio always looks more professional than an overcrowded one.
Ek folder banao portfolio/ aur usme index.html file create karo. Yeh basic structure use karo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name — Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header> ... </header>
<section id="about"> ... </section>
<section id="projects"> ... </section>
<section id="contact"> ... </section>
</body>
</html>Semantic tags use karo — <header>, <section>, <footer> — yeh SEO ke liye bhi achha hai.
Alag style.css file banao. Ek pro tip: pehle font choose karo — Google Fonts se ek clean font lao, jaise Inter ya Poppins:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #0f0f0f; color: #fff; }
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero h1 { font-size: 3rem; font-weight: 700; }
.hero p { color: #aaa; margin-top: 1rem; font-size: 1.1rem; }Color palette ke liye ek simple rule — max 3 colors: background, text, aur ek accent color. Isse zyada hoga toh cluttered lagega.
Yeh sabse important section hai. Har project card mein yeh hona chahiye:
- Project ka screenshot ya thumbnail
- 1-2 line description — kya banaya aur kaise
- Live Demo link — yeh must hai
- GitHub link (optional but good)
Abhi sirf 2-3 projects hain toh bhi chalta hai. Recruiter quality dekhta hai, quantity nahi.
Yahan do best free options hain:
- GitHub Pages — Code GitHub pe push karo, Settings mein Pages enable karo. URL milega:
yourusername.github.io - Vercel — GitHub se connect karo, deploy button dabao. Done. URL milega:
yourname.vercel.app
Dono mein se koi bhi use karo — dono free hain, dono fast hain, dono pe custom domain bhi laga sakte ho baad mein.
- Mobile responsive banao — CSS media queries use karo ya simple CSS Grid/Flexbox. Recruiters phone pe bhi dekhte hain.
- Smooth scroll add karo —
html { scroll-behavior: smooth; }— bas ek line. - Loading speed matter karta hai — Images compress karo, unnecessary libraries mat load karo.
- Resume ka PDF link daalo — Download button hero section mein.
Ghabrao mat — yeh 3 beginner projects kaafi hain ek strong portfolio ke liye:
- Calculator — HTML + CSS + JS. Logic samajh aata hai.
- To-Do App — LocalStorage use karo. CRUD operations dikhte hain.
- Landing Page Clone — Kisi bhi site ka clone banao. Design skills dikhti hain.
In teen se shuru karo. Baaki projects baad mein add karte rehna.
Portfolio banana ek din ka kaam hai. Overthinking band karo — imperfect portfolio jo live ho, woh perfect portfolio jo sirf plan mein ho se hazaar guna better hai.
Banao, deploy karo, aur apne LinkedIn pe link lagao. Sab kuch wahan se shuru hota hai. 🚀
Written by
EduCrush Team
Part of the EduCrush team — building free resources for every Indian student.
Read More Articles