আপনি যদি বাংলাদেশের একজন শিক্ষার্থী হন বা ফ্রিল্যান্সিং শুরু করতে চান, তাহলে আপনার নিজের একটা পোর্টফোলিও ওয়েবসাইট থাকা আজকের দিনে অনেক বেশি জরুরি। ক্লায়েন্ট বা রিক্রুটার আপনার সম্পর্কে জানতে প্রথমে যা দেখে, সেটা হলো আপনার অনলাইন উপস্থিতি। লিংকডইন বা বিডআউটসোর্সিং প্রোফাইলের চেয়ে নিজের ডোমেইনের একটা ওয়েবসাইট অনেক বেশি বিশ্বাসযোগ্যতা তৈরি করে। আর সবচেয়ে ভালো খবর হলো — এই ওয়েবসাইট বানাতে আপনার কোনো বড় ফ্রেমওয়ার্ক বা ডিজাইনারের দরকার নেই। শুধু HTML, CSS আর JavaScript জানলেই আপনি নিজের personal portfolio website HTML CSS JavaScript দিয়ে তৈরি করতে পারেন।
এই আর্টিকেলে আমি আপনাকে একেবারে শুরু থেকে ধাপে ধাপে দেখাবো কীভাবে একটা সম্পূর্ণ পোর্টফোলিও ওয়েবসাইট বানাবেন। কোড উদাহরণ, ফাইল স্ট্রাকচার, রেসপন্সিভ ডিজাইন, ডিপ্লয়মেন্ট — সব কিছু থাকবে। শেষ পর্যন্ত পড়লে আপনি নিজেই একটা পূর্ণাঙ্গ ওয়েবসাইট বানিয়ে অনলাইনে লাইভ করতে পারবেন।
১. পোর্টফোলিও ওয়েবসাইট কেন দরকার?
আমাদের দেশে অনেক শিক্ষার্থী ভাবেন, ফ্রিল্যান্সিং মার্কেটপ্লেসে প্রোফাইল থাকলেই যথেষ্ট। কিন্তু বাস্তবতা হলো, মার্কেটপ্লেসের প্রোফাইল শুধু প্ল্যাটফর্মের ভেতরে সীমাবদ্ধ। অন্যদিকে আপনার নিজের ওয়েবসাইট ২৪ ঘণ্টা আপনার ব্র্যান্ডের প্রতিনিধিত্ব করে, যেকোনো জায়গা থেকে শেয়ার করা যায় এবং আপনার দক্ষতা প্রমাণের সবচেয়ে শক্তিশালী মাধ্যম।
একটা ভালো পোর্টফোলিও ওয়েবসাইট আপনাকে যা দেয়:
- বিশ্বাসযোগ্যতা: ক্লায়েন্ট আপনার কাজ দেখে সিদ্ধান্ত নিতে পারে।
- নিয়ন্ত্রণ: মার্কেটপ্লেসের নিয়মের বাইরে আপনি নিজের ব্র্যান্ড গড়তে পারেন।
- SEO সুবিধা: আপনার নাম দিয়ে সার্চ করলে নিজের সাইট প্রথমে আসবে।
- নিজের ডোমেইন: yourname.com থাকলে সেটা একটা আলাদা পরিচয়।
আর যদি আপনি আমাদের কোর্সগুলো দেখেন, তাহলে দেখবেন ওয়েব ডেভেলপমেন্টের বেসিক থেকে শুরু করে অ্যাডভান্সড লেভেল পর্যন্ত শেখার সুযোগ আছে।
২. শুরু করার আগে যা যা দরকার
শুরুতেই কিছু জিনিস ঠিক করে নিন। এগুলো ছাড়া পরে আবার কাজ করতে হবে।
টুলস ও সেটআপ
- একটা কোড এডিটর — VS Code সবচেয়ে জনপ্রিয়, ফ্রি।
- একটা আধুনিক ব্রাউজার — Chrome বা Firefox।
- একটা ফোল্ডার — যেমন
my-portfolio। - Git ও GitHub অ্যাকাউন্ট (ডিপ্লয় করার জন্য)।
ফাইল স্ট্রাকচার
শুরুতে খুব সাধারণ স্ট্রাকচার রাখুন। পরে দরকার হলে বাড়াতে পারবেন।
my-portfolio/
├── index.html
├── style.css
├── script.js
└── images/
└── profile.jpgএই তিনটা ফাইল দিয়েই পুরো সাইট চলবে। HTML কাঠামো, CSS ডিজাইন আর JavaScript ইন্টারঅ্যাকশন সামলাবে।
৩. HTML দিয়ে সাইটের কাঠামো তৈরি
প্রথমে HTML ফাইলটা লিখুন। এখানে আমরা সেমান্টিক ট্যাগ ব্যবহার করবো, যাতে SEO ভালো হয় এবং স্ক্রিন রিডারও বুঝতে পারে।
<!DOCTYPE html>
<html lang='bn'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>রাফি আহমেদ | ওয়েব ডেভেলপার</title>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<header>
<nav>
<a href='#home'>হোম</a>
<a href='#about'>পরিচিতি</a>
<a href='#projects'>প্রজেক্ট</a>
<a href='#contact'>যোগাযোগ</a>
</nav>
</header>
<main>
<section id='home'>
<h1>আমি রাফি, একজন ফ্রন্টএন্ড ডেভেলপার</h1>
<p>HTML, CSS ও JavaScript দিয়ে ওয়েবসাইট বানাই।</p>
</section>
</main>
</body>
</html>লক্ষ্য করুন, এখানে <header>, <nav>, <main>, <section> — এগুলো সেমান্টিক ট্যাগ। এগুলো ব্যবহার করলে আপনার সাইট অ্যাক্সেসিবল ও SEO-ফ্রেন্ডলি হয়। প্রতিটা সেকশনের জন্য আলাদা id দিন, যাতে নেভিগেশন লিংক কাজ করে।
পরিচিতি সেকশনে নিজের ছবি, সংক্ষিপ্ত বায়ো, স্কিল লিস্ট যোগ করুন। প্রজেক্ট সেকশনে প্রতিটা প্রজেক্টের জন্য একটা কার্ড বানান — থাম্বনেইল, টাইটেল, ছোট বর্ণনা আর লাইভ লিংক সহ।
৪. CSS দিয়ে ডিজাইন ও রেসপন্সিভ লেআউট
HTML শুধু কাঠামো। সৌন্দর্য আসে CSS থেকে। শুরুতে CSS রিসেট বা সাধারণ স্টাইল দিয়ে শুরু করুন।
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
line-height: 1.6;
color: #222;
}
nav {
display: flex;
gap: 1rem;
justify-content: center;
padding: 1rem;
background: #0f172a;
}
nav a { color: #fff; text-decoration: none; }
section { padding: 4rem 1rem; max-width: 900px; margin: auto; }এখন রেসপন্সিভ করার জন্য মিডিয়া কোয়েরি ব্যবহার করুন। মোবাইলে যেন লেআউট ঠিকভাবে দেখায় সেটা নিশ্চিত করুন।
@media (max-width: 600px) {
nav { flex-direction: column; align-items: center; }
section { padding: 2rem 1rem; }
}প্রজেক্ট কার্ডের জন্য CSS Grid ব্যবহার করা সবচেয়ে ভালো।
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}এই এক লাইন দিয়েই আপনার কার্ডগুলো অটোমেটিক রেসপন্সিভ হয়ে যাবে — ডেস্কটপে তিন কলাম, মোবাইলে এক কলাম।
৫. JavaScript দিয়ে ইন্টারঅ্যাকশন যোগ করা
এখন সাইটে প্রাণ আনুন। JavaScript দিয়ে মোবাইল মেনু টগল, স্ক্রল অ্যানিমেশন, কন্টাক্ট ফর্ম ভ্যালিডেশন — সব করা যায়।
মোবাইল মেনু টগল
const toggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('nav');
toggle.addEventListener('click', () => {
nav.classList.toggle('open');
});স্ক্রল করলে সেকশন হাইলাইট
const sections = document.querySelectorAll('section');
window.addEventListener('scroll', () => {
sections.forEach(sec => {
const top = sec.getBoundingClientRect().top;
if (top < 200) sec.classList.add('active');
});
});চাইলে ডার্ক মোড টগলও যোগ করতে পারেন — এটা এখন ক্লায়েন্টদের কাছে বেশ পছন্দের ফিচার। JavaScript শেখার জন্য আমাদের ব্লগ দেখতে পারেন, সেখানে অনেক প্র্যাকটিক্যাল টিউটোরিয়াল আছে।
৬. ডিপ্লয় করা ও অনলাইনে লাইভ করা
ওয়েবসাইট বানানো শেষ? এখন অনলাইনে লাইভ করতে হবে। সবচেয়ে সহজ ও ফ্রি উপায় হলো GitHub Pages বা Netlify।
- GitHub-এ একটা রিপোজিটরি তৈরি করুন।
- আপনার তিনটা ফাইল পুশ করুন।
- Settings → Pages-এ গিয়ে ব্রাঞ্চ সিলেক্ট করুন।
- কয়েক মিনিটের মধ্যে লাইভ লিংক পাবেন।
নিজের ডোমেইন কিনতে চাইলে .com ডোমেইন বছরে প্রায় ১০০০-১৫০০ টাকায় পাওয়া যায়। হোস্টিংয়ের জন্য Netlify বা Vercel ফ্রি টিয়ারেই যথেষ্ট। ডিপ্লয়মেন্টের বিস্তারিত জানতে আমাদের রিসোর্স সেকশন ঘুরে দেখুন।
৭. পোর্টফোলিওকে কার্যকর করার টিপস
শুধু ওয়েবসাইট থাকলেই হবে না, সেটা যেন সত্যিই কাজে দেয় সেদিকে খেয়াল রাখুন।
- দ্রুত লোডিং: ছবি কমপ্রেস করুন, WebP ফরম্যাট ব্যবহার করুন।
- স্পষ্ট কল-টু-অ্যাকশন: প্রতিটা সেকশনে একটা বাটন রাখুন — Hire Me বা Contact।
- প্রজেক্টের লাইভ লিংক: শুধু স্ক্রিনশট নয়, লাইভ ডেমো ও GitHub রিপো দিন।
- মোবাইল ফার্স্ট: বেশিরভাগ ভিজিটর মোবাইল থেকে আসে।
- নিয়মিত আপডেট: নতুন প্রজেক্ট যোগ করুন, পুরোনো কাজ সরান।
মনে রাখবেন, পোর্টফোলিও একটা স্থির জিনিস নয় — এটা আপনার ক্যারিয়ারের সাথে বাড়তে থাকা একটা জীবন্ত ডকুমেন্ট।
আরও গভীরে যেতে চাইলে আমাদের কমিউনিটিতে যোগ দিন, সেখানে অন্যান্য লার্নারদের সাথে অভিজ্ঞতা শেয়ার করতে পারবেন।
উপসংহার
নিজের personal portfolio website HTML CSS JavaScript দিয়ে বানানো আসলে কঠিন কিছু নয়। শুরুতে HTML দিয়ে কাঠামো, তারপর CSS দিয়ে ডিজাইন, শেষে JavaScript দিয়ে ইন্টারঅ্যাকশন — এই তিন ধাপ অনুসরণ করলেই আপনি একটা পেশাদার ওয়েবসাইট পেয়ে যাবেন। আজই একটা ফোল্ডার খুলে কোড লেখা শুরু করুন। ছোট করে শুরু করুন, পরে ধীরে ধীরে ফিচার বাড়ান। মনে রাখবেন, পারফেক্ট না হলেও লাইভ থাকা সাইট না থাকার চেয়ে অনেক ভালো।
সাধারণ প্রশ্নোত্তর
১. পোর্টফোলিও ওয়েবসাইট বানাতে কতটা কোডিং জানা দরকার?
বেসিক HTML, CSS আর JavaScript জানলেই যথেষ্ট। আপনার জটিল ফ্রেমওয়ার্ক লাগবে না। শুধু ট্যাগ, সিলেক্টর আর ইভেন্ট হ্যান্ডলিং বুঝলেই আপনি একটা ভালো পোর্টফোলিও বানাতে পারবেন।
২. ফ্রি-তে ওয়েবসাইট হোস্ট করা যায় কি?
হ্যাঁ, GitHub Pages, Netlify বা Vercel দিয়ে সম্পূর্ণ ফ্রি-তে হোস্ট করা যায়। শুধু ডোমেইন কিনতে চাইলে টাকা লাগবে, নাহলে সাবডোমেইন দিয়েও চালিয়ে যেতে পারবেন।
৩. পোর্টফোলিওতে কতগুলো প্রজেক্ট রাখা উচিত?
কমপক্ষে ৩-৫টা ভালো প্রজেক্ট রাখুন। সংখ্যার চেয়ে গুণগত মান বেশি জরুরি। প্রতিটা প্রজেক্টের লাইভ লিংক ও সোর্স কোড থাকলে ক্লায়েন্ট সহজে বিশ্বাস করে।
৪. ডার্ক মোড যোগ করা কি জরুরি?
জরুরি নয়, কিন্তু আধুনিক ট্রেন্ড। JavaScript দিয়ে সহজেই টগল করা যায়। এটা আপনার JavaScript দক্ষতাও দেখায়, যা ক্লায়েন্টের কাছে ইতিবাচক।
৫. টেমপ্লেট কিনে ব্যবহার করবো নাকি নিজে বানাবো?
শেখার জন্য নিজে বানানো সবচেয়ে ভালো। এতে আপনি HTML, CSS, JavaScript সবই প্র্যাকটিস করবেন। পরে সময় বাঁচাতে চাইলে টেমপ্লেট কাস্টমাইজ করতে পারেন।
