শূন্য থেকে নিজের ওয়েবসাইট বানানোর গাইড: HTML থেকে Deploy পর্যন্ত (২০২৫)
একটা সময় ছিল যখন ওয়েবসাইট বানানো মানেই বড় কোম্পানির কাজ, অনেক টাকা খরচ, এবং কোড শেখা মানেই কঠিন কিছু। কিন্তু এখন ২০২৫ সালেও আপনি নিজেই ঘরে বসে একটা ওয়েবসাইট বানাতে পারেন, বিনা খরচে এবং একদম শুরু থেকেই।
এই লেখাটা একদম নতুনদের জন্য। আপনি যদি কখনো কোড না করে থাকেন, তাহলেও চিন্তার কিছু নেই। আমরা ধাপে ধাপে HTML, CSS, JavaScript দিয়ে ওয়েবসাইট বানানো শিখবো — এবং শেষ পর্যন্ত সেটি ইন্টারনেটে প্রকাশ করবো, একদম রিয়েল লাইফ প্রজেক্টের মতো।
ওয়েবসাইটের ভিত্তি – HTML
HTML (HyperText Markup Language) হচ্ছে ওয়েবসাইটের হাড়-গোড়। আপনি যেমন বাড়ি বানানোর সময় ইট-বালু দিয়ে কাঠামো তৈরি করেন, HTML-ও তেমন কাঠামো তৈরি করে।
HTML Coding Environment কিভাবে তৈরি করবেন?
আপনি যখন ওয়েব ডেভেলপমেন্ট শেখা শুরু করছেন, তখন প্রথমেই দরকার একটি সহজ কিন্তু কার্যকর কোড লেখার পরিবেশ তৈরি করা। এটি হলো আপনার ভার্চুয়াল ডেস্ক। এখানে আপনি HTML, CSS, JavaScript লিখবেন, সংরক্ষণ করবেন এবং ব্রাউজারে দেখতে পারবেন।
Step 1: একটি Code Editor ইনস্টল করুন
সবচেয়ে জনপ্রিয় এবং ফ্রি code editor হলো Visual Studio Code (VS Code)। আপনি এটি code.visualstudio.com থেকে ডাউনলোড করতে পারবেন।
Step 2: Live Server Extension ব্যবহার করুন
HTML ফাইল সরাসরি ব্রাউজারে দেখতে চাইলে VS Code-এর মধ্যে Live Server নামক একটি extension ব্যবহার করতে পারেন। এটি আপনার কোডকে রিয়েল-টাইমে ব্রাউজারে দেখায়।
Step 3: ফোল্ডার তৈরি করে প্রজেক্ট গঠন
- index.html – আপনার মূল HTML ফাইল
- style.css – আপনার ডিজাইনের জন্য
- script.js – আপনার JavaScript কোডের জন্য (পরবর্তী পর্যায়ে)
Step 4: একটি ব্রাউজার রাখুন পাশে
Chrome, Firefox বা Edge – যেকোনো আধুনিক ব্রাউজার হলেই চলবে। তবে ডেভেলপার টুলস সুবিধার জন্য Google Chrome বেশি ব্যবহৃত হয়।
বাস্তব জীবনের উপমা:
ধরুন আপনি একজন চিত্রশিল্পী। আপনি তুলির কাজ করতে পারবেন না যদি না আপনার সামনে ক্যানভাস, রঙ এবং আলো ঠিকমতো না থাকে। HTML শেখার ক্ষেত্রেও পরিবেশ তৈরির বিষয়টি ঠিক তেমনই—এটি আপনার কোড লেখার ক্যানভাস।
ইন্টারঅ্যাক্টিভ প্রশ্ন:
1. VS Code কেন ব্যবহার করা হয়?
2. Live Server কী কাজে লাগে?
3. আপনি কীভাবে একটি ফোল্ডার প্রজেক্ট গঠন করবেন?
অনুশীলন:
- VS Code ডাউনলোড করে ইনস্টল করুন।
- একটি index.html ফাইল তৈরি করুন এবং তাতে <h1>Hello, World!</h1> লিখে ব্রাউজারে রান করুন।
- Live Server ব্যবহার করে পরিবর্তন দেখে নিন।
✅একটি সাধারণ HTML স্ট্রাকচার:
<!DOCTYPE html>
<html>
<head>
<title>আমার প্রথম সাইট</title>
</head>
<body>
<h1>স্বাগতম!</h1>
<p>এটা আমার নিজের বানানো ওয়েবসাইট।</p>
</body>
</html>বাস্তব উপমা:
যেমন ইটের ঘর বানিয়ে তারপর আমরা রঙ করি, সাজাই, HTML দেয় শুধু আকৃতি। রঙ আর ডিজাইন পরের ধাপে আসবে।
ওয়েবসাইট সাজানো – CSS
CSS (Cascading Style Sheets) হচ্ছে আপনার সাইটের পোশাক। এটি ঠিক করে, কোন অংশের রঙ কেমন হবে, টেক্সট কোথায় থাকবে, কত বড় হবে ইত্যাদি।
✅ উদাহরণ:
<style>
h1 {
color: blue;
text-align: center;
}
</style>
বাস্তব উপমা:
HTML হচ্ছে দালান, CSS হচ্ছে দেয়ালের রঙ, ঘরের পর্দা, আলো, ডেকোরেশন।
সাইটে প্রাণ দেওয়া – JavaScript
JavaScript (JS) হচ্ছে সাইটকে জীবন্ত করা। আপনি যদি চান বাটনে ক্লিক করলে কিছু ঘটবে, বা ফর্ম সাবমিট হলে কিছু কাজ করবে — সেখানেই JS লাগে।
✅উদাহরণ:
<script>
function showMessage() {
alert("ধন্যবাদ!");
}
</script>
<button onclick="showMessage()">ক্লিক করুন</button>
বাস্তব উপমা:
JS হচ্ছে সুইচ – যেমন আপনি লাইটের সুইচ টিপলে আলো জ্বলে। ঠিক সেভাবেই ওয়েবসাইটে কিছু ঘটানোর কাজ করে JS।
পেজ তৈরি – Home, About, Contact
আপনি এখন একটা ওয়েবসাইটের Home Page বানাবেন। তারপর বানাবেন About Page এবং Contact Page। প্রতিটা পেজ এক ফোল্ডারে রাখবেন, সাথে style.css ফাইল।
✅ ফাইল স্ট্রাকচার:
/mywebsite
|-- index.html
|-- about.html
|-- contact.html
|-- style.cssনিজে নিজে পরীক্ষা – কিভাবে ফাইল ওপেন করবেন?
আপনার index.html ফাইলটিকে ব্রাউজারে ড্র্যাগ করে নিয়ে যান — দেখবেন আপনার ওয়েবসাইট চলতেছে! এটা আপনার লোকাল সাইট।
ওয়েবসাইট অনলাইনে প্রকাশ (Deploy)
একটা ওয়েবসাইট বানিয়ে শুধু নিজের কম্পিউটারে রাখলে তো হলো না, সবাইকে দেখাতে হলে সেটি অনলাইনে দিতে হবে।
✅ সহজ প্ল্যাটফর্ম:
Netlify – একদম ফ্রি, কোন ঝামেলা নেই।
✅ কিভাবে দেবেন:
- https://netlify.com এ যান
- GitHub একাউন্ট দিয়ে লগইন করুন
- আপনার ওয়েব ফোল্ডারটা zip করে আপলোড দিন
- আপনার সাইট অনলাইনে চলে আসবে!
আপনার প্রথম প্রজেক্ট শেষ! এখন কী করবেন?
- নিজের নাম, ছবি দিয়ে পোর্টফোলিও বানান
- বন্ধুদের সাইট বানিয়ে দিন
- ফেসবুক পেজে পোস্ট দিন “নিজেই বানালাম!”
- Fiverr, Upwork, LinkedIn এ আপনার সাইট শেয়ার করুন
চূড়ান্ত কথা
ওয়েবসাইট বানানো কঠিন কিছু নয়। যদি মন থাকে, ইন্টারনেট থাকলেই হবে। প্রথমে একটু কঠিন মনে হবে, কিন্তু আপনি একবার শুরু করলে বুঝবেন – এটা অনেক মজার এবং অনেক চাহিদাসম্পন্ন স্কিল।
💬 0 Comments
💭 Share your thoughts