VS Code & DevTools Setup — ওয়েব ডেভেলপমেন্টের টুল বাংলায় | পর্ব ০২

Q: file:// থেকে খোলা পেজকে ব্রাউজার এত সন্দেহ করে কেন? নিজের কম্পিউটারের ফাইলই তো!

উত্তর লুকিয়ে আছে ওয়েব নিরাপত্তার সবচেয়ে মৌলিক নিয়মে — same-origin policy . ১৯৯৫ সালে Netscape যখন ব্রাউজারে JavaScript আনে, তখনই প্রশ্ন ওঠে: একটি সাইটের script কি অন্য সাইটের ডেটা পড়তে পারবে? উত্তর ছিল “না” — প্রতিটি পেজের একটি origin থাকে (scheme + host + port, যেমন https://abcltech.com ), আর এক origin-এর script অন্য origin-এর ডেটা সাধারণত পড়তে পারে না। এই নিয়ম না থাকলে একটি খারাপ সাইট খোলা ট্যাব থেকে আপনার ইমেইল বা ব্যাংকের তথ্য পড়ে ফেলতে পারত। এবার file:// -এর কথা ভাবুন। এখানে host নেই, port নেই — তাহলে origin কী? ধরা যাক ব্রাউজার বলল, “একই কম্পিউটারের সব ফাইল একই origin.” তাহলে কেউ আপনাকে ইমেইলে বা মেসেঞ্জারে একটি HTML ফাইল পাঠাল, আপনি Downloads ফোল্ডারে নামিয়ে খুললেন — আর সেই ফাইলের script চুপচাপ আপনার অন্য ফাইল পড়ে কোথাও পাঠিয়ে দিল! এ কারণে আধুনিক ব্রাউজার file:// পেজকে একটি বিশেষ “opaque” origin দেয় — Chrome-এর error বার্তায় এটিই origin 'null' হিসেবে দেখায়।

এক নজরে · TL;DR

দামি কিছু লাগে না। যেকোনো কম্পিউটার, একটি code editor (যেমন VS Code) আর একটি আধুনিক ব্রাউজার — এটুকুই পেশাদারদেরও মূল যন্ত্র।
প্রতিটি প্রজেক্ট = একটি ফোল্ডার। ভেতরে প্রধান পেজ index.html; ফাইলের নাম ছোট হাতের, ফাঁকা জায়গা ছাড়া, ঠিক extension-সহ।
Emmet সময় বাঁচায়: ! লিখে Tab চাপলেই পুরো HTML কঙ্কাল; ul>li*3 লিখলে তিনটি li-সহ তালিকা।
ফাইল খোলা আর সার্ভার দিয়ে চালানো এক নয়: file://-এ কিছু জিনিস কাজ করে না; local server আসল ওয়েবসাইটের মতো আচরণ দেয়।
DevTools আপনার এক্স-রে মেশিন: F12 চাপলেই Elements, Styles, Console, Network — আর View Source যা দেখায়, Elements তা নয়, দেখায় ব্রাউজারের বানানো DOM.

এই পর্বে যা শিখবেন

Windows, macOS বা Linux-এ VS Code ইনস্টল করে প্রথম প্রজেক্ট ফোল্ডার সাজানো
ফাইলের নামের নিয়ম, আর Windows-এর লুকানো extension-এর ফাঁদ থেকে বাঁচা
Emmet, auto-save, format document আর multi-cursor দিয়ে দ্রুত লেখা
ফাইল ডাবল-ক্লিক করে খোলা আর local server দিয়ে চালানোর আসল পার্থক্য
DevTools-এর প্রধান প্যানেলগুলো চেনা, আর View Source বনাম Elements-এর পার্থক্য বোঝা

১ · কী কী লাগবে — কম্পিউটার, ব্রাউজার আর একটি editor

অনেকে ভাবেন, ওয়েবসাইট বানাতে বুঝি দামি ল্যাপটপ, বিশেষ সফটওয়্যার বা মাসিক চাঁদা লাগে। আসলে লাগে না। HTML আর CSS হলো সাধারণ লেখা — text ফাইল। এগুলো লেখার জন্য একটি লেখার প্রোগ্রাম আর ফল দেখার জন্য একটি ব্রাউজার থাকলেই কাজ শুরু করা যায়। পুরোনো একটি ডেস্কটপ, অফিসের সাধারণ ল্যাপটপ, এমনকি সাইবার ক্যাফের কম্পিউটারেও চলবে।

একটি দর্জির দোকানের কথা ভাবুন। দর্জির মূল যন্ত্র তিনটি: মাপের ফিতা, কাঁচি আর সেলাই মেশিন। দামি মেশিন কাজ দ্রুত করে, কিন্তু ভালো জামা বানায় দর্জির হাত আর বোঝাপড়া। ওয়েব ডেভেলপারের যন্ত্রও তিনটি:

Code editor

যেখানে HTML-CSS লিখবেন। লেখা রঙিন করে দেখায়, ভুল ধরিয়ে দেয়, অনেক টাইপ নিজেই করে দেয়।

VS Code (এই কোর্সে)

ব্রাউজার

যেখানে ফল দেখবেন। আপনার লেখা পড়ে পেজটি সাজিয়ে আঁকে — ঠিক যেমন আপনার পাঠকের কাছে দেখাবে।

Chrome, Edge, Firefox, Safari

DevTools

ব্রাউজারের ভেতরের এক্স-রে মেশিন — পেজ খুলে দেখায় ভেতরে কী আছে, কোন নিয়ম কাজ করছে, কোথায় ভুল।

F12 চাপলেই খোলে

ভালো খবর হলো, তিনটিই বিনামূল্যে। DevTools তো ব্রাউজারের ভেতরেই থাকে, আলাদা ইনস্টলও লাগে না। কম্পিউটারের ন্যূনতম চাহিদাও কম — VS Code চলে এমন যেকোনো কম্পিউটারই যথেষ্ট। ৪ GB RAM-এর পুরোনো ল্যাপটপেও HTML-CSS শেখা পুরোপুরি সম্ভব; শুধু একসাথে অনেক ট্যাব খোলা না রাখলেই হলো।

শুধু ফোন আছে? তাহলেও শুরু করা যায়

এখনো কম্পিউটার না থাকলে হতাশ হবেন না। ফোনের ব্রাউজারে CodePen-এর মতো অনলাইন editor খুলে HTML-CSS লেখা যায়, ফলও সাথে সাথে দেখা যায়। Android-এ Acode-এর মতো code editor অ্যাপও আছে। আর এই কোর্সের প্রতিটি পর্বের লাইভ এডিটর ফোনের ব্রাউজারেও চলে (এডিটরের পরিচয় অংশ ৯-এ)।

ফোন একটি সাময়িক সমাধান, স্থায়ী নয়। ছোট স্ক্রিনে লম্বা কোড পড়া কঠিন, কিবোর্ডে < > { } খুঁজতে সময় যায়, আর DevTools প্রায় পাওয়াই যায় না। শেখা চালিয়ে যান, কিন্তু সুযোগ পেলেই কম্পিউটারে চলে আসুন — পরিবারের কারও ল্যাপটপ, কলেজের ল্যাব বা সাইবার ক্যাফে, যেটা পান।

মূল ধারণা

Word বা Google Docs দিয়ে HTML লিখবেন না। ওগুলো word processor — লেখার সাথে লুকিয়ে ফন্ট, রং, পাতার মাপ জুড়ে দেয়, আর “ বাঁকা উদ্ধৃতিচিহ্ন ” বসিয়ে কোড নষ্ট করে। কোডের জন্য দরকার plain text লেখে এমন editor. Windows-এর Notepad-এও চলে, কিন্তু code editor কাজ অনেক সহজ করে দেয়।

২ · VS Code ইনস্টল — Windows, macOS আর Linux

বাজারে অনেক ভালো editor আছে — Sublime Text, WebStorm, Zed, Vim. এই কোর্সে আমরা VS Code (Visual Studio Code) ব্যবহার করব। কারণগুলো সহজ: এটি বিনামূল্যের, তিনটি অপারেটিং সিস্টেমেই চলে, HTML-CSS-এর অনেক সুবিধা আগে থেকেই ভেতরে আছে, আর ব্যবহারকারী এত বেশি যে যেকোনো সমস্যার সমাধান অনলাইনে সহজেই মেলে। Microsoft এটি ২০১৫ সালে প্রকাশ করে। নামে মিল থাকলেও পুরোনো, ভারী “Visual Studio” আলাদা জিনিস — ওটি লাগবে না।

সবসময় অফিসিয়াল সাইট code.visualstudio.com থেকে ডাউনলোড করুন। অচেনা সাইটের “ফ্রি ডাউনলোড” বোতাম থেকে নামানো ফাইলে ক্ষতিকর প্রোগ্রাম লুকানো থাকতে পারে। আপনার যে কম্পিউটার, সেই ট্যাবটি বেছে নিন:

সাইটে গেলে নিজে থেকেই Windows-এর বোতাম দেখাবে। ডাউনলোড করা installer-এ ডাবল-ক্লিক করুন।
License মেনে Next চাপতে থাকুন। “Select Additional Tasks” পাতায় দুটি টিক অবশ্যই দিন: Add “Open with Code” action (ফোল্ডারে right-click করে VS Code খোলা যাবে) আর Add to PATH (terminal থেকে code কমান্ড চলবে)।
Install শেষে VS Code খুলুন। বাঁ পাশের সারিতে কয়েকটি আইকন দেখলেই বুঝবেন ঠিকঠাক বসেছে।

সাইট থেকে macOS-এর ফাইলটি নামান — এটি একটি zip. খুললেই Visual Studio Code অ্যাপ পাবেন।
অ্যাপটি টেনে Applications ফোল্ডারে রাখুন। Downloads ফোল্ডার থেকে সরাসরি চালাবেন না।
VS Code খুলে Cmd+Shift+P চাপুন, লিখুন shell command, তারপর Install 'code' command in PATH বেছে নিন। এতে Terminal থেকে code . লিখে ফোল্ডার খোলা যাবে।

Ubuntu বা Debian হলে সাইট থেকে .deb ফাইল নামিয়ে terminal-এ নিচের লাইনটি দিন। Fedora-র মতো distro-তে .rpm ফাইল আছে; অনেক distro-র Software Center-এও পাবেন।

sudo apt install ./code_*.deb

শেষে terminal-এ code --version লিখে দেখুন — একটি version নম্বর এলেই কাজ শেষ।

প্রথমবার খুললে VS Code কিছু প্রশ্ন করতে পারে — রং কেমন হবে (theme), কোন ভাষা ইত্যাদি। এগুলো রুচির ব্যাপার, যা খুশি বেছে নিন; পরে Settings থেকে বদলানো যায়। মেনুর ভাষা ইংরেজিই রাখার পরামর্শ দেব, কারণ অনলাইনের সব সাহায্য-লেখা ইংরেজি মেনুর নাম ধরে লেখা।

কোন ব্রাউজার ইনস্টল করবেন? Windows-এ Edge আগে থেকেই থাকে, Mac-এ Safari. এর সাথে অন্তত আরেকটি ভিন্ন ধরনের ব্রাউজার রাখুন — যেমন Chrome আর Firefox দুটোই। কেন “ভিন্ন ধরনের” দরকার, সেটি অংশ ৬-এ দেখব।

৩ · প্রজেক্ট ফোল্ডার আর ফাইলের নামের নিয়ম

নতুনদের একটি সাধারণ অভ্যাস হলো Desktop-এ এলোমেলো test.html, test2.html, new final.html জমিয়ে রাখা। কয়েক সপ্তাহ পর আর কিছুই খুঁজে পাওয়া যায় না। পেশাদাররা অন্যভাবে কাজ করেন: প্রতিটি ওয়েবসাইট মানে একটি ফোল্ডার। সেই ফোল্ডারের ভেতরে থাকে HTML, CSS, ছবি — সব। পরে ওয়েবসাইট প্রকাশ করার সময় (পর্ব ৫৩) পুরো ফোল্ডারটিই সার্ভারে তুলে দিতে হয়।

একটি ফোল্ডার মানে যেন একটি দোকানঘর। দোকানের সব মাল ঘরের ভেতরেই থাকে, তাকে তাকে সাজানো — চালের তাক, ডালের তাক। প্রধান দরজা দিয়ে ক্রেতা ঢোকেন। ওয়েবসাইটের সেই প্রধান দরজার নাম index.html. কেউ শুধু ফোল্ডারের ঠিকানা দিলে (যেমন abcltech.com/html-css/) বেশিরভাগ web server নিজে থেকেই সেই ফোল্ডারের index.html দেখায়।

নিচের ডায়াগ্রামে একটি বাজারের তালিকার ছোট ওয়েবসাইট শুরু করার পুরো পথটি ধাপে ধাপে দেখুন। “পরে” চাপুন:

ফোল্ডারbazar-listপ্রজেক্টের ঘর
VS CodeOpen Folderঘরটি খোলা
নতুন ফাইলindex.htmlপ্রধান দরজা
Emmet! + Tabকঙ্কাল তৈরি
ব্রাউজারCtrl+Sফল দেখা

File Explorer / Finderএকটি জায়গায় সব প্রজেক্ট

Documents/
└── web-projects/
    └── bazar-list/      ← নতুন, ফাঁকা ফোল্ডার

VS Code — Explorerবাঁ পাশে ফোল্ডারের নাম

EXPLORER
▾ BAZAR-LIST
  (এখনো কোনো ফাইল নেই)

“Do you trust the authors…?” প্রশ্ন এলে —
নিজের বানানো ফোল্ডার, তাই “Yes, I trust” চাপুন

VS Code — Explorerনিচের ডান কোণে লেখা: HTML

▾ BAZAR-LIST
  index.html           ← New File আইকনে চেপে নাম দিন

নিচের status bar-এ “HTML” দেখালে বুঝবেন
VS Code ফাইলটিকে HTML হিসেবে চিনেছে

index.html! লিখে Tab — পুরো কঙ্কাল

<!DOCTYPE html>
<html lang="en">      ← বাংলা পেজ হলে "bn" করে দিন
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>   ← নিজের শিরোনাম দিন
</head>
<body>

</body>
</html>

ব্রাউজারের ঠিকানা-ঘরফাইলে ডাবল-ক্লিক করে খোলা

file:///C:/Users/Rahim/Documents/web-projects/bazar-list/index.html

লেখা বদলালে: Ctrl+S দিয়ে সেভ → ব্রাউজারে F5 দিয়ে রিলোড

ধাপ ১ — একটি ঘর বানান। সব প্রজেক্টের জন্য একটি মূল ফোল্ডার রাখুন (যেমন web-projects), তার ভেতরে প্রতিটি সাইটের আলাদা ফোল্ডার। নাম দিন ছোট হাতের অক্ষরে, শব্দের মাঝে হাইফেন: bazar-list.
ধাপ ২ — ফাইল নয়, ফোল্ডার খুলুন। VS Code-এ File → Open Folder. এতে বাঁ পাশে পুরো প্রজেক্ট দেখা যায়, আর editor বুঝতে পারে কোন ফাইল কোন ফাইলের পাশে আছে — লিংক বা ছবির path লেখার সময় এটি নাম সাজেস্ট করে।
ধাপ ৩ — প্রধান পেজ তৈরি। Explorer-এ ফোল্ডারের নামের পাশের New File আইকন চেপে নাম দিন index.html. শেষের .html-ই VS Code আর ব্রাউজারকে বলে দেয় এটি HTML ফাইল।
ধাপ ৪ — Emmet দিয়ে কঙ্কাল। ফাঁকা ফাইলে শুধু ! লিখুন; একটি সাজেশন দেখাবে। Tab (বা Enter) চাপলেই পুরো HTML boilerplate চলে আসে। প্রতিটি লাইনের মানে পর্ব ৩-এ বিস্তারিত দেখব।
ধাপ ৫ — সেভ করে দেখুন। Ctrl+S (Mac-এ Cmd+S) দিয়ে সেভ করুন, তারপর File Explorer-এ ফাইলটিতে ডাবল-ক্লিক করুন। ঠিকানা-ঘরে file:/// দিয়ে শুরু একটি ঠিকানা দেখবেন — এর রহস্য অংশ ৫-এ।

ফাইলের নামের চারটি নিয়ম

নিয়ম	ভালো নাম	ঝামেলার নাম	কেন
সব ছোট হাতের অক্ষর	`about.html`	`About.html`	বেশিরভাগ ওয়েব সার্ভার Linux-এ চলে, যেখানে নাম case-sensitive. লিংকে `about.html` লিখলে `About.html` খুঁজে পাবে না।
ফাঁকা জায়গা নয়, হাইফেন	`contact-us.html`	`contact us.html`	ঠিকানায় ফাঁকা জায়গা `%20` হয়ে যায়; লিংক লেখায় ভুল হয়।
শুধু ইংরেজি অক্ষর, সংখ্যা, হাইফেন	`price-2026.html`	`দাম#১.html`	`#`, `?`, `&` ঠিকানায় বিশেষ অর্থ বহন করে; বাংলা নাম কাজ করলেও ঠিকানা লম্বা সাংকেতিক লেখায় বদলে যায়।
ঠিক extension	`index.html`	`index.html.txt`	Extension দেখে ব্রাউজার আর সার্ভার ঠিক করে ফাইলটি কী। ভুল হলে পেজের বদলে কোড লেখা দেখাবে।

Windows-এর লুকানো extension-এর ফাঁদ। Windows ডিফল্টভাবে নামের শেষের extension লুকিয়ে রাখে। ফলে Notepad-এ “index.html” নামে সেভ করলে আসলে তৈরি হতে পারে index.html.txt — অথচ আপনি দেখবেন শুধু “index.html”! ব্রাউজারে খুললে সুন্দর পেজের বদলে কোডের লেখা দেখায়। সমাধান: File Explorer-এ View মেনু খুলুন। Windows 11-এ Show → File name extensions, Windows 10-এ View ট্যাবে File name extensions বাক্সে টিক দিন। ওয়েব ডেভেলপার হিসেবে এটি সবসময় চালু রাখুন। Mac-এ Finder → Settings → Advanced-এ “Show all filename extensions” চালু করা যায়।

ধীরে ধীরে প্রজেক্ট বড় হলে ফোল্ডারটি সাধারণত এমন দেখায়। এখনই সব লাগবে না — শুধু কাঠামোর ধারণাটি মাথায় রাখুন:

bazar-list/
├── index.html        ← প্রধান পেজ
├── about.html
├── css/
│   └── style.css     ← সব নকশা (পর্ব ১৬ থেকে)
└── images/
    └── logo.png

৪ · VS Code-এর কাজের ফিচার — Emmet, auto-save, format আর multi-cursor

VS Code-এর আসল শক্তি টাইপ বাঁচানোয়। HTML-এ প্রতিটি element-এর শুরুর আর শেষের ট্যাগ লিখতে হয়, ফলে একই জিনিস বারবার টাইপ করতে হয়। কয়েকটি ফিচার শিখে নিলে লেখার গতি কয়েক গুণ বাড়ে, আর টাইপের ভুলও কমে।

Emmet — সংক্ষেপে লিখুন, পুরোটা পান

Emmet হলো HTML-এর জন্য এক ধরনের শর্টহ্যান্ড। VS Code-এ এটি আগে থেকেই ভেতরে থাকে, আলাদা কিছু ইনস্টল করতে হয় না। শর্ত একটাই — ফাইলটি .html নামে সেভ থাকতে হবে, যাতে VS Code বোঝে এটি HTML. সবচেয়ে কাজের সংক্ষেপটি হলো একটিমাত্র চিহ্ন:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

একটি চিহ্ন থেকে এগারো লাইন! তবে Emmet যা দেয়, তা অন্ধভাবে রেখে দেবেন না। দুটি জিনিস প্রতিবার বদলান: lang="en"-কে বাংলা পেজে lang="bn" করুন (কেন জরুরি, পর্ব ১৪-এ), আর Document-এর জায়গায় পেজের আসল শিরোনাম দিন। নিচের লাইভ এডিটরে ঠিক সেটাই করা হয়েছে, সাথে ul>li*3 দিয়ে বানানো একটি তালিকা:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>বাজারের তালিকা</title>
</head>
<body>
    <h1>এই সপ্তাহের বাজার</h1>
    <ul>
        <li>চাল — ৫ কেজি</li>
        <li>ডাল — ১ কেজি</li>
        <li>সয়াবিন তেল — ২ লিটার</li>
    </ul>
</body>
</html>

প্রিভিউতে একটি বড় শিরোনাম আর বিন্দু-দেওয়া তিনটি জিনিসের তালিকা দেখছেন — কোনো CSS ছাড়াই, ব্রাউজারের নিজের ডিফল্ট নকশায়। <title>-এর লেখা পেজে দেখায় না; ওটি যায় ব্রাউজারের ট্যাবে। চেষ্টা করুন: তালিকায় <li>পেঁয়াজ — ২ কেজি</li> যোগ করুন। তারপর <ul> আর </ul> দুটিকেই <ol> ও </ol> করে দেখুন — বিন্দুর বদলে কী এলো?

Emmet-এর সংক্ষেপগুলো আসলে CSS selector-এর মতো একটি ছোট ভাষা। > মানে “ভেতরে”, * মানে “এতবার”, . মানে class, {} মানে ভেতরের লেখা। একটি লম্বা সংক্ষেপ টুকরো টুকরো করে দেখুন:

ul.menu > li*3 >a {খাবার}

ফলclass-সহ একটি ul

<ul class="menu"></ul>

ফল> = এরপরেরটি ভেতরে যাবে

<ul class="menu">
    ▌   ← পরের জিনিস এখানে বসবে
</ul>

ফল* = এতবার

<ul class="menu">
    <li></li>
    <li></li>
    <li></li>
</ul>

ফলপ্রতিটি li-এর ভেতরে একটি লিংক

<ul class="menu">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

ফল{} = ভেতরের লেখা

<ul class="menu">
    <li><a href="">খাবার</a></li>
    <li><a href="">খাবার</a></li>
    <li><a href="">খাবার</a></li>
</ul>

ul.menu — ট্যাগের নাম, তারপর ডট দিয়ে class. এক টুকরোতেই তৈরি হলো <ul class="menu">. ডটের বদলে # দিলে id হতো।
> — “এর ভেতরে।” পরের জিনিসটি ul-এর সন্তান হবে, পাশে নয়। (পাশাপাশি চাইলে + লিখতে হয়।)
li*3 — একটি li, তিনবার। দোকানের তাকে একই মাপের তিনটি বাক্স সাজানোর মতো। হাতে লিখলে ছয়টি ট্যাগ টাইপ করতে হতো।
>a — প্রতিটি li-এর ভেতরে একটি লিংক। Emmet জানে লিংকের href লাগে, তাই ফাঁকা href="" রেখে দেয়, পরে ঠিকানা বসাবেন।
{খাবার} — বাঁকা বন্ধনীর লেখা element-এর ভেতরে বসে। এক লাইনের সংক্ষেপ থেকে পাঁচ লাইনের কাঠামো! Tab চাপার পর কার্সর প্রথম ফাঁকা href-এ চলে যায়; আবার Tab চাপলে পরেরটিতে।

আরও তিনটি অভ্যাস যা প্রতিদিন কাজে লাগবে

ফিচার	কী করে	কীভাবে (Windows / Mac)
Auto Save	প্রতিবার সেভ করার কথা মনে রাখতে হয় না। “ব্রাউজারে বদল দেখছি না কেন?” — নতুনদের এই প্রশ্নের অর্ধেক উত্তর হলো “ফাইল সেভ হয়নি।”	File → Auto Save-এ টিক। সেভ না হওয়া ফাইলের ট্যাবে সাদা বিন্দু দেখায়।
Format Document	এলোমেলো ইনডেন্ট এক চাপে গুছিয়ে দেয়। কোডের অর্থ বদলায় না, শুধু পড়া সহজ হয়।	`Shift`+`Alt`+`F` / `Shift`+`Option`+`F`, অথবা right-click → Format Document
Multi-cursor	একসাথে কয়েক জায়গায় কার্সর — একবার লিখলেই সব জায়গায় বসে। যেমন দশটি li-তে একসাথে class যোগ করা।	`Alt`+ক্লিক / `Option`+ক্লিক; একটি শব্দ বেছে `Ctrl`+`D` / `Cmd`+`D` চাপলে পরের একই শব্দও বেছে নেয়

আরেকটি নিয়ম শুরুতেই মনে রাখুন: সব কমান্ডের দরজা একটি — Ctrl+Shift+P (Mac-এ Cmd+Shift+P). এটি Command Palette খোলে; যা করতে চান তার নাম লিখতে শুরু করলেই VS Code খুঁজে দেয়। শর্টকাট ভুলে গেলে এখানেই আসুন।

Extension কতগুলো লাগবে? শুরুতে প্রায় কোনোটিই না। VS Code-এর extension মানে বাড়তি সুবিধার ছোট প্রোগ্রাম; বাঁ পাশের চার-বর্গের আইকন থেকে খোঁজা যায়। ইন্টারনেটে “৩০টি জরুরি extension” ধরনের তালিকা দেখবেন — সেগুলো এড়িয়ে চলুন। বেশি extension মানে ধীর editor আর অজানা লোকের কোডকে কম্পিউটারে ঢুকতে দেওয়া। এই কোর্সে শুধু একটি ঐচ্ছিক extension-এর কথা বলব, পরের অংশে। ইনস্টলের আগে দেখে নিন প্রকাশক কে, কত মানুষ ব্যবহার করেন, শেষ কবে আপডেট হয়েছে।

৫ · ফাইল খোলা বনাম local server — file:// আর http:// এক নয়

অংশ ৩-এর শেষে ফাইলে ডাবল-ক্লিক করে পেজ খুলেছিলেন, আর ঠিকানা-ঘরে দেখেছিলেন file:///. এবার একটু থেমে ভাবুন — আসল ওয়েবসাইটের ঠিকানা তো শুরু হয় https:// দিয়ে। পার্থক্যটা কী?

পর্ব ১-এ দেখেছেন, আসল ওয়েবসাইটে ব্রাউজার একটি সার্ভারের কাছে HTTP দিয়ে ফাইল চায়, সার্ভার পাঠিয়ে দেয়। কিন্তু ডাবল-ক্লিক করলে কোনো সার্ভার নেই — ব্রাউজার সরাসরি আপনার হার্ডডিস্ক থেকে ফাইল পড়ে। এই URL বা ঠিকানাকে বলে file:// URL. HTML আর CSS শেখার শুরুতে এতে কোনো সমস্যা হয় না। কিন্তু কিছু জিনিস এখানে ঠিকমতো চলে না, আর সেটা না জানলে অনেকে ঘণ্টার পর ঘণ্টা ভুল জায়গায় খোঁজেন।

ডিস্কের ফাইলindex.htmlআপনার ফোল্ডারে
ব্রাউজারfile:///সার্ভার ছাড়া
Local server127.0.0.1:5500নিজের কম্পিউটারে
ব্রাউজারhttp://আসল সাইটের মতো

ঠিকানা-ঘরডাবল-ক্লিক করে খোলা

file:///C:/Users/Rahim/web-projects/bazar-list/index.html

যা ঠিকঠাক চলেশেখার শুরুতে প্রায় সবকিছু

<link rel="stylesheet" href="css/style.css">   ✔ পাশের ফোল্ডার থেকে
<img src="images/logo.png" alt="লোগো">     ✔
<a href="about.html">আমাদের কথা</a>        ✔

যা ভাঙেConsole-এ লাল লেখা

<link href="/css/style.css">   ✘ "/" = ড্রাইভের গোড়া, প্রজেক্ট নয়
fetch("data.json")             ✘ file:// থেকে fetch বন্ধ
<script type="module">         ✘ origin 'null' — CORS-এ আটকায়

Chrome-এর Console-এ মোটামুটি এমন লেখা:
Access to script at 'file:///…/app.js' from origin 'null'
has been blocked by CORS policy …

ঠিকানা-ঘরlocal server দিয়ে খোলা

http://127.0.0.1:5500/index.html

127.0.0.1 = “এই কম্পিউটারটিই”, 5500 = port নম্বর

VS Codeসেভ → নিজে থেকেই রিলোড

index.html সেভ হলো (Ctrl+S)
   ↓
server টের পেল ফাইল বদলেছে
   ↓
ব্রাউজারের পেজ নিজে থেকেই রিলোড   ← F5 চাপতে হয় না

পথ ১ — সরাসরি ডিস্ক থেকে। ডাবল-ক্লিক করলে ব্রাউজার ফাইলটি নিজের হাতে পড়ে নেয়, মাঝে কোনো সার্ভার নেই। ঠিকানা শুরু হয় file:/// দিয়ে, তারপর আপনার কম্পিউটারের পুরো ফোল্ডার-পথ।
যা চলে: পাশের ফাইলের relative ঠিকানা — css/style.css, images/logo.png, about.html. মডিউল ১ থেকে ৬-এর প্রায় সব কাজ এভাবেই করা যাবে। Path-এর নিয়ম পর্ব ৫-এ বিস্তারিত।
যা ভাঙে: / দিয়ে শুরু ঠিকানা আসল সাইটে মানে “সাইটের গোড়া”, কিন্তু file://-এ মানে “ড্রাইভের গোড়া” (যেমন C:\)। আর নিরাপত্তার কারণে ব্রাউজার file:// পেজকে অন্য ফাইল পড়তে দেয় না — তাই JavaScript-এর fetch আর type="module" script আটকে যায়। ভাবুন, ইন্টারনেট থেকে নামানো একটি HTML ফাইল যদি আপনার পুরো ডিস্ক পড়তে পারত!
পথ ২ — local server. নিজের কম্পিউটারেই একটি ছোট web server চালান। সে আপনার ফোল্ডারটিকে http:// ঠিকানায় পরিবেশন করে। 127.0.0.1 বা localhost মানে “এই কম্পিউটারটিই” — ইন্টারনেট সংযোগ ছাড়াও চলে।
বাড়তি লাভ — live reload. এখন ব্রাউজার আসল ওয়েবসাইটের মতো আচরণ করে, তাই হোস্টিংয়ে তোলার পর চমক কম থাকে। আর Live Server-এর মতো টুল ফাইল সেভ হলেই পেজ নিজে থেকে রিলোড করে — বারবার F5 চাপতে হয় না।

Local server চালানোর সহজ উপায় (ঐচ্ছিক)

দুটি জনপ্রিয় VS Code extension আছে; যেকোনো একটি নিলেই চলবে, আবার না নিলেও এই মুহূর্তে ক্ষতি নেই:

Live Server (প্রকাশক Ritwick Dey): ইনস্টলের পর নিচের status bar-এ Go Live বোতাম আসে। চাপলে ব্রাউজারে সাধারণত http://127.0.0.1:5500 খোলে, আর সেভ করলেই পেজ রিলোড হয় — একে বলে live reload.
Live Preview (প্রকাশক Microsoft): পেজটি VS Code-এর ভেতরেই পাশের একটি প্যানেলে দেখায়, লেখার সাথে সাথে বদলায়।

Python ইনস্টল থাকলে extension ছাড়াও চলে: প্রজেক্ট ফোল্ডারে terminal খুলে নিচের কমান্ড দিন, তারপর ব্রাউজারে http://localhost:8000 খুলুন। বন্ধ করতে Ctrl+C.

python -m http.server 8000

Live Server পেজে live reload-এর জন্য নিজের একটি ছোট script ঢুকিয়ে দেয়। তাই DevTools-এর Elements-এ </body>-এর ঠিক আগে একটি অচেনা <script> দেখলে ঘাবড়াবেন না — ওটি আপনার ফাইলে নেই, server পাঠানোর পথে যোগ করেছে। (এটিই অংশ ৮-এর বিষয়ের একটি চমৎকার উদাহরণ!)

৬ · কোন কোন ব্রাউজারে পরীক্ষা করবেন — engine-এর হিসাব

আপনার পেজ মানুষ দেখবেন নানা ব্রাউজারে — কেউ সস্তা Android ফোনের Chrome-এ, কেউ অফিসের Edge-এ, কেউ iPhone-এর Safari-তে। প্রতিটি ব্রাউজারের ভেতরে থাকে একটি rendering engine — যে অংশ HTML-CSS পড়ে পেজ আঁকে। ব্রাউজারের নাম অনেক, কিন্তু বড় engine আসলে মাত্র তিনটি:

ব্রাউজার	Engine	নির্মাতা	মনে রাখার কথা
Chrome	Blink	Google	বাংলাদেশে বিশেষ করে Android ফোনে সবচেয়ে বেশি দেখা যায়
Edge	Blink	Microsoft	২০২০ সাল থেকে Chromium-ভিত্তিক; Windows-এ আগে থেকেই থাকে
Samsung Internet, Opera, Brave	Blink	বিভিন্ন	ভেতরে Chrome-এর মতোই, ওপরে আলাদা সাজ
Firefox	Gecko	Mozilla	স্বাধীন engine; CSS Grid দেখার DevTools বিশেষ করে ভালো
Safari	WebKit	Apple	Mac আর iPhone-এ; iPhone-এর অন্য ব্রাউজারকেও (ইউরোপীয় ইউনিয়নের বাইরে আজও) WebKit ব্যবহার করতে হয়

অর্থাৎ Chrome আর Edge-এ একই রকম দেখালে বেশিরভাগ ক্ষেত্রে Opera বা Samsung Internet-এও তাই দেখাবে, কারণ সবার ভেতরে Blink. কিন্তু Firefox আর Safari আলাদা engine — নতুন CSS ফিচারে, ফর্মের নকশায় বা ফন্ট আঁকায় মাঝে মাঝে পার্থক্য দেখা দেয়। তাই ব্যবহারিক নিয়ম:

প্রতিদিনের কাজ একটি Blink ব্রাউজারে (Chrome বা Edge) — DevTools সবচেয়ে সমৃদ্ধ
কাজ শেষে অন্তত একবার Firefox-এ খুলে দেখা
সুযোগ থাকলে একটি iPhone বা Mac-এর Safari-তে দেখা — না থাকলে বন্ধুর ফোনে একবার
সবসময় একটি আসল, সস্তা Android ফোনে দেখা — আপনার বেশিরভাগ পাঠক সেখানেই

নতুন কোনো CSS ফিচার সব ব্রাউজারে চলে কি না, তা বোঝার জন্য এই কোর্সে বারবার Baseline শব্দটি পাবেন। “Baseline Widely available” মানে ফিচারটি প্রধান সব ব্রাউজারে বেশ কিছুদিন ধরে চলে — নিশ্চিন্তে ব্যবহার করুন। “Newly available” মানে সবে সব জায়গায় এসেছে, পুরোনো ডিভাইসের জন্য বিকল্প রাখুন। পুরো পদ্ধতি পর্ব ৪৮-এ।

৭ · DevTools সফর — Elements, Styles, Console, Network আর device toolbar

ডাক্তার রোগীর বাইরেটা দেখে সব বোঝেন না; এক্স-রে করে ভেতরের হাড় দেখেন। আপনার ওয়েব পেজের এক্স-রে মেশিন হলো DevTools — যেকোনো ওয়েবসাইটে, এমনকি অন্যের সাইটেও, খুলে দেখা যায় ভেতরে কী আছে। খোলার উপায়:

কী করতে চান	Windows / Linux	Mac
DevTools খোলা/বন্ধ	`F12` বা `Ctrl`+`Shift`+`I`	`Cmd`+`Option`+`I`
নির্দিষ্ট একটি জিনিস পরীক্ষা	সেটির ওপর right-click → Inspect	একই (Safari-তে “Inspect Element”)
পেজে ক্লিক করে element বাছাই	`Ctrl`+`Shift`+`C`	`Cmd`+`Shift`+`C`
মোবাইলের মাপে দেখা	DevTools খোলা অবস্থায় `Ctrl`+`Shift`+`M`	`Cmd`+`Shift`+`M`

Safari-তে শুরুতে DevTools লুকানো থাকে: Safari-র Settings → Advanced-এ গিয়ে ওয়েব ডেভেলপারদের ফিচার (Develop মেনু) চালু করতে হয়, তারপর একই শর্টকাট কাজ করে। এবার প্রধান পাঁচটি অংশ একে একে দেখুন:

Elements Styles Console Network 📱 Device toolbar

Elementsপেজের জীবন্ত গাছ

▾ <html lang="bn">
  ▸ <head>…</head>
  ▾ <body>
      <h1>এই সপ্তাহের বাজার</h1>  == $0   ← বেছে নেওয়া element
    ▸ <ul>…</ul>
    </body>
  </html>

Stylesকোন CSS নিয়ম কাজ করছে

.card .price {             style.css:9
    color: crimson;
}
.price {                   style.css:5
    color: green;          ← কাটা দাগ = হেরে গেছে
    font-size: 1.4rem;
}

Consoleerror আর বার্তা

✘ GET http://127.0.0.1:5500/images/logo.png 404 (Not Found)
> document.title
'বাজারের তালিকা'

Networkকোন ফাইল এলো, কতক্ষণে

Name          Status   Type         Size     Time
index.html    200      document     1.2 kB   8 ms
style.css     200      stylesheet   3.4 kB   5 ms
logo.png      404      png          0 B      3 ms   ← পাওয়া যায়নি

Device toolbarছোট পর্দায় পেজ

Dimensions: [ Responsive ▾ ]   360 × 740   ← মাপ বদলান
┌──────────────┐
│ এই সপ্তাহের    │
│ বাজার         │
│ • চাল — ৫ কেজি │
└──────────────┘

Elements — পেজের গাছ। এখানে দেখবেন ব্রাউজার যে DOM বানিয়েছে, ঠিক এই মুহূর্তের অবস্থায়। ত্রিভুজে চেপে ডাল খুলুন-বন্ধ করুন; কোনো লেখায় ডাবল-ক্লিক করে বদলে দেখুন — পেজেও সাথে সাথে বদলাবে। কিন্তু রিলোড দিলেই সব আগের মতো: আপনার ফাইলে কিছুই লেখা হয়নি।
Styles — কোন CSS জিতল। Elements-এ একটি element বাছলে ডান পাশে (বা নিচে) তার সব CSS নিয়ম দেখায়। কাটা দাগ দেওয়া লাইন মানে সেই নিয়মটি আরেকটি নিয়মের কাছে হেরে গেছে — কেন হারে, সেই “cascade”-এর হিসাব পর্ব ১৮-এ। পাশের Computed ট্যাবে দেখায় শেষ পর্যন্ত আসলে কী মান বসেছে।
Console — পেজের অভিযোগ বাক্স। ছবি না পাওয়া, JavaScript-এর ভুল, নিরাপত্তার কারণে আটকানো — সব লাল লেখায় এখানে আসে। পেজ ঠিক না দেখালে প্রথমে Console দেখুন। এখানে document.title-এর মতো ছোট JavaScript লিখে Enter চাপলে সাথে সাথে উত্তর পাওয়া যায়।
Network — ডেলিভারির খাতা। পেজ খুলতে কোন কোন ফাইল এলো, প্রতিটির status, আকার আর সময় — সব এক তালিকায়। 200 মানে পাওয়া গেছে, 404 মানে পাওয়া যায়নি (প্রায়ই path বা নামের বানান ভুল)। তালিকা দেখতে DevTools খোলা রেখে পেজ রিলোড দিন। “Disable cache” টিক দিলে ব্রাউজার পুরোনো কপি না দেখিয়ে প্রতিবার নতুন ফাইল আনে।
Device toolbar — হাতে ফোন না থাকলেও। ফোনের আইকনে চাপলে (বা Ctrl+Shift+M) পেজটি ছোট পর্দার মাপে দেখায়; প্রস্থ টেনে বদলানো যায়, ধীর নেটওয়ার্কের ভানও করা যায়। তবে এটি শুধু মাপের অনুকরণ — আসল ফোনের ব্রাউজার, স্পর্শ আর গতি নয়। তাই শেষ পরীক্ষা আসল ফোনেই। রেসপন্সিভ নকশা আসছে পর্ব ৩০-এ।

শুধু পড়ে DevTools শেখা যায় না, হাত লাগাতে হয়। নিচের প্রিভিউটি আপনার অনুশীলনের জায়গা। প্রিভিউর ভেতরের দাম লেখাটির ওপর right-click করে Inspect চাপুন:

<style>
  .card { max-width: 260px; padding: 16px; border: 2px solid #0a7d5a;
          border-radius: 12px; font-family: system-ui, sans-serif; }
  .card h2 { margin: 0 0 6px; color: navy; }
  .price { color: green; font-size: 1.4rem; }
  .card .price { color: crimson; }
</style>

<div class="card">
  <h2>ইলিশ মাছ</h2>
  <p class="price">৳১,২০০ / কেজি</p>
  <button type="button" onclick="console.log('কার্টে যোগ হলো: ইলিশ')">
    কার্টে যোগ করুন
  </button>
</div>

প্রিভিউতে সবুজ বর্ডারের একটি কার্ড দেখছেন, দামটি লাল (crimson) — সবুজ নয়, যদিও .price-এ green লেখা আছে। Inspect করলে Styles প্যানেলে দেখবেন color: green কাটা দাগে, কারণ .card .price বেশি নির্দিষ্ট নিয়ম (পর্ব ১৮)। বোতাম চাপলে বার্তাটি প্রিভিউর নিচে দেখাবে। চেষ্টা করুন: DevTools-এর Styles-এ crimson-এর ওপর ক্লিক করে purple লিখুন — পেজ বদলাল, কিন্তু এডিটরের কোড বদলায়নি। তারপর কোডে শেষ নিয়মটি মুছে দিন — এবার দাম সবুজ হয় কি না দেখুন।

৮ · View Source বনাম Elements — আপনার লেখা আর ব্রাউজারের বানানো জিনিস আলাদা

যেকোনো পেজে Ctrl+U চাপুন (Mac-এ Chrome-এ Cmd+Option+U), অথবা ঠিকানার আগে view-source: লিখুন। নতুন ট্যাবে খুলবে View Source — সার্ভার যে HTML ফাইল পাঠিয়েছে, তার হুবহু লেখা, এক অক্ষরও বদল ছাড়া। অনেকে ভাবেন DevTools-এর Elements-ও একই জিনিস দেখায়। দেখায় না।

দর্জিকে আপনি একটি মাপের কাগজ দিলেন — তাতে কিছু মাপ লিখতে ভুলে গেছেন, কোথাও কাটাকুটি। দক্ষ দর্জি নিজের অভিজ্ঞতায় ফাঁকগুলো পূরণ করে জামা বানালেন। View Source হলো আপনার দেওয়া মাপের কাগজ; Elements হলো দর্জির বানানো আসল জামা। দুটো মিলিয়ে দেখলেই বোঝা যায় দর্জি কোথায় নিজে থেকে কী বদলেছেন।

ব্রাউজারের HTML parser আপনার লেখা অক্ষর ধরে ধরে পড়ে DOM গাছ বানায়। ভুল পেলে সে error দেখিয়ে থেমে যায় না, বরং HTML Living Standard-এ লেখা নির্দিষ্ট নিয়মে মেরামত করে নেয়। তারপর JavaScript চাইলে সেই গাছ আরও বদলায়। নিচের কোডে ইচ্ছা করে কয়েকটি “অসম্পূর্ণ” জিনিস রাখা হয়েছে, আর শেষের ছোট script ব্রাউজারের বানানো DOM থেকে লেখা তুলে দেখাচ্ছে:

<p>প্রথম অনুচ্ছেদ — শেষের ট্যাগ নেই
<p>দ্বিতীয় অনুচ্ছেদ
<table id="t"><tr><td>চাল</td><td>৳৭৫</td></tr></table>
<ul id="list"><li>ডাল<li>তেল</ul>
<div id="m"><b>মোটা <i>বাঁকা</b> লেখা</i></div>

<script>
  console.log('p কয়টি: ' + document.querySelectorAll('p').length);
  console.log(document.getElementById('t').outerHTML);
  console.log(document.getElementById('list').outerHTML);
  console.log(document.getElementById('m').innerHTML);
</script>

প্রিভিউর নিচের লেখাগুলো আপনার কোড নয় — ব্রাউজারের বানানো DOM. খেয়াল করুন: (১) দুটি <p> ঠিকঠাক আলাদা, কারণ নতুন <p> বা <table> এলে খোলা p নিজে থেকেই বন্ধ হয়; (২) টেবিলে <tbody> ঢুকে গেছে, যা আপনি লেখেননি; (৩) প্রতিটি li-এর শেষ ট্যাগ বসেছে; (৪) উল্টাপাল্টা <b><i> ভেঙে দুই টুকরো <i> হয়েছে। চেষ্টা করুন: প্রিভিউর টেবিলে right-click → Inspect করে Elements-এ tbody খুঁজুন। তারপর প্রথম লাইনের শেষে </p> যোগ করুন — সংখ্যা কি বদলায়?

বিষয়	View Source (Ctrl+U)	Elements প্যানেল
কী দেখায়	সার্ভার থেকে আসা আসল লেখা	ব্রাউজারের বানানো এই মুহূর্তের DOM
ব্রাউজারের মেরামত	দেখা যায় না	দেখা যায় (যেমন `tbody`)
JavaScript-এর বদল	দেখা যায় না	দেখা যায়, লাইভ
বদলানো যায়?	না	হ্যাঁ, কিন্তু শুধু সাময়িক — রিলোডে মুছে যায়
কখন কাজে লাগে	সার্ভার আসলে কী পাঠাচ্ছে, SEO-র meta ট্যাগ আছে কি না	নকশা কেন এমন দেখাচ্ছে, কোন element কোথায়

আরও গভীরে: HTML Living Standard-এ parsing-এর পুরো নিয়ম ধাপে ধাপে লেখা আছে — প্রথমে একটি tokenizer অক্ষরগুলোকে ট্যাগ আর লেখায় ভাগ করে, তারপর tree construction ধাপ বিভিন্ন “insertion mode” মেনে গাছ বানায়। উল্টাপাল্টা <b><i> সামলানোর নিয়মটির নাম adoption agency algorithm. HTML5-এর আগে প্রতিটি ব্রাউজার নিজের মতো করে মেরামত করত, তাই একই ভাঙা পেজ ভিন্ন ব্রাউজারে ভিন্ন দেখাত; এখন সবাই একই নিয়ম মানে বলে ফল একই হয়।

ব্রাউজার মেরামত করে দেয় বলে ভুল লেখা “চলে যায়” — কিন্তু সব মেরামত আপনার ইচ্ছামতো হয় না, আর screen reader বা সার্চ ইঞ্জিন সেই ভুল কাঠামোই পায়। তাই নিজের HTML মাঝে মাঝে validator-এ (validator.w3.org) যাচাই করুন। আর একটি সতর্কতা: Elements-এ যেকোনো লেখা বদলে স্ক্রিনশট নেওয়া যায় — তাই কারও পাঠানো “ব্যাংক ব্যালেন্সের স্ক্রিনশট” বা “অনলাইন দোকানের দামের ছবি” কোনো প্রমাণ নয়।

৯ · অনলাইন playground আর এই কোর্সের লাইভ এডিটর

কখনো শুধু একটি ছোট জিনিস পরীক্ষা করতে চান — ফোল্ডার বানানো, ফাইল খোলার ঝামেলা ছাড়াই। এজন্য আছে online playground: ব্রাউজারেই HTML, CSS আর JavaScript-এর আলাদা ঘর, লিখলেই পাশে ফল। পরিচিত দুটি হলো CodePen আর JSFiddle. দুটিতেই কাজ সেভ করে লিংক দিয়ে অন্যকে দেখানো যায় — কোনো প্রশ্নে সাহায্য চাইতে চমৎকার। তবে মনে রাখুন, সেখানে অনেক জিনিস আড়ালে আগে থেকে সাজানো থাকে (যেমন doctype বা head-এর অংশ), তাই আসল প্রজেক্টের অভ্যাস তৈরি হয় নিজের ফোল্ডারে কাজ করেই। আর এসব সাইটে সেভ করা কাজ সাধারণত সবার জন্য খোলা থাকে — গোপন কিছু রাখবেন না।

এই কোর্সের লাইভ এডিটর কীভাবে কাজ করে

এই কোর্সের প্রায় প্রতিটি পর্বে আপনি এমন কোডের বাক্স পাবেন, যার নিচে সাথে সাথে ফল দেখা যায়। কয়েকটি কথা জেনে রাখলে এগুলো থেকে সবচেয়ে বেশি শিখবেন:

কোডেই ক্লিক করে লিখুন। লেখা বদলালে প্রিভিউ নিজে থেকেই নতুন হয়। গোলমাল হয়ে গেলে “আগের কোড” বোতাম চাপলে মূল কোড ফিরে আসে — তাই নির্ভয়ে ভাঙুন।
প্রিভিউ একটি আলাদা, সুরক্ষিত ছোট পাতা। এর ওপর এই সাইটের কোনো নকশা চাপানো নেই, তাই যা দেখেন তা ব্রাউজারের আসল ডিফল্ট — নিজের ফাইলে লিখলে যা দেখতেন, ঠিক তাই।
বার্তা প্রিভিউর নিচে। কোডে console.log থাকলে তার লেখা প্রিভিউর নিচে আসে। ফর্ম জমা দিলে পেজ রিলোড না হয়ে লেখা আসে “ফর্ম জমা হতো → …” — অর্থাৎ ফর্ম কোন নামে কী পাঠাত।
কিছু সীমা আছে। প্রিভিউ থেকে ইন্টারনেটে কিছু আনা যায় না, আর ব্রাউজারের storage বা pop-up (alert) বন্ধ। তাই বাইরের ছবির বদলে আমরা CSS-এ আঁকা নকশা বা emoji ব্যবহার করব।
প্রিভিউতেও DevTools চলে। অংশ ৭-এর মতো right-click → Inspect করে প্রিভিউর ভেতরটা দেখতে পারেন।

এবার একটু ভাঙাগড়া করা যাক। নিচে রহিম ভাইয়ের মুদি দোকানের ছোট একটি পেজ। আগে যেমন আছে দেখুন, তারপর ইচ্ছা করে ভাঙুন:

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>রহিমের মুদি দোকান</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .offer { background: #fff3c4; padding: 8px 12px; border-left: 4px solid #e0a800; }
  </style>
</head>
<body>
  <h1>রহিমের মুদি দোকান</h1>
  <p class="offer">আজকের অফার: <strong>চিনি ৳১২০</strong> প্রতি কেজি</p>
  <p>খোলা থাকে সকাল ৮টা থেকে রাত ১০টা</p>
  <form>
    <label>ফোন নম্বর <input name="phone" value="01700000000"></label>
    <button>অর্ডার পাঠান</button>
  </form>
</body>
</html>

প্রিভিউতে হলুদ পটভূমির অফার-বাক্স, তাতে মোটা অক্ষরে দাম, নিচে দোকানের সময় আর একটি ছোট ফর্ম। “অর্ডার পাঠান” চাপুন — নিচে আসবে ফর্ম জমা হতো → phone=01700000000. এবার ভাঙুন: (১) </strong> মুছে দিন — পরের লাইনটিও মোটা হয়ে যায়, অথচ কোথাও কোনো error নেই! (২) class="offer"-কে class="ofer" লিখুন — হলুদ বাক্স চুপচাপ উধাও। HTML-CSS ভুল করলে চিৎকার করে না, তাই চোখ, DevTools আর validator-ই ভরসা। শেষে “আগের কোড” চাপুন।

পরীক্ষা ও ইন্টারভিউতে: এ ধরনের প্রশ্ন প্রায়ই আসে —

DevTools কী, কীভাবে খোলে? — ব্রাউজারের ভেতরের ডেভেলপার টুল; F12, Ctrl+Shift+I বা Mac-এ Cmd+Option+I.
View Source আর Inspect Element-এর পার্থক্য? — প্রথমটি সার্ভারের পাঠানো আসল HTML, দ্বিতীয়টি ব্রাউজারের বানানো বর্তমান DOM.
ডাবল-ক্লিক করে খোলা পেজে fetch কেন কাজ করে না? — file://-এর নিরাপত্তা-নিয়মে আটকায়; local server দিয়ে http://-তে চালাতে হয়।
প্রধান পেজের নাম কেন index.html? — ফোল্ডারের ঠিকানায় অনুরোধ এলে বেশিরভাগ সার্ভার ডিফল্টভাবে এই ফাইলটি দেয়।
ফাইলের নামে বড় হাতের অক্ষর এড়াই কেন? — Linux সার্ভারে নাম case-sensitive, লিংক ভেঙে যেতে পারে।

১০ · AI-এর যুগে — টুলের প্রশ্নে AI-কে কীভাবে কাজে লাগাবেন

সেটআপে আটকে গেলে AI চমৎকার সহকারী — VS Code-এর কোন মেনু কোথায়, কোন error-এর মানে কী, সবই ধৈর্য ধরে বুঝিয়ে দেয়। কিন্তু AI আপনার স্ক্রিন দেখতে পায় না, আর তার জ্ঞান প্রায়ই কয়েক বছর পুরোনো লেখা থেকে আসে। VS Code আর ব্রাউজারের মেনু প্রতি কয়েক মাসে বদলায়, তাই AI এমন মেনুর নামও বলতে পারে যা এখন আর নেই।

টুল ও শুরুর কোডে AI সাধারণত যেসব ভুল করে

AI যা দেয়	সমস্যা	কীভাবে যাচাই করবেন
পুরোনো boilerplate — অপ্রয়োজনীয় `X-UA-Compatible` meta, `type="text/css"`	আর লাগে না; পুরোনো টিউটোরিয়ালের অভ্যাস	MDN-এ দেখুন; Emmet-এর `!`-এর সাথে মেলান
সব জায়গায় `<div>` — “div-soup”	অর্থহীন কাঠামো; screen reader আর সার্চ ইঞ্জিন বোঝে না	validator, DevTools-এর Accessibility ট্যাব; পর্ব ১০ ও ১২
`<center>`, `<font>`, table দিয়ে লেআউট	বহু বছর আগে বাতিল	validator.w3.org error দেখাবে
“এই ২০টি extension ইনস্টল করুন”	ধীর editor, অজানা কোড	প্রতিটির প্রকাশক আর শেষ আপডেট দেখুন; দরকার না হলে নয়
ভুল শর্টকাট বা মেনুর নাম	OS বা version আলাদা	Command Palette-এ নাম লিখে খুঁজুন

সমস্যার কথা AI-কে বলার সময় তিনটি জিনিস অবশ্যই দিন: কোন OS ও ব্রাউজার, কী করেছেন, আর Console-এ হুবহু কী লেখা এসেছে। নিচের কাঠামোটি কপি করে নিজের তথ্য বসান:

আমি Windows 11-এ VS Code আর Chrome দিয়ে HTML-CSS শিখছি। index.html ফাইলে ডাবল-ক্লিক করে খুললে পেজের লেখা আসে, কিন্তু css/style.css-এর নকশা আসছে না। আমার ফোল্ডারের গঠন আর link ট্যাগটি নিচে দিলাম। DevTools-এর Console আর Network-এ যা দেখছি সেটাও দিলাম। [ফোল্ডারের গঠন, link ট্যাগ আর Console-এর লেখা এখানে পেস্ট করো] ১. সম্ভাব্য কারণগুলো সহজ বাংলায় বলো — path, ফাইলের নাম, না অন্য কিছু? ২. প্রতিটি কারণ DevTools-এর কোন প্যানেলে কীভাবে নিজে যাচাই করব, সেটা দেখাও। ৩. পুরো কোড নতুন করে লিখে দিও না — শুধু যে লাইন বদলাতে হবে সেটা বলো। ৪. কোনো মেনু বা শর্টকাট নিয়ে নিশ্চিত না হলে সেটা স্পষ্ট করে বলো।

AI-এর উত্তর হাতে পেলে — যাচাইয়ের চেকলিস্ট

যে মেনু বা শর্টকাট বলেছে, নিজের কম্পিউটারে আসলে আছে কি না দেখেছি (না পেলে Command Palette-এ খুঁজেছি)
AI-এর দেওয়া HTML validator.w3.org-এ চালিয়েছি — কোনো error নেই
DevTools-এর Console-এ লাল লেখা নেই, Network-এ কোনো 404 নেই
কোনো tag বা CSS property অচেনা লাগলে MDN-এ পড়েছি, আর নতুন ফিচার হলে Can I use বা Baseline দেখে নিয়েছি
শেষে Chrome/Edge ছাড়াও Firefox আর একটি আসল ফোনে খুলে দেখেছি; সময় পেলে DevTools-এর Lighthouse চালিয়েছি

AI বলে কী করতে হবে, DevTools দেখায় আসলে কী হয়েছে।
দুটো মিলিয়ে দেখার অভ্যাসই আপনাকে নির্ভরযোগ্য ডেভেলপার বানাবে।

ভাবনার প্রশ্ন

প্রতিটি প্রশ্ন নিয়ে নিজে কিছুক্ষণ ভাবুন — তারপর “→ উত্তর” চাপুন। টুলের পেছনের ইতিহাস আর নকশার যুক্তি জানলে টুল বদলালেও আপনি হারিয়ে যাবেন না।

প্র ০১ভাঙা HTML পেলে ব্রাউজার error দেখায় না, চুপচাপ মেরামত করে — এটা কি ভালো নকশা, না দুর্বলতা?

দুটোই — আর এই বিতর্কের পেছনে ওয়েবের একটি বড় ইতিহাস আছে। শুরু থেকেই ব্রাউজাররা ভুল HTML মেনে নিত, কারণ ১৯৯০-এর দশকে লাখো মানুষ হাতে পেজ লিখছিলেন, আর প্রতিযোগী ব্রাউজারের কাছে “আমার ব্রাউজারে ওই সাইট খোলে না” মানেই ব্যবহারকারী হারানো। এর পেছনে ইন্টারনেট প্রকৌশলের একটি পুরোনো নীতিও ছিল — robustness principle: “যা পাঠাবেন তা নিয়ম মেনে, যা নেবেন তা উদারভাবে।”

২০০০-এর দশকের শুরুতে W3C উল্টো পথে হাঁটতে চেয়েছিল — XHTML, যেখানে পেজকে কড়া XML নিয়ম মানতে হবে। সত্যিকারের XML হিসেবে পাঠানো XHTML পেজে একটি ট্যাগ বন্ধ করতে ভুল হলে Firefox পুরো পেজের বদলে শুধু একটি হলুদ error বার্তা দেখাত; ডেভেলপাররা মজা করে এর নাম দেন “yellow screen of death”. বাস্তবে প্রায় কেউই এই ঝুঁকি নেননি। ২০০৪ সালে Apple, Mozilla আর Opera মিলে WHATWG গঠন করে, এবং তারা বিপরীত সিদ্ধান্ত নেয়: ভুল HTML-কে কীভাবে মেরামত করতে হবে, সেটিই অক্ষরে অক্ষরে স্পেসিফিকেশনে লিখে দেওয়া হবে। এখান থেকেই আসে HTML5-এর parsing algorithm. W3C ২০০৯ সালে XHTML 2-এর কাজ বন্ধ করে, আর ২০১৯ সালে দুই সংস্থা একমত হয় যে WHATWG-এর HTML Living Standard-ই মূল মানদণ্ড।

লাভ: এখন একই ভাঙা পেজ সব ব্রাউজারে একইভাবে মেরামত হয়, আর কোটি কোটি পুরোনো পেজ আজও খোলে। দাম: ভুল লুকিয়ে থাকে। </strong> ভুলে গেলে পরের অনুচ্ছেদও মোটা হয়ে যায়, কিন্তু কেউ সতর্ক করে না; screen reader ভুল কাঠামো পায়। তাই ব্রাউজারের ক্ষমাশীলতার ওপর ভরসা না করে validator আর DevTools দিয়ে নিজে যাচাই করার দায়িত্ব ডেভেলপারের।

মূল উপলব্ধি: ক্ষমাশীল সিস্টেম ব্যবহারকারীকে বাঁচায়, কিন্তু নির্মাতাকে অলস করে তোলে। ভালো ডেভেলপার ক্ষমার ওপর নির্ভর করেন না — নিয়ম মেনে লেখেন, যন্ত্র দিয়ে যাচাই করেন।

প্র ০২আমার Chrome-এ ঠিক দেখাচ্ছে — তাহলে আর অন্য ব্রাউজারে পরীক্ষার দরকার কী?

ইতিহাস এই প্রশ্নের সবচেয়ে ভালো উত্তর দেয়। ২০০১ সালে Internet Explorer 6 আসে, আর কয়েক বছরের মধ্যে প্রায় পুরো বাজার তার দখলে চলে যায়। ডেভেলপাররা শুধু IE6-এর জন্য পেজ বানাতেন, তার নিজস্ব ভুলগুলোকেও “নিয়ম” ধরে নিয়ে। অনেক সাইটে লেখা থাকত “Best viewed in Internet Explorer”. প্রতিযোগিতা না থাকায় Microsoft বহু বছর ব্রাউজারটির বড় উন্নতি করেনি, আর পরে যখন Firefox ও Chrome জনপ্রিয় হলো, এই সাইটগুলো ভাঙতে শুরু করল। বিশ্বজুড়ে কোম্পানিগুলোকে বছরের পর বছর পুরোনো IE-র জন্য আলাদা কোড রাখতে হয়েছে।

আজকের পরিস্থিতি অন্যরকম, কিন্তু ঝুঁকি একই ধরনের। ২০১৩ সালে Google, WebKit থেকে আলাদা হয়ে Blink বানায়। ২০২০ সালে Microsoft নিজের EdgeHTML engine ছেড়ে Edge-কে Chromium-এর ওপর নিয়ে আসে। ফলে এখন বেশিরভাগ ব্রাউজারের ভেতরে Blink; স্বাধীন বড় engine বাকি শুধু Gecko (Firefox) আর WebKit (Safari). iPhone-এ বহু বছর ধরে সব ব্রাউজারকে WebKit ব্যবহার করতে হয় (ইউরোপীয় ইউনিয়নের বাইরে আজও এই নিয়ম), তাই Chrome-এ ঠিক দেখানো পেজও iPhone-এর “Chrome”-এ আসলে Safari-র engine-এ চলে।

ভালো দিক হলো, ব্রাউজার নির্মাতারা এখন একসাথে কাজ করেন। Interop নামে একটি যৌথ উদ্যোগে তারা প্রতি বছর কিছু ফিচার বেছে নিয়ে সব ব্রাউজারে একইরকম আচরণ নিশ্চিত করার চেষ্টা করেন, আর “Baseline” লেবেল ডেভেলপারদের সহজে বলে দেয় কোন ফিচার সবখানে নিরাপদ। তবু পার্থক্য পুরোপুরি মুছে যায়নি — বিশেষ করে ফর্মের নিয়ন্ত্রণ, ফন্ট আঁকা, নতুন CSS আর ফোনের ছোট-বড় আচরণে।

মূল উপলব্ধি: আপনি একটি ব্রাউজারের জন্য নয়, ওয়েব স্ট্যান্ডার্ডের জন্য লেখেন। নিয়মিত অন্তত তিনটি engine-এ পরীক্ষা করলে আপনার কাজ একটি কোম্পানির সিদ্ধান্তের ওপর নির্ভর করে না, আর বাজার বদলালেও টিকে থাকে।

প্র ০৩এত editor থাকতে VS Code এত জনপ্রিয় হলো কেন — আর editor বাছাই কি সত্যিই এত গুরুত্বপূর্ণ?

VS Code ২০১৫ সালে আসে, তখন বাজারে Sublime Text, Atom, Vim, WebStorm সবই প্রতিষ্ঠিত। কয়েকটি নকশাগত সিদ্ধান্ত তাকে এগিয়ে দেয়। প্রথমত, এটি Electron-এ তৈরি — ভেতরে আসলে একটি ব্রাউজার engine আর HTML-CSS-JavaScript দিয়ে বানানো অ্যাপ। মজার ব্যাপার, আপনি যে ভাষা শিখছেন, সেই ভাষাতেই আপনার editor বানানো! এতে একটি কোডে তিন অপারেটিং সিস্টেম চলে, আর extension লেখাও সহজ হয়।

দ্বিতীয় সিদ্ধান্তটি আরও বড়। ২০১৬ সালে Microsoft প্রকাশ করে Language Server Protocol (LSP). আগে প্রতিটি editor-কে প্রতিটি ভাষার জন্য আলাদা করে “বুদ্ধি” (auto-complete, ভুল ধরা) বানাতে হতো — ১০টি editor আর ২০টি ভাষা মানে ২০০টি কাজ। LSP-তে ভাষার বুদ্ধি একটি আলাদা “server”-এ থাকে, আর যেকোনো editor একটি সাধারণ নিয়মে তার সাথে কথা বলে — এখন লাগে মাত্র ১০ + ২০টি অংশ। আজ Vim, Emacs, Zed-এর মতো অনেক editor-ও LSP ব্যবহার করে। VS Code-এর মূল কোড খোলা উৎসের (open source) হওয়ায় এর ওপর ভিত্তি করে নতুন editor-ও তৈরি হয়েছে, যার মধ্যে কয়েকটি AI-কেন্দ্রিক editor-ও আছে। Stack Overflow-এর বার্ষিক ডেভেলপার জরিপে বহু বছর ধরে এটি সবচেয়ে বেশি ব্যবহৃত editor হিসেবে উঠে এসেছে।

তবে editor বাছাই নিয়ে অতিরিক্ত মাথা ঘামানোর দরকার নেই। HTML হলো plain text — Notepad-এ লেখা পেজ আর VS Code-এ লেখা পেজ ব্রাউজারের কাছে হুবহু এক। Editor আপনার গতি আর আরাম বাড়ায়, বোঝাপড়া বাড়ায় না। Emmet-এর মতো সুবিধা অন্য editor-এও আছে। নতুনদের সবচেয়ে বড় ভুল হলো সপ্তাহের পর সপ্তাহ theme আর extension সাজানো, অথচ একটি পেজও না লেখা।

মূল উপলব্ধি: মাঝখানে একটি সাধারণ নিয়ম (protocol) বসিয়ে M×N সমস্যাকে M+N বানানো — LSP এর চমৎকার উদাহরণ, যেমন HTML নিজেও সব ব্রাউজার আর সব ডিভাইসের মাঝের একটি সাধারণ ভাষা। আর টুল বদলাবে; যে দক্ষতা টুল-নিরপেক্ষ, তাতেই বিনিয়োগ করুন।

প্র ০৪file:// থেকে খোলা পেজকে ব্রাউজার এত সন্দেহ করে কেন? নিজের কম্পিউটারের ফাইলই তো!

উত্তর লুকিয়ে আছে ওয়েব নিরাপত্তার সবচেয়ে মৌলিক নিয়মে — same-origin policy. ১৯৯৫ সালে Netscape যখন ব্রাউজারে JavaScript আনে, তখনই প্রশ্ন ওঠে: একটি সাইটের script কি অন্য সাইটের ডেটা পড়তে পারবে? উত্তর ছিল “না” — প্রতিটি পেজের একটি origin থাকে (scheme + host + port, যেমন https://abcltech.com), আর এক origin-এর script অন্য origin-এর ডেটা সাধারণত পড়তে পারে না। এই নিয়ম না থাকলে একটি খারাপ সাইট খোলা ট্যাব থেকে আপনার ইমেইল বা ব্যাংকের তথ্য পড়ে ফেলতে পারত।

এবার file://-এর কথা ভাবুন। এখানে host নেই, port নেই — তাহলে origin কী? ধরা যাক ব্রাউজার বলল, “একই কম্পিউটারের সব ফাইল একই origin.” তাহলে কেউ আপনাকে ইমেইলে বা মেসেঞ্জারে একটি HTML ফাইল পাঠাল, আপনি Downloads ফোল্ডারে নামিয়ে খুললেন — আর সেই ফাইলের script চুপচাপ আপনার অন্য ফাইল পড়ে কোথাও পাঠিয়ে দিল! এ কারণে আধুনিক ব্রাউজার file:// পেজকে একটি বিশেষ “opaque” origin দেয় — Chrome-এর error বার্তায় এটিই origin 'null' হিসেবে দেখায়। Firefox একসময় একই ফোল্ডারের ফাইল পড়তে দিত; পরে এই সুবিধার অপব্যবহারের ঝুঁকি দেখা দেওয়ায় নিয়ম কড়া করে।

ফলে fetch দিয়ে পাশের JSON ফাইল পড়া, বা type="module" script লোড করা — যেগুলো CORS নামের নিয়মে origin যাচাই করে — file://-এ আটকে যায়। Local server এই সমস্যা মেটায়, কারণ তখন পেজের একটি সত্যিকারের origin থাকে, যেমন http://127.0.0.1:5500, ঠিক আসল ওয়েবসাইটের মতো।

মূল উপলব্ধি: ব্রাউজার আপনার ওপর সন্দেহ করছে না, সন্দেহ করছে ফাইলটির ওপর — কারণ সে জানে না ফাইলটি আপনি লিখেছেন, না ইন্টারনেট থেকে এসেছে। নিরাপত্তার নিয়মগুলো বিরক্তিকর লাগে ঠিক ততক্ষণ, যতক্ষণ না বোঝেন কোন আক্রমণ থেকে সেগুলো বাঁচাচ্ছে।

প্র ০৫অনেক সাইটের View Source প্রায় ফাঁকা, অথচ স্ক্রিনে সব দেখা যায় — কীভাবে? এতে কী সমস্যা হতে পারে?

React, Vue বা Angular-এর মতো JavaScript framework দিয়ে বানানো অনেক সাইটের View Source খুললে দেখবেন প্রায় শুধু এটুকু: একটি ফাঁকা <div id="root"></div> আর কয়েকটি বড় script ফাইল। পেজ খোলার পর JavaScript চলে, ডেটা আনে, আর ব্রাউজারের ভেতরেই সব element বানিয়ে DOM-এ বসায়। একে বলে client-side rendering. Elements প্যানেলে তখন পুরো পেজ দেখা যায়, কিন্তু সার্ভার পাঠিয়েছিল প্রায় ফাঁকা একটি কঙ্কাল। এটিই View Source আর Elements-এর পার্থক্যের সবচেয়ে নাটকীয় উদাহরণ।

এর কয়েকটি বাস্তব দাম আছে। এক, গতি: সস্তা ফোন আর ধীর নেটওয়ার্কে বড় JavaScript নামানো ও চালানো শেষ না হওয়া পর্যন্ত ব্যবহারকারী ফাঁকা পর্দা দেখেন — বাংলাদেশের অনেক পাঠকের জন্য এটি বড় সমস্যা। দুই, সার্চ ইঞ্জিন: Google এখন JavaScript চালিয়ে পেজ দেখতে পারে, কিন্তু সেটা আলাদা, পরের একটি ধাপে করে, আর সব সার্চ ইঞ্জিন তা পারে না। তিন, শেয়ার করার প্রিভিউ: Facebook বা WhatsApp-এ লিংক দিলে যে ছবি আর শিরোনাম আসে, সেগুলো পড়া হয় মূলত সার্ভারের পাঠানো HTML থেকে — তাই সেই meta ট্যাগ View Source-এ থাকতেই হবে (পর্ব ১৩)।

এ কারণে আধুনিক framework-গুলো আবার server-side rendering বা আগে থেকে HTML বানিয়ে রাখার (static generation) দিকে ফিরেছে — অর্থাৎ সার্ভারই পূর্ণ HTML পাঠায়, পরে JavaScript তাতে প্রাণ দেয়। ইতিহাস যেন ঘুরে এসে আবার সাধারণ HTML-এর মূল্য স্বীকার করছে, যা আপনি এই কোর্সে শিখছেন। DOM আর JavaScript-এর মিলন পর্ব ৫২-এ দেখবেন।

মূল উপলব্ধি: “স্ক্রিনে কী দেখায়” আর “সার্ভার কী পাঠায়” — দুটি আলাদা প্রশ্ন, আর দুটির উত্তর দুই জায়গায়: Elements আর View Source. পেশাদার ডেভেলপার দুটোই পরীক্ষা করেন, কারণ মানুষ, সার্চ ইঞ্জিন আর সোশ্যাল মিডিয়া একই পেজকে আলাদা চোখে দেখে।

অনুশীলন

প্রথম তিনটি হাতে-কলমে টুল চেনার কাজ; শেষটিতে ছোট একটি মেরামত। প্রতিটি নিজে করে তারপর উত্তর মেলান।

প্রজেক্ট সাজান: নিজের কম্পিউটারে extension দেখানো চালু করুন। তারপর web-projects ফোল্ডারের ভেতরে my-first-site নামে ফোল্ডার বানিয়ে VS Code-এ খুলুন, index.html তৈরি করে !+Tab দিন, lang আর title বদলে সেভ করুন। ব্রাউজারে খুলে ট্যাবের লেখা দেখুন। কোন কোন জায়গায় ভুল হতে পারত?

ঠিকঠাক হলে ব্রাউজারের ট্যাবে আপনার দেওয়া শিরোনাম দেখাবে, পেজ থাকবে ফাঁকা (body-তে এখনো কিছু নেই)। সাধারণ ভুলগুলো: (ক) ফোল্ডার না খুলে শুধু ফাইল খোলা — বাঁ পাশে প্রজেক্ট দেখা যায় না; (খ) ফাইলের নাম Index.html বা index.html.txt — extension দেখানো চালু থাকলে দ্বিতীয়টি সাথে সাথে চোখে পড়ে; (গ) সেভ না করে ব্রাউজারে খোঁজা — ট্যাবে সাদা বিন্দু থাকলে ফাইল সেভ হয়নি; (ঘ) ফাইলটি HTML হিসেবে চেনার আগেই ! লেখা — নিচের ডান কোণে “Plain Text” থাকলে Emmet সাজেশন আসে না।
Emmet অনুমান: VS Code-এ চেষ্টা করার আগে খাতায় লিখুন এগুলো কী বানাবে — (ক) ol>li*4 (খ) p.note (গ) nav>a*3 (ঘ) h2+p. তারপর একে একে Tab চেপে মিলিয়ে নিন।

(ক) একটি <ol>-এর ভেতরে চারটি ফাঁকা <li></li>. (খ) <p class="note"></p>. (গ) একটি <nav>-এর ভেতরে তিনটি <a href=""></a>. (ঘ) + মানে পাশাপাশি, তাই একটি <h2></h2>-এর ঠিক পরে একটি <p></p> — একটি অন্যটির ভেতরে নয়। > আর +-এর পার্থক্যই সবচেয়ে বেশি গুলিয়ে যায়।
উৎস বনাম DOM: যেকোনো পরিচিত ওয়েবসাইট খুলুন (যেমন এই পাতাটিই)। Ctrl+U দিয়ে View Source দেখুন, আবার F12 দিয়ে Elements দেখুন। অন্তত দুটি পার্থক্য খুঁজে বের করুন, আর ভাবুন কেন।

এই পাতাতেই কয়েকটি স্পষ্ট পার্থক্য পাবেন: View Source-এ বাঁ পাশের সূচিপত্রের <aside class="lx-side"> ফাঁকা, কিন্তু Elements-এ তাতে পুরো কোর্সের তালিকা — JavaScript পরে বসিয়েছে। প্রতিটি স্টেপারের “আগে / চালান / পরে” বোতামও উৎসে নেই, script বানিয়েছে। বিজ্ঞাপনের জায়গায় Elements-এ নতুন iframe দেখা যেতে পারে, যা উৎসে নেই। নিয়ম একটাই: যা উৎসে নেই কিন্তু Elements-এ আছে, তা হয় parser-এর মেরামত, নয় JavaScript-এর কাজ।
ভাঙা পেজ মেরামত: নিচের তিন লাইনে দুটি ভুল আছে। প্রথমে অনুমান করুন পেজটি কেমন দেখাবে, তারপর অংশ ৯-এর যেকোনো লাইভ এডিটরে বসিয়ে মিলিয়ে নিন, আর ঠিক করুন।
```
<h1>আমাদের স্কুলের লাইব্রেরি<h1>
<p>নতুন বই এসেছে: <em>পথের পাঁচালী</p></em>
<p>খোলা থাকে সকাল ৯টা থেকে বিকাল ৫টা</p>
```
ভুল ১: প্রথম লাইনের শেষে </h1>-এর বদলে আবার <h1> লেখা। Parser একটি h1-এর ভেতরে আরেকটি h1 রাখতে দেয় না — আগেরটি বন্ধ করে নতুন, ফাঁকা একটি h1 খোলে, আর সেটি আর বন্ধ হয় না। ফলে নিচের দুটি অনুচ্ছেদও বিশাল মোটা শিরোনামের মতো দেখায়। ভুল ২: </p></em> উল্টো ক্রমে — যে আগে খোলে, সে পরে বন্ধ হবে। ঠিক করা সংস্করণ:
```
<h1>আমাদের স্কুলের লাইব্রেরি</h1>
<p>নতুন বই এসেছে: <em>পথের পাঁচালী</em></p>
<p>খোলা থাকে সকাল ৯টা থেকে বিকাল ৫টা</p>
```
এখন একটি বড় শিরোনাম, আর নিচে সাধারণ আকারের দুটি অনুচ্ছেদ; বইয়ের নাম বাঁকা অক্ষরে। চেষ্টা করুন: প্রথম লাইনের </h1>-কে আবার <h1> করে দেখুন — নিচের লেখাগুলো কীভাবে বড় হয়ে যায়। তারপর প্রিভিউতে Inspect করে Elements-এ দেখুন h1 কয়টি তৈরি হয়েছে।

নিজেকে যাচাই করুন

ভুল হলে কারণসহ ব্যাখ্যা পাবেন, আবার চেষ্টাও করতে পারবেন।

ক্রমএকটি নতুন ওয়েব প্রজেক্ট শুরুর ধাপগুলো সঠিক ক্রমে সাজান (▲▼ চেপে সরান)

📁 ছোট হাতের নামে একটি প্রজেক্ট ফোল্ডার বানানো
🧩 VS Code-এ File → Open Folder দিয়ে ফোল্ডারটি খোলা
📄 ভেতরে index.html ফাইল তৈরি করা
⚡ ! লিখে Tab চেপে কঙ্কাল বানানো, lang আর title ঠিক করা
💾 সেভ করে ব্রাউজারে (বা local server দিয়ে) খোলা
🔍 F12 চেপে DevTools-এ ফল যাচাই করা

Windows-এ Chrome বা Edge-এ DevTools খোলার শর্টকাট কোনটি?

Ctrl+U
F12 বা Ctrl+Shift+I
Ctrl+S
Ctrl+Shift+P

একটি টেবিলের HTML-এ <tbody> লেখা নেই, অথচ DevTools-এ <tbody> দেখা যাচ্ছে। এর কারণ কী?

DevTools ভুল দেখাচ্ছে
সার্ভার পাঠানোর সময় tbody যোগ করেছে
ব্রাউজারের HTML parser DOM বানানোর সময় নিজে থেকে যোগ করেছে
VS Code সেভ করার সময় যোগ করেছে

ওয়েবসাইটের একটি পেজের জন্য কোন ফাইলের নামটি সবচেয়ে ভালো?

About Us.html
AboutUs.html
about us!.html
about-us.html

Windows-এ Notepad দিয়ে “index.html” নামে সেভ করা ফাইল ব্রাউজারে খুললে পেজের বদলে কোডের লেখা দেখাচ্ছে। সবচেয়ে সম্ভাব্য কারণ কী?

আসল নাম index.html.txt, কিন্তু Windows extension লুকিয়ে রেখেছে
ইন্টারনেট সংযোগ নেই
HTML শুধু VS Code-এ লিখলে কাজ করে
HTML দেখাতে সবসময় local server লাগে

ফাইলে ডাবল-ক্লিক করে খোলা পেজে fetch("data.json") কাজ করছে না, কিন্তু Live Server দিয়ে খুললে কাজ করে। কেন?

data.json ফাইলটি ভুল ফোল্ডারে আছে
file:// পেজকে নিরাপত্তার কারণে অন্য ফাইল পড়তে দেওয়া হয় না; local server আসল http:// origin দেয়
Live Server কোডের ভুল নিজে থেকে ঠিক করে দেয়
ব্রাউজারটি fetch সমর্থন করে না

Safari কোন rendering engine ব্যবহার করে?

Blink
Gecko
WebKit
EdgeHTML

শব্দকোষ

লেখার মধ্যে ডটেড দাগ দেওয়া শব্দে মাউস রাখুন বা চাপুন — অর্থ দেখাবে। এই পর্বের সব নতুন শব্দ এখানে একসাথে:

মনে রাখুন

মূল যন্ত্র তিনটি, সবই বিনামূল্যে: code editor (VS Code), ব্রাউজার আর ব্রাউজারের ভেতরের DevTools.
প্রতিটি প্রজেক্ট একটি ফোল্ডার, প্রধান পেজ index.html; নাম ছোট হাতের, হাইফেন দিয়ে, ঠিক extension-সহ — আর Windows-এ extension দেখানো চালু রাখুন।
Emmet: !+Tab দিয়ে কঙ্কাল, তারপর lang ও title নিজে ঠিক করুন; Auto Save আর Format Document চালু রাখুন।
file://-এ HTML-CSS চলে, কিন্তু /-শুরুর path, fetch আর module ভাঙে; local server দেয় আসল সাইটের মতো http://.
View Source = সার্ভারের পাঠানো লেখা; Elements = ব্রাউজারের বানানো জীবন্ত DOM. সমস্যা হলে আগে Console, তারপর Elements/Styles আর Network.

পরের পর্বে: টুল তৈরি, এবার আসল কাজ। Emmet যে এগারো লাইনের কঙ্কাল দিল, তার প্রতিটি লাইন খুলে দেখব — element, tag আর attribute কী, <head> আর <body>-এর ভাগ কেন, আর আপনার প্রথম সত্যিকারের HTML পেজ।

কাজের টুল — VS Code, ব্রাউজার আর DevTools