HTML, CSS, JavaScript থেকে শুরু করে React ও Backend (Node.js, MongoDB) পর্যন্ত — Beginner থেকে Job-Ready লেভেল পর্যন্ত সম্পূর্ণ রোডম্যাপ, ৮টি মডিউলে সাজানো।
index.html, style.css, script.js<html> ট্যাগের ভেতরে <head> (মেটাডেটা, টাইটেল) ও <body> (দৃশ্যমান কনটেন্ট) থাকে।
গুরুত্বপূর্ণ ট্যাগ
<!DOCTYPE html> — ব্রাউজারকে জানায় এটি HTML5 ডকুমেন্ট<meta charset="UTF-8"> — বাংলা সহ সব ক্যারেক্টার ঠিকভাবে দেখানোর জন্য জরুরি<title> — ব্রাউজার ট্যাবে যে নাম দেখা যায়<h1> থেকে <h6> — বিভিন্ন লেভেলের হেডিং<p> — একটি প্যারাগ্রাফ<a href="..."> — হাইপারলিংক, target="_blank" দিয়ে নতুন ট্যাবে খোলা যায়<img src="..." alt="..."> — ছবি দেখানো; alt attribute accessibility ও SEO-এর জন্য গুরুত্বপূর্ণ<ul> (bullet) ও <ol> (numbered) — ভেতরে <li> দিয়ে আইটেম লেখা হয়।
Tables
<table> এর ভেতরে <tr> (row) ও <td>/<th> (cell/header) দিয়ে ডেটা সারি-কলাম আকারে দেখানো হয়।
Forms
<form> এর ভেতরে <input>, <textarea>, <button> দিয়ে ইউজার ইনপুট নেওয়া হয় — সাইন-আপ, কন্টাক্ট ফর্মের মূল ভিত্তি।<header>, <nav>, <main>, <section>, <article>, <footer> — এগুলো পেজের গঠন স্পষ্ট করে, যা SEO ও accessibility-তে সাহায্য করে সাধারণ <div>-এর তুলনায়।
Practice Project
এই মডিউলে শেখা সব ট্যাগ (heading, paragraph, link, image, list, table, form, semantic tags) একসাথে ব্যবহার করে একটি সম্পূর্ণ পার্সোনাল প্রোফাইল/পোর্টফোলিও পেজ (শুধু HTML, কোনো স্টাইল ছাড়াই) তৈরি করা হয়।style="..."<head>-এ <style> ট্যাগ.css ফাইল লিংক করে (সবচেয়ে ভালো অভ্যাস)p), class (.card), id (#header) — কোন এলিমেন্টে স্টাইল প্রয়োগ হবে তা নির্ধারণ করে।#ff0000), RGB (rgb(255,0,0)), নাম (red) — বিভিন্নভাবে রঙ নির্ধারণ করা যায়।
Typography
font-family, font-size, font-weight, line-height দিয়ে টেক্সটের ধরন নিয়ন্ত্রণ করা হয়।
Box Model
প্রতিটি এলিমেন্ট একটি বক্স — Content → Padding → Border → Margin, ভেতর থেকে বাইরে এই ক্রমে সাজানো থাকে।margin — এলিমেন্টের বাইরের ফাঁকা জায়গাpadding — কনটেন্ট ও বর্ডারের মাঝের ফাঁকা জায়গাborder — এলিমেন্টের চারপাশে রেখাdisplay: block/inline/inline-block/none — এলিমেন্ট কীভাবে সাজানো হবে তা নিয়ন্ত্রণ করেstatic — ডিফল্ট, স্বাভাবিক প্রবাহে থাকেrelative — নিজের স্বাভাবিক অবস্থান থেকে সরানো যায়, জায়গা ধরে রাখেabsolute — নিকটতম positioned প্যারেন্টের সাপেক্ষে বসে, স্বাভাবিক প্রবাহ থেকে বের হয়ে যায়fixed — স্ক্রল করলেও নির্দিষ্ট জায়গায় স্থির থাকে (যেমন sticky navbar)display: flex — প্যারেন্টে flex container চালু করেjustify-content — মূল অক্ষ বরাবর alignment (center, space-between ইত্যাদি)align-items — ক্রস অক্ষ বরাবর alignmentflex-wrap — চাইল্ড এলিমেন্ট পরবর্তী লাইনে wrap হবে কিনাdisplay: grid, grid-template-columns, grid-template-rowsgap — গ্রিড আইটেমের মধ্যে ফাঁকা জায়গাgrid-column/grid-row — নির্দিষ্ট আইটেম কতটুকু জায়গা নেবে তা নিয়ন্ত্রণ@media (max-width: 768px) { ... } — নির্দিষ্ট স্ক্রিন সাইজে ভিন্ন CSS প্রয়োগ করতে ব্যবহৃত হয়।
Mobile-First Approach
প্রথমে মোবাইলের জন্য ডিজাইন করে, তারপর বড় স্ক্রিনের জন্য media query দিয়ে বাড়ানো — একটি জনপ্রিয় ও কার্যকর পদ্ধতি।transition — একটি প্রোপার্টি (যেমন রঙ, সাইজ) পরিবর্তনের সময় স্মুথ effect যোগ করে@keyframes ও animation — আরও জটিল, ধাপে ধাপে অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়:hover, :focus pseudo-class-এর সাথে মিলিয়ে ইন্টারঅ্যাক্টিভ effect তৈরি করা হয়let, const, (পুরনো var) — ভ্যারিয়েবল ঘোষণার পদ্ধতি; const-এর মান পরিবর্তন করা যায় নাString, Number, Boolean, Array, Object, null, undefinedtypeof অপারেটর দিয়ে একটি ভ্যারিয়েবলের টাইপ যাচাই করা যায়+ - * / %== , === , != , !== , > , < (=== টাইপসহ কড়াভাবে তুলনা করে, তাই এটি বেশি ব্যবহৃত)&&, ||, !if / else if / else দিয়ে শর্তসাপেক্ষে কোড এক্সিকিউট করা হয়। একাধিক নির্দিষ্ট মানের ক্ষেত্রে switch-case ব্যবহার করলে কোড আরও readable হয়। প্রতিটি case-এর শেষে break ব্যবহার জরুরি, নাহলে fall-through হয়ে যায়।for loop — নির্দিষ্টসংখ্যক বার পুনরাবৃত্তির জন্য সবচেয়ে ব্যবহৃতwhile loop — শর্ত সত্য থাকা পর্যন্ত চলেarray.forEach() — অ্যারের প্রতিটি এলিমেন্টের উপর একটি ফাংশন চালানোর আধুনিক পদ্ধতিfunction greet() { ... }const greet = () => { ... }, আধুনিক ও সংক্ষিপ্ত syntaxpush(), pop(), map(), filter()-এর মতো মেথড দিয়ে ডেটা প্রসেস করা হয়।
Object
key-value জোড়া আকারে ডেটা রাখে, যেমন { name: "Rafi", age: 20 } — বাস্তব-জীবনের এন্টিটি মডেল করতে সবচেয়ে বেশি ব্যবহৃত হয়।document.querySelector() / querySelectorAll() — এলিমেন্ট সিলেক্ট করা.textContent, .innerHTML — কনটেন্ট পড়া/পরিবর্তন করা.classList.add/remove/toggle() — CSS ক্লাস ডাইনামিকভাবে পরিবর্তন করা.style.property — সরাসরি স্টাইল পরিবর্তন করাelement.addEventListener("click", function() { ... }) — সবচেয়ে বেশি ব্যবহৃত পদ্ধতি।
Practice
এই মডিউলে শেখা সব বিষয় দিয়ে একটি Interactive To-Do List অ্যাপ (আইটেম যোগ, মুছে ফেলা, ✓ মার্ক করা) তৈরি করা হয়।`Hello ${name}` দিয়ে ভ্যারিয়েবল সরাসরি স্ট্রিং-এ বসানো যায়this-এর আচরণও ভিন্ন (lexical scoping)let/const — block-scoped, পুরনো var-এর সমস্যা এড়ায়const { name, age } = user;
Spread/Rest
... অপারেটর দিয়ে অ্যারে/অবজেক্ট কপি বা একত্র করা যায় (spread), অথবা অনির্দিষ্ট সংখ্যক আর্গুমেন্ট সংগ্রহ করা যায় (rest)।.then()/.catch() দিয়ে সফল/ব্যর্থ হ্যান্ডেল করা হয়।
async/await
Promise-ভিত্তিক কোডকে সিনক্রোনাস কোডের মতো readable করে লেখার আধুনিক syntax।fetch(url) দিয়ে একটি external API-তে রিকোয়েস্ট পাঠিয়ে JSON রেসপন্স আনা হয় — fetch().then(res => res.json()).then(data => ...) বা async/await সহ। এটি আধুনিক ওয়েব অ্যাপের ডেটা আনার সবচেয়ে সাধারণ পদ্ধতি।localStorage.setItem() / getItem()।
Error Handling
try { ... } catch (error) { ... } দিয়ে কোড ব্যর্থ হলে তা সুন্দরভাবে হ্যান্ডেল করা হয়, যাতে পুরো অ্যাপ ক্র্যাশ না করে।git init — একটি ফোল্ডারকে Git প্রজেক্ট হিসেবে চালু করাgit add — পরিবর্তিত ফাইল ট্র্যাকিং-এ যোগ করাgit commit -m "..." — একটি "সেভ পয়েন্ট" তৈরি করা, সাথে মেসেজgit log — কমিট হিস্ট্রি দেখাgit push — লোকাল কমিট GitHub-এ আপলোড করাgit pull — রিমোট থেকে সর্বশেষ পরিবর্তন লোকালে আনাnpm create vite@latest my-app -- --template react — আধুনিক ও দ্রুততম React প্রজেক্ট সেটআপ পদ্ধতি।const [count, setCount] = useState(0); — useState Hook দিয়ে একটি ফাংশনাল কম্পোনেন্টে state যোগ করা হয়, setCount কল করলে UI রি-রেন্ডার হয়।useEffect দিয়ে একটি Component রেন্ডার হওয়ার পর নির্দিষ্ট কাজ (API কল, subscription, timer) চালানো যায় — যেমন পেজ লোড হওয়ার সাথে সাথে ডেটা fetch করা। Dependency Array দিয়ে নিয়ন্ত্রণ করা হয় কখন এটি আবার রান হবে।value ও onChange একসাথে ব্যবহার করে) — এটিকে "Controlled Component" বলা হয়।
Conditional Rendering
{condition && <Component />} বা ternary অপারেটর দিয়ে শর্তসাপেক্ষে ভিন্ন UI দেখানো হয় (যেমন Loading/Error/Success state)।react-router-dom ব্যবহৃত হয়।
Practice Project
এই মডিউলে শেখা সব React কনসেপ্ট (Component, Props, State, useEffect, Router) একত্রে ব্যবহার করে একটি Multi-page React App (যেমন একটি মুভি/প্রোডাক্ট ব্রাউজিং অ্যাপ) তৈরি করা হয়।const app = express();GET — ডেটা আনা (read)POST — নতুন ডেটা তৈরি করাPUT/PATCH — বিদ্যমান ডেটা আপডেট করাDELETE — ডেটা মুছে ফেলাapp.get('/users', (req, res) => {...})-এর মতো route ডিফাইন করে প্রতিটি HTTP মেথড হ্যান্ডেল করা হয়।mongoose লাইব্রেরি দিয়ে Node.js থেকে MongoDB-এর সাথে সহজে সংযোগ ও কাজ করা যায় (Schema/Model ডিফাইন করে)।fetch/axios দিয়ে নিজের তৈরি করা Express Backend API-তে রিকোয়েস্ট পাঠিয়ে ডেটা আনা-নেওয়া করা হয় — এটিই একটি প্রকৃত ফুল-স্ট্যাক অ্যাপের মূল কাঠামো। CORS (Cross-Origin Resource Sharing) কনফিগারেশনও এই ধাপে গুরুত্বপূর্ণ।bKash-এ পেমেন্ট করে সরাসরি ভর্তি হোন, অথবা প্রশ্ন থাকলে আগে যোগাযোগ করুন।