HTML CSS MCQ question bank — এমসিকিউ প্রশ্ন বাংলায় | পর্ব ৫৬

এক নজরে · এই পাতা কীভাবে ব্যবহার করবেন

২৯৪টি প্রশ্ন, কোর্সের ক্রমে: প্রথমে উত্তর বাছাইয়ের কৌশল, তারপর মডিউল ১ থেকে ৭ — প্রতিটি মডিউলের জন্য একটি অংশ। প্রতিটি অংশের শেষে আছে সেই মডিউলের প্রচলিত ফাঁদের তালিকা আর কোন পর্ব আবার পড়বেন তার লিংক।
আগে নিজে ঠিক করুন, তারপর চাপুন: যে অপশনই চাপুন, ব্যাখ্যা দেখাবে — সঠিকটি কেন সঠিক, আর ভুলটি কোন ভুল ধারণা থেকে বানানো। ভুল অপশনের ব্যাখ্যা থেকেই সবচেয়ে বেশি শেখা হয়।
কঠিনতার মাত্রা দেওয়া আছে: প্রতিটি প্রশ্নের শুরুতে (সহজ), (মাঝারি) বা (কঠিন)। একদম নতুন হলে আগে সহজগুলো করুন; চাকরির পরীক্ষা বা ইন্টারভিউর প্রস্তুতিতে মাঝারি আর কঠিনগুলোতে বেশি সময় দিন।
কোড পড়ার প্রশ্ন ব্রাউজারে যাচাই করা: “কী দেখাবে”, “specificity কত”, “চওড়া কত” ধরনের প্রতিটি প্রশ্নের উত্তর আধুনিক ব্রাউজারে (Edge/Chrome) সত্যিই রেন্ডার করে মিলিয়ে দেখা। সন্দেহ হলে কোডটি অংশ ১-এর লাইভ এডিটরে বসিয়ে নিজেই দেখুন।
নতুন ফিচারের সাপোর্ট Baseline শব্দে: যে প্রশ্নে কোনো নতুন CSS বা HTML ফিচার আছে, সেখানে তার অবস্থা লেখা আছে Baseline-এর ভাষায় (Widely available, Newly available, বা এখনো Baseline নয়) — ২০২৫–২৬ সালের অবস্থা অনুযায়ী, কোর্সের পর্বগুলোর সাথে মিলিয়ে।

এই পর্বে যা করবেন

HTML-CSS-এর MCQ কোন কোন ছাঁচে আসে তা চেনা, আর বাদ দেওয়ার পদ্ধতি, সময় ভাগ ও ভুলে নম্বর কাটার হিসাব শেখা
পুরো কোর্সের ২৯৪টি প্রশ্নে নিজের দুর্বল মডিউল খুঁজে বের করা, আর সেই পর্বে ফিরে যাওয়া
specificity, box model-এর মাপ, Flexbox-Grid-এর আচরণ — ছোট কোড পড়ে নির্ভুল উত্তর দেওয়ার অভ্যাস
অ্যাক্সেসিবিলিটি, SEO, পারফরম্যান্স আর টুলিং (Git, Sass, framework)-এর প্রশ্নে পুরোনো ধারণার ফাঁদ এড়ানো
AI দিয়ে আরও MCQ বানানো, আর সেগুলোর “সঠিক উত্তর” ব্রাউজার, MDN আর validator দিয়ে যাচাই করা

১ · HTML-CSS-এর MCQ কী যাচাই করে — আর উত্তর বাছাইয়ের কৌশল

সিলেটের ফারহানা দুই বছর ধরে ফ্রিল্যান্সিং করেন — ক্লায়েন্টের জন্য ল্যান্ডিং পেজ বানান, WordPress-এর থিম ঠিক করেন। এবার ঢাকার একটি সফটওয়্যার কোম্পানির জুনিয়র ফ্রন্ট-এন্ড পদে আবেদন করেছেন। প্রথম ধাপ অনলাইন MCQ পরীক্ষা: ৪০টি প্রশ্ন, ৩০ মিনিট। ফারহানা ভেবেছিলেন সহজ হবে — রোজই তো HTML-CSS লেখেন। ফল এল ৪০-এ ২৬। ভুলগুলো দেখে অবাক হলেন: “#main p আর .box .text — কোনটি জেতে?” তিনি বেছেছিলেন পরে লেখা নিয়মটি। “width: 200px, padding ২০ — বাক্স কত চওড়া?” লিখেছিলেন ২০০।

কাজের সময় এসব ভুল চোখে পড়ে না, কারণ ব্রাউজার সাথে সাথে ফল দেখায়, আর আপনি একটু এদিক-ওদিক করে ঠিক করে নেন। MCQ-তে ব্রাউজার নেই — আপনার মাথাই rendering engine. আর প্রশ্নকর্তা জেনেশুনে এমন ভুল অপশন রাখেন, যা দেখতে একদম ঠিক মনে হয়। এমন বিভ্রান্তিকর অপশনকে বলে distractor. HTML-CSS-এ distractor বানানো খুব সহজ: কাছাকাছি নাম (justify-content বনাম align-items), পুরোনো অভ্যাস (<b> বনাম <strong>), আর “পরে লেখা জেতে” ধরনের অর্ধেক-সত্য নিয়ম।

প্রশ্নের আট ছাঁচ

HTML আর CSS-এর MCQ মোটামুটি আটটি ছাঁচে পড়ে। কোন ছাঁচের প্রশ্ন, সেটা চিনতে পারলেই অর্ধেক কাজ হয়ে যায়:

ধরন	উদাহরণ	আসলে কী মাপে
সংজ্ঞা ও পূর্ণরূপ	“CSS-এর পূর্ণরূপ কী?”, “DOM কী?”	শব্দটি সঠিকভাবে চেনেন কি না
কোন tag / attribute / property?	“নম্বর দেওয়া তালিকার ট্যাগ কোনটি?”	ঠিক কাজে ঠিক জিনিস বাছতে পারেন কি না
কোড পড়া — কী দেখাবে?	ছোট HTML-CSS, চারটি সম্ভাব্য ফল	মাথায় রেন্ডার করা — cascade, flow, layout
হিসাব	specificity, বাক্সের চওড়া, `rem`-এর px মান	নিয়ম জানেন কি না, আর হাতে নির্ভুল কি না
অ্যাক্সেসিবিলিটি	“কোন ছবিতে `alt=""` ঠিক?”	screen reader, কি-বোর্ড আর WCAG-এর জ্ঞান
SEO, meta আর পারফরম্যান্স	“canonical কী করে?”, “LCP-র ভালো সীমা?”	পাতা খুঁজে পাওয়া আর দ্রুত লোড হওয়ার নিয়ম
আধুনিক CSS ও সাপোর্ট	“`:has()` কী করে, সব ব্রাউজারে চলে?”	বর্তমান মান আর Baseline অবস্থা জানেন কি না
টুল ও কাজের ধারা	Git, Sass, Bootstrap, Tailwind, DevTools	পেশাদার কাজের শব্দভান্ডার

কৌশল ১ · বাদ দেওয়ার পদ্ধতি

সঠিক উত্তর সরাসরি খোঁজার চেয়ে ভুলগুলো বাদ দেওয়া প্রায়ই সহজ। একে বলে elimination method. প্রতিটি অপশনকে আলাদা করে জিজ্ঞেস করুন: “এটি ঠিক হতে হলে কোন নিয়মটি সত্য হতে হবে?” যে অপশনের পেছনের নিয়মটি মিথ্যা, সেটি কেটে দিন। নিচের ডায়াগ্রামে ফারহানার ভুল হওয়া specificity-র প্রশ্নটি এভাবে ধাপে ধাপে সমাধান করা হয়েছে।

বিষয় চেনাcascadeতিনটি বিরোধী রং
সব মেলে?হ্যাঁঘ বাদ
ওজন গোনা(a, b, c)ক্রম পরে
বাঁ থেকে তুলনা1 > 0খ, গ বাদ
যাচাইblueউত্তর ক

প্রশ্ন“হ্যালো” লেখাটি কোন রঙের?

#main p     { color: blue; }
.box .text  { color: green; }
p.text      { color: red; }

<div id="main" class="box"><p class="text">হ্যালো</p></div>

ক) নীল    খ) সবুজ
গ) লাল    ঘ) কালো (কোনো নিয়ম লাগেনি)

ধাপ ২প্রতিটি selector কি p-কে ধরে?

#main p    → id="main"-এর ভেতরের p       ✔
.box .text → class="box"-এর ভেতরের .text ✔
p.text     → class="text" থাকা p         ✔

ক) নীল   খ) সবুজ   গ) লাল   ঘ) কালো

ধাপ ৩specificity = (id, class, type)

#main p    → (1, 0, 1)
.box .text → (0, 2, 0)
p.text     → (0, 1, 1)

লেখার ক্রম দেখা হয় শুধু ওজন সমান হলে

ধাপ ৪প্রথম ঘর থেকে তুলনা

id-এর ঘর: 1 বনাম 0 বনাম 0 → (1, 0, 1) জিতে গেল
দুটি class একটি id-কে কখনো হারায় না

ক) নীল   খ) সবুজ   গ) লাল   ঘ) কালো

ধাপ ৫উত্তর ও ফাঁদের চেক

উত্তর: ক) নীল

গ — “পরে লেখা জেতে” (অর্ধেক-সত্য নিয়ম)
খ — “দুটি class = বেশি পয়েন্ট” (যোগের ভুল)

আগে বিষয় চিনুন। একই element-এ তিনটি নিয়ম তিনটি আলাদা রং দিচ্ছে — অর্থাৎ প্রশ্নটি cascade-এর: বিরোধ হলে কে জেতে। এমন প্রশ্নে প্রশ্নকর্তা প্রায় সব সময় একটি অপশন রাখেন “সবার শেষে লেখা নিয়মের রং” — কারণ এটিই সবচেয়ে প্রচলিত ভুল ধারণা।
প্রতিটি selector কি আদৌ মেলে? #main p — id main-এর ভেতরে p, মেলে। .box .text — একই div-এর class box, তার ভেতরে .text, মেলে। p.text — মেলে। কোনো নিয়ম না মিললে লেখাটি ব্রাউজারের ডিফল্ট কালো হতো; এখানে তিনটিই মেলে, তাই “কালো” (ঘ) বাদ।
ওজন গুনুন — ক্রম পরে। specificity লেখা হয় তিন ঘরে: (id, class/attribute/pseudo-class, type/pseudo-element). #main p = (1, 0, 1), .box .text = (0, 2, 0), p.text = (0, 1, 1). লেখার ক্রম তখনই দেখা হয়, যখন origin, layer আর specificity সব সমান — এখানে সমান নয়।
বাঁ থেকে ঘর ধরে তুলনা। প্রথম ঘরেই (1, 0, 1)-এর ১ বাকিদের ০-কে হারায় — বাকি ঘর দেখার দরকারই নেই। এখানেই “সবুজ” (খ) বাদ: দুটি class যোগ করে “২০ পয়েন্ট” বনাম id-এর “১০০ পয়েন্ট” ভাবাটাও ভুল — ঘরগুলো যোগ হয় না, ক্রমানুসারে তুলনা হয়। এগারোটি class-ও একটি id-কে হারায় না।
উত্তর ক — তারপর ফাঁদগুলো মনে রাখুন। লেখাটি নীল। ভুল অপশন দুটি দুটি আলাদা ভুল ধারণা ধরতে চেয়েছিল: “পরে লেখা জেতে” আর “specificity মানে পয়েন্ট যোগ”। নিচের লাইভ এডিটরে কোডটি বসানো আছে — #main p-কে মুছে দিলে কোন রং জেতে, নিজে দেখে নিন।

/* (1,0,1) */
#main p { color: blue; }

/* (0,2,0) */
.box .text { color: green; }

/* (0,1,1) — সবার শেষে লেখা */
p.text { color: red; }

p { font-size: 22px; font-weight: bold; }

লেখাটি নীল — সবার শেষে লেখা লাল নিয়মটি নয়, কারণ id থাকা #main p-এর ওজন সবচেয়ে বেশি। চেষ্টা করুন: প্রথম নিয়মটি মুছে দিন — এবার সবুজ জেতে, কারণ (0, 2, 0) বনাম (0, 1, 1)-এ দ্বিতীয় ঘরে ২ > ১. তারপর .box .text-কে লিখুন .text — এবার দুটির ওজন কত, আর কে জেতে?

কৌশল ২ · হিসাবের প্রশ্নে “কী মাপতে বলছে” আগে ঠিক করুন

বাক্সের চওড়া, rem-এর px মান, grid-এর কলামের মাপ — হিসাবের প্রশ্নে বেশিরভাগ ভুল হয় হিসাবে নয়, প্রশ্ন বোঝায়। “চওড়া” মানে কি শুধু content, নাকি border পর্যন্ত, নাকি margin-সহ? box-sizing কী? প্রশ্নকর্তা প্রতিটি ভুল বোঝার জন্য একটি করে অপশন রাখেন। নিচের ডায়াগ্রামে box model-এর একটি প্রচলিত প্রশ্ন।

কী মাপছিborder পর্যন্তmargin বাদ
box-sizingcontent-boxডিফল্ট
দুই পাশ যোগ200+40+10padding, border
উত্তর250pxগ

প্রশ্নborder-এর বাইরের কিনারা থেকে কিনারা

.card {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

ক) 200px   খ) 240px
গ) 250px   ঘ) 270px

ধাপ ২width কিসের মাপ?

box-sizing লেখা নেই → ডিফল্ট content-box
→ width: 200px = শুধু content-এর চওড়া
→ padding আর border এর বাইরে যোগ হবে

ক) 200px   খ) 240px
গ) 250px   ঘ) 270px
(margin বাক্সের অংশ নয়)

ধাপ ৩বাঁ আর ডান — দুই পাশই

content          200
padding  20 × 2 = 40
border    5 × 2 = 10
----------------------
                 250

খ) 240px  (border ভুলে গেলে)

ধাপ ৪উত্তর আর তুলনা

উত্তর: গ) 250px
margin-সহ জায়গা: 250 + 10 × 2 = 270
box-sizing: border-box হলে: 200 (content 150)

প্রশ্নটি ঠিক কী মাপতে বলছে? “border-এর বাইরের কিনারা থেকে কিনারা” — অর্থাৎ পর্দায় দেখা বাক্সের চওড়া, যা DevTools-এ offsetWidth হিসেবে দেখায়। margin বাক্সের বাইরের ফাঁকা জায়গা; সেটি এই মাপের অংশ নয়। তাই margin যোগ করা ২৭০ (ঘ) এখানেই বাদ — যদিও পাতায় বাক্সটি মোট ২৭০px জায়গা দখল করে।
box-sizing কী? কিছু লেখা না থাকলে ডিফল্ট content-box: width শুধু content-এর মাপ। তাই উত্তর ২০০ (ক) হতে পারে না — ২০০ হতো কেবল box-sizing: border-box দিলে। প্রশ্নে box-sizing লেখা আছে কি না, সবার আগে এটিই দেখুন; অনেক সাইট আর framework সব element-এ border-box বসিয়ে দেয়, কিন্তু ব্রাউজারের ডিফল্ট content-box.
দুই পাশ যোগ করুন। padding: 20px মানে চার দিকেই ২০ — চওড়ায় বাঁ আর ডান মিলে ৪০. border: 5px একইভাবে ১০. ২০০ + ৪০ + ১০ = ২৫০. শুধু padding যোগ করা ২৪০ (খ) হলো border ভুলে যাওয়ার অপশন; এক পাশ যোগ করলে ২২৫ আসত — সেটি অপশনে নেই, কিন্তু খাতায় এমন ভুলও হয়।
উত্তর গ — ২৫০px. নিচের লাইভ এডিটর ব্রাউজারকে দিয়েই মাপটি বের করে দেখায়। box-sizing: border-box; যোগ করে দেখুন — মাপ ২০০ হয়ে যায়, আর content ছোট হয়ে ১৫০ হয়। এই এক লাইনের পার্থক্যই box model-এর সবচেয়ে প্রচলিত MCQ.

<style>
  .card {
    width: 200px;
    padding: 20px;
    border: 5px solid teal;
    margin: 10px;
  }
</style>

<div class="card">আমি কত চওড়া?</div>

<script>
  (function m() {
    if (!document.body.offsetWidth) return setTimeout(m, 50);
    const card = document.querySelector('.card');
    console.log('border পর্যন্ত চওড়া:', card.offsetWidth + 'px');
  })();
</script>

প্রিভিউর নিচে লেখা আসে “border পর্যন্ত চওড়া: 250px”, আর টিল রঙের বর্ডারওয়ালা বাক্সটি চারপাশে ১০px ফাঁক রেখে বসে। চেষ্টা করুন: .card-এ box-sizing: border-box; যোগ করুন — সংখ্যাটি 200px হয়ে যায়। তারপর padding-কে 40px করুন — content-box আর border-box-এ মাপ কীভাবে আলাদা বদলায়?

কৌশল ৩ · শব্দের ফাঁদ — “সব সময়”, “কখনো না”, “শুধু”

“কোনটি সত্য?” আর “কোনটি মিথ্যা?” প্রশ্নে চরম শব্দ খুঁজুন। “সব সময়”, “কখনো না”, “শুধু” — এমন শব্দ একটি বাক্যকে খুব শক্ত দাবি বানায়, আর একটি ব্যতিক্রমই সেটিকে মিথ্যা করে দেয়। যেমন “z-index শুধু positioned element-এ কাজ করে” — flex আর grid item-এও কাজ করে, তাই বাক্যটি মিথ্যা। “!important দেওয়া নিয়ম সব সময় জেতে” — মিথ্যা, কারণ দুটি !important লড়লে আবার specificity আর ক্রম দেখা হয়, আর @layer-এ important-এর ক্রম উল্টে যায়।

“কোনটি মিথ্যা?” বা “কোনটি semantic নয়?” প্রশ্নে সবচেয়ে বেশি ভুল হয় তাড়াহুড়োয় — প্রথম সত্য বাক্যটি দেখেই সেটি বেছে ফেলা। প্রশ্নের “নয়” বা “মিথ্যা” শব্দটির নিচে মনে মনে দাগ দিন, তারপর প্রতিটি অপশনের পাশে “স” বা “মি” লিখে এগোন।

কৌশল ৪ · পুরোনো বইয়ের উত্তর বনাম আজকের মান

HTML আর CSS প্রতি বছর বদলায় — HTML এখন একটি Living Standard, কোনো “HTML6” আসবে না; CSS3-এর পর থেকে প্রতিটি মডিউল আলাদা Level-এ এগোয়। অথচ অনেক পুরোনো প্রশ্নব্যাংকে এখনো <center>, <font>, টেবিল দিয়ে লেআউট বা “parent selector CSS-এ নেই” লেখা থাকে। এমন অপশন দেখলে দুটি কাজ করুন। এক, প্রশ্নটি কী চাইছে দেখুন — “কোন ট্যাগ লেখা মাঝখানে আনত?” হলে ইতিহাসের প্রশ্ন, উত্তর <center>; কিন্তু “আজ কীভাবে মাঝখানে আনবেন?” হলে উত্তর CSS (text-align, Flexbox, Grid). দুই, deprecated জিনিসকে কখনো “ভালো অভ্যাস” হিসেবে বাছবেন না। এই পাতায় যেখানে বই আর বর্তমান মান আলাদা, সেখানে ব্যাখ্যায় দুটোই বলা আছে।

কৌশল ৫ · ভুলে নম্বর কাটলে কখন আন্দাজ করবেন

যেসব পরীক্ষায় ভুল উত্তরে নম্বর কাটে (negative marking), সেখানে আন্দাজ করা একটি হিসাবের প্রশ্ন। কত কাটে, তা পরীক্ষাভেদে আলাদা — নিজের পরীক্ষার নিয়ম আগে জেনে নিন। হিসাবটি সহজ: (ঠিক হওয়ার সম্ভাবনা × ১) − (ভুল হওয়ার সম্ভাবনা × কাটা নম্বর)। যেমন দুটি অপশন নিশ্চিতভাবে বাদ দিয়েছেন, দুটি বাকি, আর ভুলে ০.২৫ কাটে: ০.৫ − ০.৫ × ০.২৫ = +০.৩৭৫ — লাভ। কিছুই না জেনে চারটি থেকে আন্দাজ, আর ভুলে ০.৫ কাটে: ০.২৫ − ০.৭৫ × ০.৫ = −০.১২৫ — ক্ষতি। শিক্ষা পরিষ্কার: অন্তত দুটি অপশন নিশ্চিতভাবে বাদ দিতে পারলে আন্দাজ সাধারণত লাভজনক; কিছুই না জানলে, বিশেষ করে কাটা নম্বর বেশি হলে, ছেড়ে দিন।

কৌশল ৬ · সময় ভাগ করা

ধরুন ৫০টি প্রশ্ন ৩০ মিনিটে — প্রতিটির জন্য গড়ে ৩৬ সেকেন্ড। একটি grid-এর কলাম মাপার প্রশ্নেই দুই মিনিট চলে যেতে পারে। তাই দুই দফায় চলুন। প্রথম দফায় সংজ্ঞা, “কোন ট্যাগ”, “কোন property”-র মতো সরাসরি প্রশ্ন দ্রুত শেষ করুন। কোড-ভারী বা হিসাবের প্রশ্নে দাগ দিয়ে এগিয়ে যান। দ্বিতীয় দফায় ফিরে এসে সেগুলো ধরুন। এক প্রশ্নে আটকে থেকে শেষের পাঁচটি সহজ প্রশ্ন না দেখা — MCQ পরীক্ষায় এটিই সবচেয়ে দামি ভুল।

এই পাতার প্রশ্নগুলো সম্পর্কে: প্রশ্নগুলো বিশ্ববিদ্যালয়, চাকরি আর ফ্রন্ট-এন্ড ইন্টারভিউর পরীক্ষায় এ ধরনের প্রশ্ন প্রায়ই আসে এমন ধারণা নিয়ে বানানো — কোনোটিই কোনো নির্দিষ্ট পরীক্ষার আসল প্রশ্ন নয়। প্রতিটি কোড-প্রশ্নের ফল আধুনিক Edge/Chrome-এ রেন্ডার করে মিলিয়ে দেখা। আলাদা কিছু বলা না থাকলে ধরে নিন: পাতায় <!doctype html> আছে, ব্রাউজারের ডিফল্ট font-size 16px, আর ব্রাউজারের নিজের ডিফল্ট স্টাইল (user-agent stylesheet) ছাড়া অন্য কোনো CSS নেই।

২ · মডিউল ১ — ওয়েব ও HTML-এর ভিত্তি (৪০টি প্রশ্ন)

এই অংশের প্রশ্ন সহজ মনে হয়, তাই সবাই তাড়াহুড়া করেন — আর ঠিক সেখানেই নম্বর হারান। সবচেয়ে বেশি আসে: ব্রাউজার-সার্ভারের কথোপকথন আর DOM, tag আর element-এর পার্থক্য, void element, <!doctype html> না দিলে quirks mode, semantic HTML-এর জোড়া (<strong> বনাম <b>), relative URL-এর হিসাব, alt-এর নিয়ম আর টেবিলের সঠিক কাঠামো।

ওয়েব কীভাবে চলে আর কাজের টুল (পর্ব ১–২)

(সহজ) ওয়েব পেজ তৈরিতে HTML, CSS আর JavaScript-এর কাজের ভাগ কোনটি সঠিক?

HTML আর CSS দুটোই প্রোগ্রামিং ভাষা, JavaScript শুধু সার্ভারে চলে
HTML চেহারা, CSS আচরণ, JavaScript কাঠামো
তিনটিই একই কাজ করে, যেকোনো একটি জানলেই চলে
HTML কাঠামো ও অর্থ, CSS চেহারা ও লেআউট, JavaScript আচরণ

(সহজ) Internet আর World Wide Web-এর সম্পর্ক কোনটি ঠিক?

দুটি একই জিনিসের দুই নাম
Internet হলো Web-এর একটি অংশ
Internet হলো কম্পিউটারের বিশ্বজোড়া নেটওয়ার্ক; Web তার ওপর চলা লিংক-যুক্ত পাতার ব্যবস্থা
Web শুধু সার্চ ইঞ্জিনের পাতাগুলো, Internet বাকি সব

(মাঝারি) ঠিকানার ঘরে https://example.com লিখে Enter চাপলেন। সার্ভারের সাথে সংযোগ (TCP) শুরুর আগে ব্রাউজারকে কোন তথ্যটি জানতে হয় — cache-এ না থাকলে DNS থেকে?

সার্ভারের HTTP status code
domain-এর IP ঠিকানা
পাতার DOM গাছ
পাতার CSS ফাইলের তালিকা

(সহজ) সার্ভার কোনো পাতার জন্য HTTP status code 404 পাঠালে তার অর্থ কী?

অনুরোধ করা জিনিসটি সার্ভারে পাওয়া যায়নি
পাতাটি স্থায়ীভাবে নতুন ঠিকানায় সরেছে
সার্ভারের ভেতরে প্রোগ্রামে ত্রুটি হয়েছে
সব ঠিক আছে, পাতা পাঠানো হয়েছে

(মাঝারি) DOM সম্পর্কে কোন বাক্যটি সঠিক?

একটি জনপ্রিয় CSS framework
HTML ফাইলেরই আরেক নাম
ব্রাউজার HTML পড়ে যে গাছের মতো object-কাঠামো বানায়, আর JavaScript যা পড়তে ও বদলাতে পারে
সার্ভারে রাখা পাতার ডেটাবেস

(মাঝারি) কোনটি static ওয়েবসাইটের সঠিক বর্ণনা?

যে সাইটে JavaScript ব্যবহার নিষেধ
যে সাইটে কোনো animation বা নড়াচড়া নেই
প্রতিটি অনুরোধে সার্ভার ডেটাবেস থেকে নতুন HTML বানিয়ে পাঠায়
আগেই তৈরি HTML, CSS, ছবির ফাইল সার্ভার হুবহু পাঠায়

(কঠিন) ব্রাউজারের রেন্ডারিংয়ের ধাপগুলোর সঠিক ক্রম কোনটি?

layout → DOM তৈরি → paint → render tree
DOM ও CSSOM তৈরি → render tree → layout → paint
CSSOM → paint → DOM → layout
DOM তৈরি → paint → layout → CSSOM

(সহজ) বর্তমানে HTML-এর মান (specification) কে রক্ষণাবেক্ষণ করে, আর কোন রূপে?

WHATWG, একটি Living Standard হিসেবে
Google, Chrome-এর সাথে মিলিয়ে
IETF, প্রতি দশ বছরে একবার
ECMA International, প্রতি বছর নতুন সংস্করণে

(মাঝারি) একটি পাতায় JavaScript পরে একটি নতুন অনুচ্ছেদ যোগ করেছে। এই অনুচ্ছেদ কোথায় দেখা যাবে?

কোথাও দেখা যাবে না, শুধু পর্দায় দেখা যাবে
DevTools-এর Elements প্যানেলে দেখা যাবে, View Source-এ নয়
View Source-এ দেখা যাবে, Elements-এ নয়
দুই জায়গাতেই দেখা যাবে

(মাঝারি) লোকাল কম্পিউটারে (Windows) পাতাটি ঠিক চলে, কিন্তু Linux হোস্টিংয়ে তোলার পর ছবি আসে না। HTML-এ লেখা src="Images/Logo.PNG", আর ফোল্ডারে ফাইলটির নাম images/logo.png. সবচেয়ে সম্ভাব্য কারণ কোনটি?

HTTPS ছাড়া কোনো ছবি লোড হয় না
ছবির আকার বেশি বড়
Linux সার্ভার PNG ফরম্যাট চেনে না
Linux সার্ভারে ফাইল আর ফোল্ডারের নাম case-sensitive

প্রথম HTML পেজ আর লেখার ট্যাগ (পর্ব ৩–৪)

(সহজ) HTML-এ tag আর element-এর পার্থক্য কোনটি?

tag হলো চিহ্ন (যেমন <p>), element হলো start tag, content আর end tag মিলে পুরো অংশ
tag থাকে head-এ, element থাকে body-তে
দুটি একই জিনিস
element হলো attribute-এর অন্য নাম

(সহজ) নিচের কোনটি void element — যার কোনো content আর end tag নেই?

<span>
<p>
<img>
<div>

(মাঝারি) পাতার শুরুতে <!doctype html> না লিখলে কী হয়?

কিছুই হয় না, এটি শুধু মন্তব্য
পাতা একদমই দেখায় না, শুধু সাদা পর্দা
JavaScript চলা বন্ধ হয়ে যায়
ব্রাউজার পাতাটি quirks mode-এ আঁকে, যেখানে CSS-এর কিছু নিয়ম পুরোনো দিনের আচরণ করে

(সহজ) id আর class attribute-এর পার্থক্য কোনটি?

একটি id পাতায় একবারই থাকে; একই class অনেক element-এ দেওয়া যায়
id শুধু CSS-এ, class শুধু JavaScript-এ কাজ করে
একটি element-এ id আর class একসাথে দেওয়া যায় না
class পাতায় একবারই থাকে, id অনেকবার

(মাঝারি) HTML-এর case-sensitivity নিয়ে কোনটি সত্য?

কিছুই case-sensitive নয়
tag-এর নাম case-sensitive, class-এর মান নয়
<P> আর <p> একই element, কিন্তু class="Box" আর class="box" আলাদা
সবকিছুই case-sensitive, তাই <P> অবৈধ

(সহজ) ব্রাউজারের ট্যাবে পাতার যে নাম দেখায়, সেটি কোথায় লেখা হয়?

<header> element-এ
<head>-এর ভেতরে <title> element-এ
<meta name="title">-এ
<body>-এর প্রথম <h1>-এ

(কঠিন) নিচের HTML পার্স হওয়ার পর DevTools-এর Elements প্যানেলে (DOM-এ) কেমন দেখাবে?

<p>একটি <div>বাক্স</div> লেখা</p>

<p>একটি </p><div>বাক্স</div> লেখা<p></p>
হুবহু যেমন লেখা হয়েছে, p-এর ভেতরে div
<p>একটি বাক্স লেখা</p> — div মুছে যায়
কিছুই দেখায় না, parse error-এ পুরো অংশ বাদ পড়ে

(সহজ) <strong> আর <b>-এর পার্থক্য কোনটি?

দুটি হুবহু এক, <b> পুরোনো তাই বাতিল
<b> গুরুত্ব বোঝায়, <strong> শুধু মোটা করে
<strong> লেখাটির গুরুত্ব বা জরুরি ভাব বোঝায়; <b> বাড়তি গুরুত্ব ছাড়াই শুধু নজর টানে
<strong> শুধু শিরোনামের ভেতরে ব্যবহার করা যায়

(মাঝারি) ইলিশের বৈজ্ঞানিক নাম (Tenualosa ilisha) বা অন্য ভাষার একটি শব্দ আলাদা স্বরে চিহ্নিত করতে কোন ট্যাগ বেশি উপযুক্ত?

<strong>
<mark>
<em>
<i> (দরকারে সাথে lang attribute)

(মাঝারি) একটি পাতায় <h1>-এর ঠিক পরে <h4> লেখা হয়েছে, কারণ h4-এর মাপ পছন্দ। মূল সমস্যা কী?

h4 শুধু footer-এ ব্যবহার করা যায়
heading-এর ক্রম ভাঙে; যাঁরা screen reader-এ heading ধরে পাতা ঘোরেন, তাঁরা ভাবেন মাঝের অংশ হারিয়েছে — মাপ ঠিক করা CSS-এর কাজ
ব্রাউজার error দেখায়, পাতা খোলে না
কোনো সমস্যা নেই, heading-এর ক্রম শুধু চেহারার বিষয়

(সহজ) HTML-এর লেখায় “<” চিহ্নটি অক্ষর হিসেবে দেখাতে কী লিখবেন?

>
\<
&
<

(মাঝারি) নিচের অনুচ্ছেদটি ব্রাউজারে কেমন দেখাবে?

<p>ঢাকা        শহর
     সবুজ</p>

হুবহু যেমন লেখা — অনেকগুলো space আর দুই লাইনে
দুই লাইনে, কিন্তু space ছাড়া
ঢাকা শহর সবুজ — প্রতিটি ফাঁকে একটিমাত্র space
ঢাকাশহরসবুজ — কোনো space নেই

(মাঝারি) তারিখ বা সময়কে যন্ত্রের কাছে পাঠযোগ্য করতে (যেমন “১৬ ডিসেম্বর”-এর পেছনে 2026-12-16) কোন markup সঠিক?

<meta datetime="2026-12-16">
<time datetime="2026-12-16">১৬ ডিসেম্বর</time>
<span date="2026-12-16">১৬ ডিসেম্বর</span>
<date value="2026-12-16">১৬ ডিসেম্বর</date>

লিংক আর path (পর্ব ৫)

(মাঝারি) পাতার ঠিকানা https://example.com/blog/2026/post.html. এই পাতায় <a href="../about.html"> লিংকে চাপলে কোথায় যাবে?

https://example.com/blog/about.html
https://example.com/about.html
https://example.com/blog/2026/about.html
https://example.com/2026/about.html

(মাঝারি) পাতার ঠিকানা https://example.com/shop/item.html. এখানে <link rel="stylesheet" href="/css/style.css"> কোন ফাইলটি আনবে?

কম্পিউটারের C: ড্রাইভের css ফোল্ডার
https://example.com/css/style.css
https://example.com/shop/css/style.css
ফাইলটি আসবে না, কারণ href-এ পুরো ঠিকানা লাগে

(সহজ) একই পাতার “যোগাযোগ” অংশে লাফ দেওয়ার লিংক বানাতে কী লাগে?

লক্ষ্য element-এ id="contact", আর লিংকে href="#contact"
লক্ষ্যে class="contact", লিংকে href=".contact"
লক্ষ্যে name="contact", লিংকে href="contact"
লিংকে target="contact"

(মাঝারি) target="_blank"-এর সাথে rel="noopener" লেখার উদ্দেশ্য কী?

নতুন ট্যাবটি যেন দ্রুত খোলে
লিংকে যেন ক্লিক করা না যায়
লিংকটি যেন সার্চ ইঞ্জিনে র‍্যাঙ্ক না পায়
নতুন ট্যাবের পাতা যেন window.opener দিয়ে পুরোনো পাতাটি অন্য ঠিকানায় সরাতে না পারে (tabnabbing)

(সহজ) পাতার ভেতরে একটি মেনু খোলা-বন্ধ করার জন্য (অন্য ঠিকানায় না গিয়ে) কোন element সঠিক?

href ছাড়া <a>
<div onclick="...">
<button type="button">
<a href="#">

(মাঝারি) screen reader-এর “সব লিংকের তালিকা” থেকেও বোঝা যায় এমন সবচেয়ে অর্থবহ লিংক-লেখা কোনটি?

পুরো ঠিকানা: https://example.com/files/2026/form-v3-final.pdf
“আরও”
“এখানে ক্লিক করুন”
“ভর্তির ফরম ডাউনলোড (PDF, ২০০ KB)”

ছবি, মিডিয়া, তালিকা আর টেবিল (পর্ব ৬–৭)

(সহজ) শুধু সাজসজ্জার একটি ছবি (যেমন বাঁকা রেখার নকশা), যার কোনো তথ্য নেই — তার alt কী হবে?

alt="" (খালি)
alt="decoration-line-02.png"
alt="ছবি"
alt একদম না লেখা

(মাঝারি) CSS-এ ছবির মাপ দিলেও <img>-এ width আর height attribute লেখা কেন ভালো?

attribute না দিলে ছবি দেখায় না
এতে ছবির ফাইল ছোট হয়ে দ্রুত নামে
ছবি আসার আগেই ব্রাউজার অনুপাত জেনে জায়গা রাখে, তাই লেখা লাফিয়ে সরে না (CLS কমে)
এটি সার্চ ইঞ্জিনের র‍্যাঙ্কিংয়ের একমাত্র শর্ত

(মাঝারি) পাতার একদম ওপরের বড় hero ছবিতে loading="lazy" দেওয়া কেন ভুল?

loading="lazy" সব ব্রাউজারে error দেয়
প্রথম পর্দার বড় ছবি দেরিতে নামে, LCP খারাপ হয় — এমন ছবিতে বরং fetchpriority="high"
hero ছবিতে lazy দিলে ছবিটি কখনো দেখায় না
lazy দিলে ছবির alt কাজ করে না

(মাঝারি) <video src="intro.mp4" autoplay> দিলেও বেশিরভাগ ব্রাউজারে ভিডিও নিজে চলে না। সবচেয়ে সম্ভাব্য কারণ কোনটি?

MP4 ফরম্যাট ব্রাউজার চেনে না
controls না থাকলে ভিডিও চলে না
autoplay attribute বাতিল (deprecated) হয়ে গেছে
শব্দসহ স্বয়ংক্রিয় চালু ব্রাউজারের autoplay policy আটকায়; muted যোগ করলে সাধারণত চলে

(কঠিন) <video>-এ <track kind="captions" src="..." srclang="bn"> দিয়ে ক্যাপশন যোগ করতে ফাইলটি কোন ফরম্যাটে হতে হবে?

WebVTT (.vtt)
SubRip (.srt)
সাধারণ লেখা (.txt)
JSON (.json)

(মাঝারি) একটি ব্যাংকের লগইন পাতা নিজের সাইটে <iframe>-এ বসালে ফাঁকা দেখায়। কারণ কী?

<iframe> element বাতিল হয়ে গেছে
HTTPS পাতা কখনো iframe-এ চলে না
সাইটটি X-Frame-Options বা CSP-র frame-ancestors দিয়ে অন্যের পাতায় বসানো নিষেধ করেছে — clickjacking ঠেকাতে
iframe-এ width না দেওয়ায়

(সহজ) রান্নার ধাপ — যেখানে ক্রম বদলালে অর্থ বদলায় — কোন তালিকায় লিখবেন?

<dl>
<ol>
<ul>
প্রতিটি ধাপ আলাদা <p>, হাতে নম্বর লিখে

(মাঝারি) নিচের তালিকাটি ব্রাউজারে ওপর থেকে নিচে কোন ক্রমিক নম্বরগুলো দেখাবে?

<ol start="5" reversed>
  <li>চা</li>
  <li>কফি</li>
  <li>লাচ্ছি</li>
</ol>

1, 2, 3
5, 4, 3
3, 2, 1
5, 6, 7

(সহজ) শব্দকোষের মতো “শব্দ — তার অর্থ” জোড়া লেখার সঠিক তালিকা কোনটি?

<dl>-এর ভেতরে <dt> (শব্দ) আর <dd> (অর্থ)
<ol>-এর ভেতরে <li> আর <dd>
<ul>-এর ভেতরে <dt> আর <dd>
<table>-এর ভেতরে <dt>

(মাঝারি) টেবিলের একটি শিরোনাম-ঘর পুরো কলামের শিরোনাম — এটি screen reader-কে জানাতে কী লিখবেন?

<th colspan="col">
<thead role="col">
<th scope="col">
<td scope="col">

(কঠিন) নিচের HTML-এ DOM তৈরির পর <table>-এর সরাসরি সন্তান কোন element?

<table>
  <tr><td>১</td><td>২</td></tr>
</table>

<tr> — যেমন লেখা হয়েছে
<thead> — প্রথম সারি সবসময় শিরোনাম ধরা হয়
<td> — tr মুছে যায়
<tbody> — parser নিজে থেকে বসিয়ে দেয়

মডিউল ১-এর প্রচলিত ফাঁদ:

View Source আর Elements প্যানেলকে এক ভাবা — প্রথমটি সার্ভারের ফাইল, দ্বিতীয়টি বর্তমান DOM.
<b>, <i>-কে “বাতিল” বলা — বাতিল নয়, তাদের অর্থ আলাদা; বাতিল হলো <center>, <font>.
../ আর /-এর হিসাব গুলিয়ে ফেলা — একটি এক ধাপ ওপরে, অন্যটি সাইটের মূলে।
সাজসজ্জার ছবিতে alt বাদ দেওয়া — বাদ নয়, খালি (alt="")।
সোর্সের HTML আর DOM-কে হুবহু এক ভাবা — parser tbody বসায়, ভুল nesting ঠিক করে।

revise পর্ব: পর্ব ০১ · ওয়েব কীভাবে চলে · পর্ব ০২ · কাজের টুল · পর্ব ০৩ · প্রথম HTML পেজ · পর্ব ০৪ · লেখা ও অর্থবহ ট্যাগ · পর্ব ০৫ · লিংক আর path · পর্ব ০৬ · ছবি, অডিও, ভিডিও · পর্ব ০৭ · তালিকা আর টেবিল

৩ · মডিউল ২ — গঠন, ফর্ম ও অ্যাক্সেসিবিলিটি (৪৭টি প্রশ্ন)

চাকরির পরীক্ষা আর ইন্টারভিউতে এই মডিউল থেকে প্রশ্ন সবচেয়ে বেশি বাড়ছে, কারণ ফর্ম আর অ্যাক্সেসিবিলিটি ভুল হলে আসল ব্যবহারকারী আটকে যান। মূল বিষয়: GET-POST, name আর label-এর কাজ, built-in validation, landmark element, <dialog> আর popover, WCAG আর ARIA-র প্রথম নিয়ম, canonical, Open Graph আর ওয়েবে বাংলার UTF-8.

ফর্ম, কন্ট্রোল আর validation (পর্ব ৮–৯)

(সহজ) লগইন ফর্মের পাসওয়ার্ড পাঠাতে <form>-এর কোন method বেছে নেবেন?

secure
post
get
put

(সহজ) ফর্ম জমা দিলে কোনো ঘরের মান সার্ভারে যেতে হলে ঘরটিতে কোন attribute অবশ্যই থাকতে হবে?

name
class
id
placeholder

(সহজ) <label> আর <input>-কে কীভাবে যুক্ত করবেন, যাতে লেবেলে চাপলেও ঘরে focus আসে আর screen reader ঘরের নাম পড়ে?

<label class="phone"> আর <input class="phone">
<label name="phone"> আর <input name="phone">
label-কে input-এর ঠিক আগে লিখলেই হয়
<label for="phone"> আর <input id="phone"> — for আর id-এর মান এক

(মাঝারি) ফর্মের ভেতরে type ছাড়া <button>-এর আচরণ কী?

ব্রাউজার error দেখায়, কারণ type বাধ্যতামূলক
type="button"-এর মতো — কিছুই করে না
type="submit"-এর মতো — চাপলে ফর্ম জমা হয়
type="reset"-এর মতো — সব ঘর মুছে দেয়

(মাঝারি) placeholder কেন <label>-এর বদলি নয়?

placeholder দিলে ফর্ম জমা হয় না
placeholder-এর লেখা সার্ভারে চলে যায়
লেখা শুরু করলে হারিয়ে যায়, রং হালকা হওয়ায় পড়া কঠিন, আর সব সহায়ক প্রযুক্তি একে নির্ভরযোগ্য নাম হিসেবে নেয় না
placeholder শুধু পাসওয়ার্ড ঘরে কাজ করে

(মাঝারি) বাংলাদেশি মোবাইল নম্বরের ঘরে কোন type সবচেয়ে উপযুক্ত?

type="tel"
type="phone"
type="number"
type="digits"

(মাঝারি) নিচের ফর্মে ঘরে কিছু না বদলে “খুঁজুন” চাপলে ব্রাউজার কোন ঠিকানায় যেতে চাইবে?

<form action="/search">
  <input name="q" value="dhaka">
  <button>খুঁজুন</button>
</form>

কোথাও যাবে না, কারণ button-এ type নেই
/search#q=dhaka
/search — মান যায় request-এর body-তে
/search?q=dhaka

(সহজ) একই প্রশ্নের তিনটি radio বোতামের মধ্যে একসাথে একটিই যেন বাছা যায় — এর জন্য কী লাগে?

তিনটির id একই রাখা
তিনটির name একই রাখা
তিনটিকে একটি <div>-এ রাখা
তিনটিতে type="checkbox" দেওয়া

(মাঝারি) disabled আর readonly ঘরের পার্থক্য কোনটি?

দুটি হুবহু এক
readonly-র মান জমা হয় আর focus পায়; disabled-এর মান জমা হয় না, focus-ও পায় না
disabled-এর মান জমা হয়, readonly-র হয় না
readonly শুধু checkbox-এ কাজ করে

(মাঝারি) <select> আর <input list="..."> + <datalist>-এর মূল পার্থক্য কী?

select-এ শুধু তালিকার মান বাছা যায়; datalist শুধু পরামর্শ দেয়, ব্যবহারকারী নিজের লেখাও দিতে পারেন
দুটি একই জিনিস, datalist নতুন নাম
datalist শুধু সংখ্যার ঘরে কাজ করে
datalist-এ শুধু তালিকার মান বাছা যায়, select-এ মুক্ত লেখা চলে

(মাঝারি) ফোনের ব্যাটারিতে কত শতাংশ চার্জ আছে — জানা সীমার (0–100) মধ্যে একটি মাপ দেখাতে কোন element?

<range>
<output>
<progress>
<meter>

(সহজ) HTML-এ required, pattern দিয়ে যাচাই থাকলেও সার্ভারে আবার যাচাই কেন বাধ্যতামূলক?

বাধ্যতামূলক নয়, HTML-এর যাচাইই যথেষ্ট
সার্ভারের যাচাই দ্রুত
ব্রাউজারের যাচাই যে কেউ এড়াতে পারে — DevTools-এ attribute মুছে বা সরাসরি request পাঠিয়ে
পুরোনো ব্রাউজার HTML validation চেনে না

(কঠিন) <input name="mobile" pattern="01[3-9][0-9]{8}"> — নিচের কোন মানটি বৈধ ধরা হবে?

+8801712345678
01712345678
0171234567
01212345678

(মাঝারি) <input type="checkbox" name="news" value="yes"> — টিক না দিয়ে ফর্ম জমা দিলে এই ঘর থেকে সার্ভারে কী যায়?

news=off
news=no
কিছুই যায় না — জোড়াটি তালিকাতেই থাকে না
news= (খালি মান)

Semantic layout আর JavaScript ছাড়া ইন্টারঅ্যাকটিভ HTML (পর্ব ১০–১১)

(মাঝারি) <article> আর <section>-এর পার্থক্য কোনটি?

দুটি একই, শুধু নাম আলাদা
section একা দাঁড়ায়, article কখনো একা দাঁড়ায় না
article শুধু ব্লগে, section শুধু হোমপেজে ব্যবহার হয়
article একা দাঁড়াতে পারে এমন নিজে-সম্পূর্ণ অংশ (খবর, পোস্ট, মন্তব্য); section একটি বড় জিনিসের শিরোনামসহ বিষয়ভিত্তিক ভাগ

(সহজ) একটি পাতায় দৃশ্যমান <main> element কয়টি থাকতে পারে?

একটিই
যত খুশি
প্রতিটি section-এ একটি
একটিও না, main বাতিল element

(মাঝারি) একটি <article>-এর ভেতরে রাখা <header> সম্পর্কে কোনটি সত্য?

বৈধ — এটি ওই article-এর শিরোনাম-অংশ, আর তখন এটি পুরো পাতার banner landmark নয়
অবৈধ — header শুধু পাতার একদম ওপরে থাকে
header-এর ভেতরে heading রাখা নিষেধ
বৈধ, আর এটিও পাতার banner landmark

(সহজ) মূল লেখার পাশে “সম্পর্কিত খবর” বাক্স — মূল লেখার সাথে আংশিক সম্পর্কিত — কোন element-এ রাখবেন?

<footer>
<aside>
<nav>
<main>

(মাঝারি) skip link (“সরাসরি মূল অংশে যান”) কাদের জন্য সবচেয়ে বেশি কাজের?

পাতাকে দ্রুত লোড করার জন্য
শুধু মোবাইল ব্যবহারকারীর জন্য
যাঁরা কি-বোর্ড বা screen reader দিয়ে পাতা চালান — প্রতিটি পাতায় মেনুর সব লিংক পার হতে হয় না
সার্চ ইঞ্জিনের crawler-এর জন্য

(মাঝারি) শুধু স্টাইল দেওয়ার জন্য কয়েকটি element-কে একটি মোড়কে রাখতে হবে, যার কোনো আলাদা অর্থ নেই। কোনটি সঠিক?

<main>
<article>
<section>
<div>

(সহজ) JavaScript ছাড়া খোলা-বন্ধ হয় এমন FAQ বানাতে কোন element জোড়া?

<dialog> আর <summary>
<accordion> আর <panel>
<toggle> আর <content>
<details> আর তার প্রথম সন্তান <summary>

(মাঝারি) <dialog>-এর showModal() আর show()-এর পার্থক্য কোনটি?

show() modal, showModal() non-modal
showModal দেয় top layer, ::backdrop, বাকি পাতা inert, আর Esc-এ বন্ধ; show শুধু non-modal ভাবে দেখায়
দুটি হুবহু এক
showModal() পাতাকে নতুন ট্যাবে খোলে

(মাঝারি) dialog-এর ভেতরের <form method="dialog">-এ একটি বোতাম চাপলে কী হয়?

সার্ভারে কিছু যায় না; dialog বন্ধ হয়, আর চাপা বোতামের value dialog-এর returnValue-তে থাকে
ফর্মটি POST দিয়ে সার্ভারে যায়
পাতা reload হয়
কিছুই হয় না, “dialog” অবৈধ method

(কঠিন) popover="auto" আর popover="manual"-এর পার্থক্য কোনটি?

manual খুলতে JavaScript লাগে, auto-তে popovertarget কাজ করে না
দুটিই হুবহু এক, শুধু নাম আলাদা
auto বাইরে চাপলে বা Esc-এ বন্ধ হয় (light dismiss), আর অন্য auto popover খুললে আগেরটি বন্ধ হয়; manual শুধু বোতাম বা স্ক্রিপ্টে বন্ধ হয়
manual light dismiss হয়, auto হয় না

(কঠিন) কয়েকটি <details>-এ একই name attribute দিলে কী হয়?

ফর্ম জমা দিলে খোলা details-এর মান সার্ভারে যায়
প্রথমটি ছাড়া বাকিগুলো লুকিয়ে যায়
একটি খুললে একই name-এর বাকিগুলো নিজে থেকে বন্ধ হয় — exclusive accordion
সবগুলো একসাথে খোলে আর বন্ধ হয়

অ্যাক্সেসিবিলিটি (পর্ব ১২)

(সহজ) WCAG-এর চার নীতির সংক্ষিপ্ত রূপ POUR — এর অক্ষরগুলো কী বোঝায়?

Perceivable, Organized, Usable, Responsive
Public, Open, Universal, Readable
Performance, Optimization, Usability, Responsiveness
Perceivable, Operable, Understandable, Robust

(সহজ) “ARIA-র প্রথম নিয়ম” কী বলে?

নিজস্ব HTML element বা attribute দিয়ে কাজ হলে ARIA নয়, সেটিই ব্যবহার করুন
ARIA দিলে element-এর চেহারা বদলায়
ARIA দিলে কি-বোর্ড আচরণ নিজে থেকে যোগ হয়
প্রতিটি element-এ একটি role দিন

(মাঝারি) tabindex="0" আর tabindex="-1"-এর পার্থক্য কোনটি?

-1 element-কে Tab-ক্রমের একদম প্রথমে আনে
0 element-কে স্বাভাবিক Tab-ক্রমে ঢোকায়; -1 Tab-এ আনে না, কিন্তু স্ক্রিপ্ট দিয়ে focus দেওয়া যায়
দুটিই একই, শুধু লেখার ধরন আলাদা
0 element-কে focus পাওয়া থেকে পুরোপুরি বাদ দেয়

(মাঝারি) aria-label, aria-labelledby আর aria-describedby সম্পর্কে কোনটি সঠিক?

aria-describedby নাম দেয়, aria-label বিবরণ দেয়
তিনটিই একই কাজ করে
প্রথম দুটি নাম দেয় (সরাসরি লেখা বনাম অন্য element-এর id থেকে), তৃতীয়টি বাড়তি বিবরণ দেয়
aria-labelledby-তে সরাসরি লেখা দিতে হয়

(মাঝারি) নিচের কোন markup অ্যাক্সেসিবিলিটির সমস্যা তৈরি করে?

<button aria-hidden="true">মুছুন</button>
মেনু-বোতামে aria-expanded="false"
সাজসজ্জার <svg aria-hidden="true"> একটি নামওয়ালা বোতামের ভেতরে
বার্তার ঘরে role="status"

(মাঝারি) অনলাইন দোকানে “কার্টে যোগ হয়েছে” বার্তাটি screen reader যেন focus না সরিয়েই পড়ে শোনায় — কী ব্যবহার করবেন?

বার্তাকে লাল রঙে বড় করে দেখানো
বার্তার ঘরে aria-live="polite" (বা role="status")
বার্তার ঘরে tabindex="0"
alert() দিয়ে popup

(মাঝারি) একটি বোতামের ভেতরে শুধু খোঁজার আইকন (ম্যাগনিফাইং গ্লাস) একটি <img>. ছবিটির alt কী হবে?

alt=""
alt="ম্যাগনিফাইং গ্লাসের ছবি"
alt="icon-search.png"
alt="খুঁজুন"

head, meta, SEO আর ওয়েবে বাংলা (পর্ব ১৩–১৪)

(সহজ) <meta name="viewport" content="width=device-width, initial-scale=1"> না দিলে মোবাইলে কী হয়?

কোনো পার্থক্য হয় না, এটি শুধু SEO-র জন্য
পাতা মোবাইলে একদমই খোলে না
ছবি দেখায় না
মোবাইল ব্রাউজার পাতাকে প্রায় 980px চওড়া ধরে ছোট করে দেখায়, আর media query-ও সেই চওড়া দেখে

(মাঝারি) <link rel="canonical" href="..."> কী কাজে লাগে?

পাতার CSS ফাইল যোগ করে
পাতাকে অন্য ঠিকানায় redirect করে
একই লেখা কয়েকটি ঠিকানায় থাকলে সার্চ ইঞ্জিনকে আসল ঠিকানাটি জানায়
পাতাকে সার্চ ফলাফল থেকে লুকায়

(সহজ) Facebook বা WhatsApp-এ লিংক শেয়ার করলে যে ছবি-শিরোনামসহ কার্ড আসে, তা মূলত কোন meta ট্যাগ থেকে আসে?

Open Graph (og:title, og:image, og:description)
<meta charset>
<link rel="icon">
<meta name="keywords">

(কঠিন) robots.txt-এ একটি পাতা Disallow করা আর পাতায় <meta name="robots" content="noindex"> দেওয়ার পার্থক্য কোনটি?

noindex দিলে পাতা ব্রাউজারে খোলে না
robots.txt crawl করা আটকায়; noindex সূচিপত্রে রাখা আটকায় — আর noindex কাজ করতে হলে পাতাটি crawl করতে দিতে হয়
দুটি হুবহু এক
robots.txt দিলে পাতা পাসওয়ার্ডে সুরক্ষিত হয়

(মাঝারি) <meta name="description" content="..."> সম্পর্কে কোনটি সঠিক?

এতে যত বেশি keyword, র‍্যাঙ্ক তত ওপরে
এটি পাতার body-তে প্রথম অনুচ্ছেদ হিসেবে দেখায়
সার্চ ফলাফলে পাতার নিচের সারাংশ হিসেবে দেখানো হতে পারে — তাই মানুষকে চাপতে আগ্রহী করে
এটি না দিলে পাতা সার্চে আসে না

(মাঝারি) আধুনিক সার্চ ইঞ্জিন (যেমন Google) র‍্যাঙ্কিংয়ে কোনটি উপেক্ষা করে?

<meta name="keywords">
পাতার আসল লেখা
পাতার <title>
অন্য সাইট থেকে আসা লিংক

(মাঝারি) রেসিপির রান্নার সময়, রেটিং বা ইভেন্টের তারিখ সার্চ ফলাফলে বিশেষভাবে দেখাতে সাহায্য করে কোনটি?

<title>-এ সব তথ্য লিখে দেওয়া
schema.org-এর structured data, সাধারণত JSON-LD-এ
<meta name="rating">
লেখাকে <strong> দিয়ে মোটা করা

(মাঝারি) Unicode আর UTF-8-এর সম্পর্ক কোনটি?

Unicode একটি ফন্টের নাম
UTF-8 শুধু ইংরেজির জন্য, বাংলায় Unicode লাগে
দুটি একই জিনিস
Unicode প্রতিটি অক্ষরকে একটি নম্বর (code point) দেয়; UTF-8 সেই নম্বরকে বাইটে লেখার একটি নিয়ম

(মাঝারি) <meta charset="utf-8"> কোথায় লিখতে হয়?

CSS ফাইলের ভেতরে
<head>-এর একদম শুরুতে — ফাইলের প্রথম 1024 বাইটের ভেতরে
<body>-এর শেষে
<title>-এর পরে যেকোনো জায়গায়

(সহজ) <html lang="bn"> লেখার লাভ কোনটি নয়?

অনুবাদ টুল আর বানান-পরীক্ষা ভাষা চেনে
screen reader সঠিক উচ্চারণে পড়ে
ব্রাউজার উপযুক্ত ফন্ট বাছতে পারে
পাতা দ্রুত লোড হওয়া

(কঠিন) বাংলায় যুক্তাক্ষর না বানিয়ে স্পষ্ট হসন্ত দেখাতে (যেমন “ক্‌ষ”) হসন্তের পরে কোন অদৃশ্য অক্ষর বসানো হয়?

ZWNJ (U+200C, zero width non-joiner)
BOM (U+FEFF)
  (U+00A0)
ZWJ (U+200D, zero width joiner)

(মাঝারি) একটি পাতার বাংলা লেখা “à¦¬à¦¾à¦‚à¦²à¦¾” ধরনের অদ্ভুত অক্ষরে দেখাচ্ছে। সবচেয়ে সম্ভাব্য কারণ কী?

বাংলা ফন্ট ইনস্টল নেই
CSS-এ font-size খুব ছোট
ফাইলটি UTF-8-এ লেখা, কিন্তু ব্রাউজার অন্য encoding (যেমন Windows-1252) ধরে পড়ছে
lang="bn" লেখা হয়নি

মাইলস্টোন — পূর্ণ HTML সাইট (পর্ব ১৫)

(মাঝারি) static HTML সাইটের দশটি পাতায় একই header বারবার না লিখে রাখার বাস্তব উপায় কোনটি?

প্রতিটি পাতায় header একটি ছবি হিসেবে বসানো
CSS-এ @import "header.html"
Server Side Include, static site generator বা কোনো template ব্যবস্থা — শেষে ব্রাউজার পায় পূর্ণ HTML
<include src="header.html"> ট্যাগ

(মাঝারি) W3C-র HTML validator (validator.w3.org) নিচের কোনটি ধরতে পারে না?

ছবির alt-এর লেখা অর্থবহ কি না
ভুল জায়গায় element বসানো (নিষিদ্ধ nesting)
একই id দুবার ব্যবহার
img-এ alt একদমই না থাকা

(মাঝারি) og:image-এ ছবির ঠিকানা কোন রূপে দেওয়া উচিত?

শুধু ফাইলের নাম, যেমন cover.jpg
পূর্ণ (absolute) ঠিকানা, যেমন https://example.com/image/cover.jpg
file:///C:/site/cover.jpg
relative ঠিকানা, যেমন ../image/cover.jpg

মডিউল ২-এর প্রচলিত ফাঁদ:

type ছাড়া <button>-কে নিরীহ ভাবা — ফর্মের ভেতরে সেটি submit.
disabled আর readonly গুলিয়ে ফেলা — readonly-র মান জমা হয়, disabled-এর হয় না।
section-কে সব মোড়কের জন্য ব্যবহার — অর্থ না থাকলে div-ই সঠিক।
ARIA দিলে আচরণ যোগ হয় ভাবা — role শুধু ঘোষণা; কি-বোর্ড নিজে লিখতে হয়, তাই আগে নিজস্ব element.
robots.txt-কে সুরক্ষা বা noindex-এর বদলি ভাবা — একটি crawl আটকায়, অন্যটি সূচিতে রাখা।
mojibake-কে ফন্টের সমস্যা ভাবা — ল্যাটিন অক্ষরের সারি মানে encoding-এর গোলমাল।

revise পর্ব: পর্ব ০৮ · ফর্মের ভিত্তি · পর্ব ০৯ · কন্ট্রোল আর validation · পর্ব ১০ · Semantic layout · পর্ব ১১ · details, dialog, popover · পর্ব ১২ · অ্যাক্সেসিবিলিটি · পর্ব ১৩ · head, meta, SEO · পর্ব ১৪ · ওয়েবে বাংলা · পর্ব ১৫ · মাইলস্টোন সাইট

৪ · মডিউল ৩ — CSS-এর ভিত্তি (৪৩টি প্রশ্ন)

কোড পড়ার সবচেয়ে বেশি প্রশ্ন আসে এই মডিউল থেকে। প্রশ্নকর্তার প্রিয় বিষয়: rule-এর অংশের নাম, combinator আর attribute selector, specificity-র হিসাব, !important, @layer, inheritance, box-sizing আর margin collapsing, em বনাম rem, এককহীন line-height আর shadow-gradient-এর syntax. প্রতিটি কোড-প্রশ্নে আগে নিজে হিসাব করুন — specificity লিখুন তিন ঘরে, মাপ লিখুন খাতায়।

CSS-এর সাথে পরিচয় (পর্ব ১৬)

(সহজ) CSS-এর পূর্ণরূপ কী?

Colorful Style Sheets
Computer Style Sheets
Creative Style System
Cascading Style Sheets

(সহজ) বহু পাতার একটি সাইটে CSS যোগ করার সবচেয়ে ভালো উপায় কোনটি, আর কেন?

আলাদা .css ফাইল, <link rel="stylesheet"> দিয়ে — সব পাতায় এক ফাইল, আর ব্রাউজার একবার নামিয়ে cache-এ রাখে
প্রতিটি element-এ style attribute
প্রতিটি পাতার <head>-এ <style>
JavaScript দিয়ে স্টাইল বসানো

(সহজ) p { color: red; } rule-এ color অংশটির নাম কী?

selector
property
value
declaration block

(মাঝারি) নিচের CSS-এ অনুচ্ছেদের লেখা কেমন দেখাবে?

p {
  color: redd;
  font-size: 24px;
}

পাতায় CSS error-এর বার্তা দেখায়
পুরো rule বাদ পড়ে — লেখা ডিফল্ট মাপে, কালো
লেখা 24px, রং ডিফল্ট কালো — শুধু ভুল declaration-টি বাদ পড়ে
লেখা লাল, কারণ ব্রাউজার কাছাকাছি নাম বুঝে নেয়

(মাঝারি) CSS reset আর normalize.css-এর পার্থক্য কোনটি?

reset শুধু JavaScript ফাইলে লেখা যায়
normalize সব ডিফল্ট মুছে দেয়, reset রাখে
দুটি হুবহু এক
reset ব্রাউজারের প্রায় সব ডিফল্ট স্টাইল মুছে দেয়; normalize কাজের ডিফল্ট রেখে শুধু ব্রাউজারভেদে অমিলগুলো দূর করে

Selector (পর্ব ১৭)

(সহজ) .a.b আর .a .b selector-এর পার্থক্য কোনটি?

.a .b মানে .a-এর ঠিক পরের ভাই .b
.a.b একই element-এ দুটি class; .a .b হলো .a-এর ভেতরে (যেকোনো গভীরতায়) থাকা .b
দুটি একই, space-এর কোনো অর্থ নেই
.a.b মানে .a অথবা .b

(মাঝারি) নিচের কোডে কোন লেখাটি লাল হবে?

<div class="box">
  <p>এক</p>
  <section><p>দুই</p></section>
</div>

.box > p { color: red; }

শুধু “দুই”
“এক” আর “দুই” দুটিই
কোনোটিই না
শুধু “এক”

(মাঝারি) h2 + p selector কোন element ধরে?

যে p ঠিক একটি h2-এর পরের ভাই (একই parent-এ, মাঝে কিছু নেই)
h2-এর ভেতরের সব p
h2-এর পরের সব ভাই p
h2 আর p — দুটিই

(মাঝারি) শুধু PDF ফাইলের লিংকে একটি আইকন দেখাতে কোন selector?

a[href^=".pdf"]
a.pdf
a[href$=".pdf"]
a[href="pdf"]

(কঠিন) নিচের CSS-এ h1-এর রং কী হবে, যদি ব্রাউজার :unknown-thing চেনে না?

h1, p:unknown-thing { color: red; }

লাল — অবৈধ অংশটি বাদ দিয়ে বাকিটা চলে
লাল, আর p-ও লাল
ডিফল্ট কালো — তালিকার একটি selector অবৈধ হলে পুরো rule বাতিল হয়
পাতার CSS পুরোটা কাজ বন্ধ করে

(কঠিন) #menu .item a selector মেলাতে ব্রাউজার সাধারণত কোন দিক থেকে যাচাই শুরু করে?

এলোমেলো, প্রতিবার আলাদা
মাঝখান থেকে, .item দিয়ে
বাঁ থেকে — আগে #menu খুঁজে তার ভেতরে নামে
ডান থেকে — আগে দেখে element-টি a কি না (key selector), তারপর ওপরের পূর্বপুরুষ

(কঠিন) :is() আর :where()-এর পার্থক্য কোনটি?

দুটি একই element মেলায়; :is()-এর specificity তালিকার সবচেয়ে ভারী selector-এর সমান, :where()-এর সবসময় শূন্য
:where() শুধু id মেলায়, :is() শুধু class
:where() পুরোনো ব্রাউজারের জন্য, :is() নতুনদের জন্য
:is()-এর specificity সবসময় শূন্য

Cascade, specificity আর inheritance (পর্ব ১৮)

(সহজ) #nav .item a selector-এর specificity (id, class, type) কত?

(0, 2, 1)
(1, 1, 1)
(111) — একটি সংখ্যা হিসেবে
(1, 0, 2)

(মাঝারি) ul li:first-child > a selector-এর specificity কত?

(0, 1, 2)
(0, 0, 4)
(0, 1, 3)
(0, 0, 3)

(মাঝারি) একই element-এ চারটি নিয়ম লড়ছে। সাধারণ নিয়মে (কোনো @layer ছাড়া) কে জেতে?

id selector
stylesheet-এর একটি !important declaration
সবার শেষে লেখা type selector
style attribute-এর inline style (important ছাড়া)

(কঠিন) নিচের কোডে লেখাটির রং কী?

p  { color: green !important; }
p  { color: red; }
#x { color: blue; }

<p id="x">নোটিশ</p>

সবুজ
কালো, কারণ নিয়মগুলো পরস্পরকে বাতিল করে
লাল
নীল

(কঠিন) নিচের কোডে বোতামের লেখার রং কী? (@layer এখন Baseline Widely available.)

@layer base {
  #buy { color: blue; }
}
.btn { color: green; }

<button id="buy" class="btn">কিনুন</button>

ব্রাউজারভেদে আলাদা
কালো (ডিফল্ট)
নীল
সবুজ

(কঠিন) নিচের কোডে p-এর লেখার রং কী?

* { color: black; }
div { color: red; }

<div><p>লেখা</p></div>

লাল — পরে লেখা নিয়ম জেতে
ব্রাউজারের ডিফল্ট নীল
কালো
লাল — div-এর রং উত্তরাধিকারে আসে, আর div-এর specificity বেশি

(সহজ) কোন property ডিফল্টে উত্তরাধিকারে (parent থেকে child-এ) যায়?

color
border
margin
background-color

(মাঝারি) কোন CSS-wide keyword একটি property-কে parent-এর computed মান নিতে বাধ্য করে — property-টি সাধারণত উত্তরাধিকারী না হলেও?

auto
inherit
none
initial

Box model (পর্ব ১৯)

(সহজ) box model-এর স্তরগুলো ভেতর থেকে বাইরের দিকে কোন ক্রমে?

border → padding → content → margin
content → margin → border → padding
padding → content → border → margin
content → padding → border → margin

(মাঝারি) box-sizing: border-box; width: 300px; padding: 20px; border: 5px solid; — content অংশের চওড়া কত?

350px
300px
250px
260px

(মাঝারি) নিচের দুটি অনুচ্ছেদের মাঝে আসলে কত ফাঁক থাকবে?

.a { margin-bottom: 30px; }
.b { margin-top: 20px; }

<p class="a">এক</p>
<p class="b">দুই</p>

30px
50px
20px
25px

(কঠিন) child-এর margin-top parent-এর বাইরে বেরিয়ে যাচ্ছে (parent-child margin collapsing). parent-এ কোনটি দিলে সবচেয়ে পরিষ্কারভাবে এটি থামে?

box-sizing: border-box
width: 100%
z-index: 1
display: flow-root

(সহজ) নির্দিষ্ট চওড়ার একটি block element-কে আনুভূমিকভাবে মাঝখানে আনার প্রচলিত CSS কোনটি?

align: center;
max-width: 600px; margin-inline: auto; (বা margin: 0 auto)
vertical-align: middle;
text-align: center;

(মাঝারি) margin: 10px 20px 30px; — বাঁ দিকের margin কত?

30px
20px
10px
0 — বাঁ দিকের মান লেখা হয়নি

(মাঝারি) padding আর margin-এর পার্থক্য কোনটি সঠিক?

দুটিই border-এর বাইরে থাকে
margin-এ ব্যাকগ্রাউন্ড রং দেখা যায়
padding border-এর ভেতরে, ব্যাকগ্রাউন্ড দেখায়, ঋণাত্মক হয় না; margin বাইরে, স্বচ্ছ, ঋণাত্মক বা auto হতে পারে
padding ঋণাত্মক হতে পারে, margin পারে না

একক আর রং (পর্ব ২০)

(সহজ) html-এর font-size ডিফল্ট 16px হলে 1.5rem কত px?

24px
parent-এর font-size-এর ওপর নির্ভর করে
1.5px
15px

(কঠিন) নিচের কোডে ভেতরের লেখার font-size কত px? (html-এর font-size 16px)

.a { font-size: 1.5em; }

<div class="a">
  <div class="a">লেখা</div>
</div>

16px
48px
24px
36px

(কঠিন) parent-এর চওড়া 400px আর উচ্চতা 200px; child-এ padding-top: 10%. child-এর ওপরের padding কত?

0, কারণ শতাংশ padding-এ চলে না
40px
10px
20px

(সহজ) color: #0f0; কোন রং?

অবৈধ, hex-এ ছয়টি অঙ্ক লাগে
খাঁটি লাল
খাঁটি নীল
খাঁটি সবুজ — #00ff00, অর্থাৎ rgb(0, 255, 0)

(মাঝারি) একটি কার্ডের পেছনটা আধা-স্বচ্ছ করতে চান, কিন্তু ভেতরের লেখা পুরো স্পষ্ট থাকবে। কোনটি ঠিক?

opacity: 0.5
filter: opacity(50%)
background-color: rgb(0 0 0 / 50%)
visibility: 0.5

(সহজ) WCAG AA অনুযায়ী সাধারণ আকারের লেখা আর তার পেছনের রঙের ন্যূনতম contrast ratio কত?

৪.৫:১
২১:১
৩:১
২:১

(মাঝারি) ফোনে height: 100vh দিলে ব্রাউজারের ঠিকানা-বারের কারণে নিচের অংশ ঢাকা পড়ে। বর্তমান দৃশ্যমান উচ্চতা ধরে এমন একক কোনটি?

ex
dvh
%
vmax

(কঠিন) রঙের lightness সমান ধাপে বদলালে চোখেও সমানভাবে উজ্জ্বলতা বদলায় — এমন perceptually uniform রঙের function কোনটি?

hex (#rrggbb)
rgb()
hsl()
oklch()

টাইপোগ্রাফি, ব্যাকগ্রাউন্ড, বর্ডার আর ছায়া (পর্ব ২১–২২)

(কঠিন) নিচের কোডে p-এর computed line-height কত px?

div { font-size: 10px; line-height: 1.5em; }
p   { font-size: 20px; }

<div><p>লেখা</p></div>

15px
20px
1.5em, তাই p-তে আবার 30px
30px

(মাঝারি) font-family: "Hind Siliguri", "Noto Sans Bengali", sans-serif;-এর শেষে sans-serif কেন?

এটি না লিখলে CSS অবৈধ হয়
এটি লেখাকে মোটা করে
তালিকার কোনো ফন্ট না পেলেও ব্রাউজার যেন অন্তত সঠিক ধরনের (sans-serif) একটি ফন্ট দেয় — generic family
sans-serif একটি নির্দিষ্ট ফন্ট, যা সব কম্পিউটারে ইনস্টল থাকে

(মাঝারি) font-display: swap কী করে?

ফন্টটিকে ছবিতে বদলে দেয়
ফন্ট না আসা পর্যন্ত লেখা পুরো অদৃশ্য রাখে
দুটি ফন্ট ফাইল পরপর বদলায়
ওয়েব ফন্ট আসা পর্যন্ত লেখা বিকল্প ফন্টে দেখায়, ফন্ট এলে বদলে দেয় (FOUT, লেখা অদৃশ্য থাকে না)

(মাঝারি) font shorthand-এ কোন দুটি অংশ বাধ্যতামূলক?

font-style আর line-height
font-weight আর color
font-size আর font-family (এই ক্রমে, শেষের দিকে)
শুধু font-family

(সহজ) background-size: cover আর contain-এর পার্থক্য কোনটি?

cover পুরো বাক্স ঢাকে (ছবির কিনারা কাটা যেতে পারে); contain পুরো ছবি দেখায় (ফাঁকা জায়গা থাকতে পারে)
দুটিই একই, ব্রাউজারভেদে নাম আলাদা
contain ছবি কেটে বাক্স ভরায়
cover ছবিকে টেনে অনুপাত নষ্ট করে বাক্স ভরায়

(মাঝারি) background: url(a.png), url(b.png), #eee; — কোন স্তরটি সবার ওপরে দেখা যায়?

b.png
a.png
#eee রং
ব্রাউজার শুধু প্রথম ছবিটি দেখায়, বাকিগুলো উপেক্ষা করে

(সহজ) box-shadow: 2px 4px 6px 8px gray;-এ 6px কী?

spread
y-offset
blur radius — ছায়া কতটা ঝাপসা
x-offset

(মাঝারি) background: linear-gradient(90deg, red 50%, blue 50%); দেওয়া একটি বাক্স কেমন দেখাবে?

পুরো বাক্স বেগুনি
বাঁ থেকে ডানে লাল থেকে নীলে ধীরে ধীরে মিশে যায়
ওপরে লাল, নিচে নীল
বাঁ অর্ধেক লাল, ডান অর্ধেক নীল — মাঝে ধারালো সীমানা

মডিউল ৩-এর প্রচলিত ফাঁদ:

“পরে লেখা জেতে” — শুধু তখন, যখন importance, layer আর specificity সমান।
specificity-কে একটি সংখ্যা (১১১) ভেবে যোগ করা — তিন ঘর, বাঁ থেকে তুলনা।
উত্তরাধিকারকে specificity-র লড়াইয়ে ঢোকানো — সরাসরি লাগা *-ও উত্তরাধিকারকে হারায়।
ভুল declaration আর ভুল selector-কে একভাবে ভাবা — প্রথমটি শুধু নিজে বাদ পড়ে, দ্বিতীয়টি পুরো rule বাতিল করে।
margin-এর যোগফল ধরা — block-এ ওপর-নিচের margin মেশে, বড়টি থাকে।
শতাংশ padding-কে উচ্চতা থেকে হিসাব করা — চওড়া থেকে হয়।
em-এ line-height দেওয়া — স্থির px হয়ে উত্তরাধিকারে যায়; এককহীন সংখ্যাই নিরাপদ।

revise পর্ব: পর্ব ১৬ · CSS-এর সাথে পরিচয় · পর্ব ১৭ · Selector · পর্ব ১৮ · Cascade আর specificity · পর্ব ১৯ · Box model · পর্ব ২০ · একক আর রং · পর্ব ২১ · টাইপোগ্রাফি · পর্ব ২২ · ব্যাকগ্রাউন্ড আর ছায়া

৫ · মডিউল ৪ — লেআউট (৩৮টি প্রশ্ন)

লেআউটের প্রশ্নে মুখস্থ চলে না — মাথায় বাক্সগুলো সাজাতে হয়। প্রশ্নকর্তার প্রিয় বিষয়: normal flow আর display, position-এর containing block, stacking context আর z-index, Flexbox-এর main axis, flex: 1, min-width: auto-এর ফাঁদ, Grid-এর fr, auto-fill বনাম auto-fit, আর প্রচলিত লেআউট প্যাটার্ন। মাপের প্রশ্নে আগে মোট জায়গা থেকে স্থির মাপ আর gap বাদ দিন, তারপর ভাগ করুন।

Normal flow, display আর position (পর্ব ২৩–২৪)

(মাঝারি) <span style="width: 200px; height: 50px; background: gold;">ঢাকা</span> — span-টি কত চওড়া দেখাবে?

0px, কিছুই দেখায় না
লেখার চওড়া অনুযায়ী — width আর height উপেক্ষিত
পুরো লাইনের চওড়া
ঠিক 200px

(সহজ) inline আর inline-block-এর পার্থক্য কোনটি?

দুটোই লাইনের ভেতরে পাশাপাশি বসে, কিন্তু inline-block width, height আর ওপর-নিচের margin-padding পুরো মানে, আর দুই লাইনে ভাঙে না
দুটি একই
inline-block নতুন লাইনে শুরু হয়
inline width মানে, inline-block মানে না

(সহজ) display: none আর visibility: hidden-এর পার্থক্য কোনটি?

visibility: hidden জায়গা ছেড়ে দেয়, display: none রাখে
display: none বাক্সই মুছে দেয়, জায়গা নেয় না; visibility: hidden জায়গা রেখে অদৃশ্য করে
display: none শুধু screen reader থেকে লুকায়, পর্দা থেকে নয়
দুটোই জায়গা রাখে

(মাঝারি) একটি বাক্সে লেখা বেশি হলে তবেই স্ক্রলবার আসবে, কম হলে আসবে না — কোন মান?

overflow: auto
overflow: hidden
overflow: visible
overflow: scroll

(কঠিন) float করা ছবি parent-এর নিচ দিয়ে বেরিয়ে যাচ্ছে (parent-এর উচ্চতা ছবিকে ধরে না)। parent-এ কোনটি দিলে সবচেয়ে পরিষ্কারভাবে float ধরে রাখে?

float: none (parent-এ)
position: relative
z-index: 10
display: flow-root

(মাঝারি) এক লাইনের লম্বা শিরোনাম কেটে শেষে “…” দেখাতে কোন তিনটি property একসাথে লাগে (বাক্সের চওড়া সীমিত ধরে)?

overflow: scroll; text-overflow: dots;
text-overflow: ellipsis; একাই যথেষ্ট
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
word-break: ellipsis;

(মাঝারি) position: relative আর position: absolute-এর পার্থক্য কোনটি?

relative flow-এ নিজের জায়গা রেখে সেখান থেকে সরে; absolute flow থেকে বেরিয়ে যায় আর নিকটতম positioned পূর্বপুরুষের সাপেক্ষে বসে
absolute জায়গা রাখে, relative রাখে না
relative viewport-এর সাপেক্ষে, absolute parent-এর সাপেক্ষে
দুটিই flow থেকে বেরিয়ে যায়

(মাঝারি) নিচের কোডে লাল ব্যাজটি কোন বাক্সের ওপরের-ডান কোণে বসবে?

.card  { position: relative; }
.inner { padding: 20px; }
.badge { position: absolute; top: 0; right: 0; }

<div class="card">
  <div class="inner">
    <span class="badge">নতুন</span>
  </div>
</div>

যেখানে লেখা আছে সেখানেই, সরবে না
.card
পুরো পাতার (viewport-এর) কোণে
.inner

(মাঝারি) position: fixed আর position: sticky-র পার্থক্য কোনটি?

sticky flow থেকে বেরিয়ে যায়, fixed থাকে
দুটিই হুবহু এক
fixed শুধু মোবাইলে কাজ করে
fixed flow ছেড়ে viewport-এ সবসময় আটকে থাকে; sticky flow-এ থাকে, আর নির্দিষ্ট দূরত্বে পৌঁছালে শুধু নিজের parent-এর সীমার ভেতরে আটকায়

(মাঝারি) একটি header-এ position: sticky দিয়েছেন, কিন্তু স্ক্রলে আটকায় না। প্রথমে কী যাচাই করবেন?

display: flex আছে কি না
z-index ৯৯৯৯ দেওয়া আছে কি না
top (বা অন্য কোনো দিকের দূরত্ব) দেওয়া আছে কি না, আর কোনো পূর্বপুরুষে overflow: hidden/auto আছে কি না
sticky শুধু টেবিলে চলে কি না

(কঠিন) একটি element-এ z-index: 9999 দেওয়া, তবু সে পাশের একটি z-index: 1 বাক্সের নিচে ঢাকা পড়ছে। সবচেয়ে সম্ভাব্য কারণ কী?

element-টি এমন একটি stacking context-এর ভেতরে আছে, যার নিজের দলটি অন্য দলের চেয়ে নিচে
ব্রাউজার z-index উপেক্ষা করে যখন পাশে লেখা থাকে
9999 সর্বোচ্চ সীমার চেয়ে বড়
z-index শুধু ঋণাত্মক মানে কাজ করে

(মাঝারি) একটি নির্দিষ্ট মাপের (200px × 100px) absolute বাক্সকে তার positioned parent-এর ঠিক মাঝখানে বসানোর একটি নির্ভরযোগ্য উপায় কোনটি?

text-align: center; vertical-align: middle;
top: 50%; left: 50%; একাই
float: center;
inset: 0; margin: auto;

(কঠিন) নিচের কোডে .box-এর উচ্চতা কত হবে (কোনো padding বা border নেই)?

.box  { position: relative; }
.icon { position: absolute; top: 0; left: 0; height: 80px; }

<div class="box">
  <div class="icon">★</div>
</div>

80px
80px-এর চেয়ে বেশি, কারণ relative বাড়তি জায়গা যোগ করে
0px
পুরো পর্দার উচ্চতা

Flexbox (পর্ব ২৫–২৬)

(সহজ) display: flex container-এ justify-content কোন দিকে item সাজায়?

cross axis বরাবর
main axis বরাবর — ডিফল্ট flex-direction: row-এ আনুভূমিক
সবসময় খাড়া দিকে
দুই দিকেই একসাথে

(মাঝারি) flex-direction: column container-এ justify-content: center দিলে item-গুলো কোন দিকে মাঝখানে আসে?

খাড়া দিকে (ওপর-নিচ) — যদি container-এর বাড়তি উচ্চতা থাকে
কোনো দিকেই না, column-এ justify-content চলে না
আনুভূমিক দিকে
দুই দিকেই

(সহজ) flex container-এর ডিফল্ট flex-wrap কী?

auto
wrap-reverse
wrap
nowrap — সব item এক লাইনে থাকে, দরকারে ছোট হয়

(মাঝারি) flex: 1 আর flex: auto-এর পার্থক্য কোনটি?

flex: auto item-কে সঙ্কুচিত হতে দেয় না
flex: 1 = 1 1 0% — পুরো জায়গা সমান ভাগ; flex: auto = 1 1 auto — লেখার মাপ রেখে বাকি জায়গা ভাগ
দুটিই একই
flex: 1 item-কে বাড়তে দেয় না

(মাঝারি) align-items আর align-content-এর পার্থক্য কোনটি?

align-content শুধু Grid-এ চলে
align-content প্রতিটি item সাজায়, align-items লাইন
align-items প্রতিটি লাইনের ভেতরে item সাজায়; align-content কয়েক লাইনের (wrap করা) container-এ লাইনগুলোকে সাজায়
দুটিই main axis-এ কাজ করে

(কঠিন) 600px চওড়া flex container-এ তিনটি item, প্রতিটির width: 100px আর কোনো gap নেই। প্রথম ও তৃতীয় item-এ flex-grow: 1, দ্বিতীয়টিতে flex-grow: 2. দ্বিতীয় item-এর চওড়া কত হবে?

250px
300px
200px
150px

(সহজ) navbar-এ লোগো বাঁয়ে আর বাকি সব লিংক ডানে ঠেলে দেওয়ার সবচেয়ে মজবুত Flexbox কৌশল কোনটি?

justify-content: right একাই
লোগোতে width: 80%
প্রতিটি লিংকে float: right
ডানের দলের প্রথম item-এ margin-left: auto (বা margin-inline-start: auto)

(কঠিন) flex item-এর ভেতরের একটি লম্বা URL বা টেবিল বাক্স ভেঙে বাইরে বেরিয়ে যাচ্ছে, item ছোট হচ্ছে না। সাধারণ সমাধান কোনটি?

item-এ flex-shrink: 0
item-এ width: 100vw
item-এ min-width: 0
container-এ flex-wrap: nowrap

(মাঝারি) কার্ডগুলোর উচ্চতা সমান, কিন্তু প্রতিটি কার্ডের “কিনুন” বোতামকে কার্ডের একদম নিচে বসাতে চান। কার্ডটি display: flex; flex-direction: column; হলে বোতামে কী দেবেন?

align-self: flex-end
margin-top: auto
position: fixed; bottom: 0
vertical-align: bottom

(সহজ) flex item-গুলোর মাঝে সমান ফাঁক দেওয়ার আধুনিক, সবচেয়ে সরল উপায় কোনটি?

প্রতিটি item-এ margin-right: 1rem
justify-content: space-between
container-এ padding: 1rem
container-এ gap: 1rem

CSS Grid (পর্ব ২৭–২৮)

(সহজ) Grid-এর fr একক কী বোঝায়?

একটি নির্দিষ্ট pixel মাপ
স্থির মাপের track আর gap বাদ দেওয়ার পর বাকি জায়গার একটি ভাগ
font-size-এর গুণিতক, em-এর মতো
পুরো container-এর শতাংশ, gap ধরেই

(মাঝারি) ৪টি কলামের grid-এ কয়টি খাড়া grid line থাকে, আর grid-column: 1 / -1 কী করে?

৫টি line; item-টি প্রথম থেকে শেষ line পর্যন্ত — পুরো চওড়া — জুড়ে বসে
৫টি line; item-টি শেষ কলামে বসে
৩টি line; -1 অবৈধ
৪টি line; item-টি শুধু প্রথম কলামে বসে

(কঠিন) 820px চওড়া grid container-এ grid-template-columns: 200px 1fr 2fr; gap: 10px;. তৃতীয় কলামটি কত চওড়া?

413.33px
546.67px
400px
2fr — px-এ বলা যায় না

(মাঝারি) explicit আর implicit grid-এর পার্থক্য কোনটি?

দুটি একই
explicit ব্রাউজার বানায়, implicit আপনি
implicit grid শুধু Flexbox-এ হয়
template দিয়ে নিজে বানানো সারি-কলাম explicit; বাড়তি item-এর জন্য ব্রাউজারের বানানো সারি-কলাম implicit, যার মাপ দেয় grid-auto-rows/grid-auto-columns

(মাঝারি) Grid-এ justify-items আর justify-content-এর পার্থক্য কোনটি?

justify-items প্রতিটি ঘরের ভেতরে item সরায়; justify-content পুরো ছকটি container-এর চেয়ে ছোট হলে ছকটিকেই সরায়
দুটিই একই কাজ করে
justify-content ঘরের ভেতরে, justify-items পুরো ছক
Grid-এ justify-items কাজ করে না

(কঠিন) repeat(auto-fill, minmax(150px, 1fr)) আর repeat(auto-fit, minmax(150px, 1fr))-এর পার্থক্য কখন চোখে পড়ে?

সবসময় — auto-fit কোনো কলাম বানায় না
item কম আর জায়গা বেশি হলে — auto-fill খালি কলাম রেখে দেয়, auto-fit খালি কলাম শূন্যে গুটিয়ে item-গুলোকে ছড়িয়ে দেয়
কখনো না, দুটি হুবহু এক
শুধু ছাপার সময়

(কঠিন) media query ছাড়াই রেসপন্সিভ কার্ড grid-এর প্রচলিত লাইনে min(250px, 100%) কেন লেখা হয়: repeat(auto-fit, minmax(min(250px, 100%), 1fr))?

এতে কলামের সংখ্যা সবসময় চার থাকে
min() পুরোনো ব্রাউজারের জন্য prefix-এর কাজ করে
container 250px-এর চেয়ে সরু হলে (খুব ছোট ফোন) কার্ড যেন উপচে না পড়ে — তখন সর্বনিম্ন মাপ হয় container-এর ১০০%
এতে কার্ডের উচ্চতা সমান হয়

(কঠিন) grid-template-columns: 1fr 1fr দেওয়া grid-এ একটি কলামে লম্বা ভাঙে না এমন লেখা থাকায় কলাম দুটি সমান থাকছে না। কারণ আর সমাধান কোনটি?

fr শুধু ছবির জন্য কাজ করে
gap না দেওয়ায়
1fr আসলে minmax(auto, 1fr) — নিচের সীমা content-এর ন্যূনতম মাপ; minmax(0, 1fr) লিখলে সমান থাকে
1fr 1fr অবৈধ, repeat(2, 1fr) লিখতে হয়

(মাঝারি) grid-template-areas-এর কোন নিয়ম ভাঙলে পুরো ঘোষণা বাতিল হয়?

একটি নাম একবারের বেশি লেখা যাবে না
. দিয়ে খালি ঘর রাখা যাবে না
এলাকার নাম ইংরেজি বড় হাতের হতে হবে
প্রতিটি নামের এলাকা আয়তাকার হতে হবে, আর প্রতিটি সারিতে ঘরের সংখ্যা সমান

(কঠিন) কার্ডের ভেতরের শিরোনাম, লেখা আর বোতাম যেন পাশের কার্ডগুলোর সাথে একই সারিতে মেলে — parent grid-এর সারি ভেতরে ব্যবহার করতে কোনটি?

masonry
grid-template-rows: subgrid (কার্ডে, যা নিজে কয়েক সারি জুড়ে থাকে)
display: contents
grid-auto-flow: dense

(মাঝারি) Grid-এর order বা grid-area দিয়ে চোখের ক্রম বদলালে মূল সমস্যা কী?

Tab আর screen reader DOM-এর ক্রম মানে — তাই চোখে দেখা ক্রম আর কি-বোর্ডে চলার ক্রম আলাদা হয়ে যায়
ব্রাউজার order উপেক্ষা করে
পাতা লোড হতে বেশি সময় লাগে
সার্চ ইঞ্জিন পাতা সূচিতে নেয় না

(মাঝারি) Grid দিয়ে একটি item-কে দুই দিকেই (আনুভূমিক আর খাড়া) মাঝখানে আনার সবচেয়ে ছোট CSS কোনটি — container-এর উচ্চতা থাকলে?

container-এ display: grid; place-items: center;
container-এ display: grid; text-align: center;
container-এ display: grid; vertical-align: middle;
item-এ float: center;

প্রচলিত লেআউট প্যাটার্ন (পর্ব ২৯)

(মাঝারি) লেখা কম থাকলেও footer যেন পাতার একদম নিচে থাকে — “pancake stack”-এর CSS কোনটি?

body-তে height: 100px
footer-এ position: absolute; bottom: 0;
container-এ min-block-size: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
footer-এ margin-top: 100vh

(সহজ) holy grail layout বলতে কী বোঝায়?

শুধু একটি বড় ছবির পাতা
ওপরে header, নিচে footer, আর মাঝে তিন কলাম — nav, main, aside
একটি কলামের লম্বা লেখা
Pinterest-এর মতো ভিন্ন উচ্চতার কার্ড

(মাঝারি) কোন কাজে Flexbox, আর কোন কাজে Grid বেশি স্বাভাবিক?

Grid শুধু ছবির gallery-র জন্য
Flexbox পুরোনো, এখন সব কাজে Grid
Flexbox শুধু মোবাইলে, Grid শুধু ডেস্কটপে
এক সারিতে সাজানো আর ভাঁজ হওয়া জিনিস (navbar, ট্যাগের সারি) — Flexbox; সারি আর কলাম একসাথে মেলানো (পাতার কাঠামো, ড্যাশবোর্ড) — Grid

মডিউল ৪-এর প্রচলিত ফাঁদ:

inline element-এ width-height দিয়ে অবাক হওয়া — span মানে না, inline-block মানে।
absolute-কে parent-এর সাপেক্ষে ভাবা — আসলে নিকটতম positioned পূর্বপুরুষ।
z-index-এর সংখ্যা বাড়িয়ে সমস্যা মেটানোর চেষ্টা — আসল কারণ stacking context.
flex-direction বদলালে justify আর align-এর দিকও বদলায় — এটি ভুলে যাওয়া।
flex-grow মূল মাপকে গুণ করে ভাবা — শুধু বাড়তি জায়গা ভাগ করে।
min-width: auto আর 1fr-এর নিচের সীমা — লম্বা content-এ লেআউট ভাঙার সবচেয়ে প্রচলিত কারণ।
fr-এর হিসাবে gap বাদ দিতে ভুলে যাওয়া।

revise পর্ব: পর্ব ২৩ · Normal flow আর display · পর্ব ২৪ · position আর z-index · পর্ব ২৫ · Flexbox · পর্ব ২৬ · Flexbox-এর নকশা · পর্ব ২৭ · CSS Grid · পর্ব ২৮ · Grid গভীরে · পর্ব ২৯ · লেআউট প্যাটার্ন

৬ · মডিউল ৫ — রেসপন্সিভ ও আধুনিক CSS (৪০টি প্রশ্ন)

এই মডিউলের প্রশ্নে দুই ধরনের ফাঁদ। এক, পুরোনো ধারণা — “CSS-এ parent selector নেই”, “variable লাগলে Sass”, “nesting-এর জন্য build টুল লাগে” — যা আজ আর সত্য নয়। দুই, উল্টো দিকের ভুল — একেবারে নতুন ফিচারকে সব ব্রাউজারে নিশ্চিত ধরে নেওয়া। তাই এখানে প্রতিটি নতুন ফিচারের পাশে তার Baseline অবস্থা লেখা। মূল বিষয়: mobile-first, media query আর container query, srcset আর sizes, custom property, :has(), clamp(), logical property, color-scheme.

রেসপন্সিভ ডিজাইন আর query (পর্ব ৩০–৩১)

(সহজ) রেসপন্সিভ ওয়েব ডিজাইনের মূল তিন উপাদান কোনগুলো (Ethan Marcotte, ২০১০)?

fluid grid, flexible image আর media query
আলাদা মোবাইল সাইট, আলাদা ডেস্কটপ সাইট আর redirect
Flexbox, Grid আর JavaScript
স্থির 960px লেআউট, zoom আর স্ক্রল

(মাঝারি) mobile-first CSS লেখার রীতি কোনটি?

শুধু মোবাইলের জন্য সাইট বানানো, ডেস্কটপ বাদ
শর্ত ছাড়া বড় পর্দার CSS, তারপর max-width দিয়ে ছোট পর্দায় বাতিল
শর্ত ছাড়া ছোট পর্দার CSS, তারপর min-width (বা width >=) query দিয়ে বড় পর্দার নিয়ম যোগ
মোবাইলের জন্য আলাদা CSS ফাইল, JavaScript দিয়ে বাছাই

(সহজ) ছবি যেন কখনো তার পাত্রের চেয়ে চওড়া না হয়, আর অনুপাতও ঠিক থাকে — কোন CSS?

img { height: 100%; }
img { overflow: hidden; }
img { width: 100vw; }
img { max-width: 100%; height: auto; }

(মাঝারি) breakpoint কীভাবে বাছাই করা ভালো?

প্রতি ১০০px-এ একটি করে
পাতাটি সরু থেকে চওড়া করে দেখুন, যেখানে content ভাঙে বা অস্বস্তিকর হয় — সেখানে
জনপ্রিয় তিনটি ফোনের ঠিক মাপ ধরে
breakpoint কখনো লাগে না, Flexbox সব সামলায়

(কঠিন) WCAG 2.2-এর AA স্তরে স্পর্শ বা ক্লিকের লক্ষ্য (target) কমপক্ষে কত মাপের হওয়ার কথা — কিছু ব্যতিক্রম (যেমন যথেষ্ট ফাঁক) ছাড়া?

কোনো মাপ নির্দিষ্ট নেই
44 × 44 CSS px
10 × 10 CSS px
24 × 24 CSS px

(মাঝারি) media query আর container query-র মূল পার্থক্য কোনটি?

container query শুধু JavaScript দিয়ে চলে
media query viewport আর ডিভাইস বা ব্যবহারকারীর পছন্দ দেখে; container query একটি পূর্বপুরুষ পাত্রের মাপ দেখে
container query viewport দেখে, media query পাত্র
দুটি একই, container query নতুন নাম

(সহজ) viewport 500px চওড়া হলে নিচের CSS-এ .nav-এর flex-direction কী?

.nav { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .nav { flex-direction: row; }
}

column
row
কোনোটিই না, flex-direction ডিফল্টে ফেরে
row, কারণ media query-র নিয়ম সবসময় জেতে

(কঠিন) viewport 1000px চওড়া। নিচের CSS-এ অনুচ্ছেদের রং কী?

@media (min-width: 600px) {
  p { color: red; }
}
p { color: blue; }

কালো — বিরোধে দুটিই বাতিল
বেগুনি — দুটি মিশে যায়
নীল
লাল — শর্ত মিলেছে, তাই query-র নিয়ম অগ্রাধিকার পায়

(মাঝারি) @container (width > 400px) { ... } কাজ করছে না। প্রথমে কী যাচাই করবেন?

ব্রাউজার JavaScript চালু রেখেছে কি না
viewport meta আছে কি না
কোনো পূর্বপুরুষে container-type: inline-size (বা size) দেওয়া আছে কি না, আর নাম দিলে নামের বানান মিলছে কি না
display: grid আছে কি না

(মাঝারি) @media (width >= 600px) লেখার রূপটি সম্পর্কে কোনটি সঠিক?

এটি media query-র range syntax, (min-width: 600px)-এর সমান — এখন Baseline Widely available
এটি (max-width: 600px)-এর সমান
এটি অবৈধ, শুধু Sass-এ চলে
এটি শুধু container query-তে চলে

(সহজ) ব্যবহারকারী অপারেটিং সিস্টেমে “কম অ্যানিমেশন” চালু করেছেন কি না, CSS-এ কীভাবে জানা যায়?

@media (prefers-color-scheme: reduce)
@media (prefers-reduced-motion: reduce)
@media (motion: none)
@supports (animation: none)

রেসপন্সিভ ছবি (পর্ব ৩২)

(মাঝারি) srcset আর <picture>-এর পার্থক্য কোনটি?

দুটি একই কাজ করে
srcset বাধ্যতামূলক আদেশ, picture পরামর্শ
picture শুধু ভিডিওর জন্য
srcset একই ছবির কয়েকটি মাপ দেয়, কোনটি নামাবে ব্রাউজার ঠিক করে (পরামর্শ); <picture>-এর source-এর media/type আলাদা ছবি বা ফরম্যাট বাধ্যতামূলকভাবে বেছে দেয় (আদেশ)

(কঠিন) srcset-এ w descriptor (যেমন photo-800.jpg 800w) ব্যবহার করলে sizes কেন লাগে?

sizes না দিলে srcset পুরো উপেক্ষিত হয়
sizes ছবিকে lazy load করে
ছবি নামানো শুরু হয় লেআউটের আগে (preload scanner), তখন ব্রাউজার জানে না ছবিটি কত চওড়া দেখাবে — sizes সেটি আগেভাগে বলে
sizes ছবির পর্দায় দেখানো মাপ ঠিক করে

(মাঝারি) <picture>-এর ভেতরে কোনটি থাকা বাধ্যতামূলক?

একটি <img> (সবার শেষে)
<track>
<figcaption>
অন্তত তিনটি <source>

(সহজ) বর্গাকার ঘরে আয়তাকার ছবি — ঘর পুরো ভরাবে, অনুপাত ঠিক রেখে, দরকারে কিনারা কাটবে — কোন CSS?

object-fit: fill
object-fit: cover
object-fit: contain
background-size: cover (img-এ)

(মাঝারি) পাতার সবচেয়ে বড় দৃশ্যমান ছবি (LCP ছবি) নিয়ে কোনটি ভালো অভ্যাস?

ছবির মাপ না দেওয়া, ব্রাউজার নিজে বুঝে নেবে
loading="lazy" দেওয়া, যাতে বাকি পাতা আগে আসে
CSS background-image-এ রাখা, যাতে HTML হালকা থাকে
<img>-এ রাখা, fetchpriority="high" দেওয়া, width/height দেওয়া — আর loading="lazy" না দেওয়া

CSS variable আর pseudo-class/element (পর্ব ৩৩–৩৪)

(সহজ) CSS custom property কীভাবে ঘোষণা আর ব্যবহার করা হয়?

@brand: teal; আর color: @brand;
$brand: teal; আর color: $brand;
--brand: teal; দিয়ে ঘোষণা, color: var(--brand); দিয়ে ব্যবহার
var brand = teal;

(মাঝারি) Sass variable আর CSS custom property-র মূল পার্থক্য কোনটি?

Sass variable JavaScript দিয়ে চলার সময় বদলানো যায়
Sass-এরটি compile-এর সময় মুছে গিয়ে স্থির মান হয়; CSS-এরটি ব্রাউজারে থাকে, cascade আর উত্তরাধিকার মানে, পাতা চলার সময় বদলানো যায়
CSS custom property শুধু Chrome-এ চলে
দুটি একই, শুধু লেখার চিহ্ন আলাদা

(মাঝারি) নিচের কোডে দুটি শিরোনামের রং কী?

.card  { --accent: red; }
.title { color: var(--accent, green); }

<div class="card"><h2 class="title">ভেতরে</h2></div>
<h2 class="title">বাইরে</h2>

দুটিই লাল
দুটিই কালো, কারণ variable শুধু :root-এ ঘোষণা করা যায়
দুটিই সবুজ
“ভেতরে” লাল, “বাইরে” সবুজ

(কঠিন) নিচের কোডে অনুচ্ছেদের রং কী হবে?

:root { --c: 20px; }
p {
  color: blue;
  color: var(--c);
}

কালো (parent থেকে উত্তরাধিকারে আসা ডিফল্ট রং)
লাল — ব্রাউজারের ত্রুটির রং
নীল — ভুল মানটি বাদ পড়ে, আগের declaration থাকে
রং 20px-এর মতো কিছু দেখায়, ব্রাউজার রূপান্তর করে

(সহজ) pseudo-class আর pseudo-element-এর পার্থক্য কোনটি?

pseudo-element অবস্থা দেখে, pseudo-class অংশ ধরে
দুটিই JavaScript-এর ফিচার
pseudo-class অবস্থা বা অবস্থান দেখে পুরো element বাছে (:hover); pseudo-element element-এর একটি অংশ বা নতুন বাক্স ধরে (::before) — এক বনাম দুই কোলন
pseudo-class-এ দুই কোলন লাগে

(মাঝারি) :focus আর :focus-visible-এর পার্থক্য কোনটি?

:focus-visible শুধু মাউস-ক্লিকে কাজ করে
:focus যেকোনো উপায়ে focus পেলেই; :focus-visible শুধু যখন ব্রাউজার মনে করে দাগ দেখানো দরকার — যেমন কি-বোর্ডে Tab করলে
দুটি একই
:focus-visible focus-এর দাগ চিরতরে লুকায়

(মাঝারি) li:nth-child(-n+3) কোন element-গুলো ধরে?

প্রতি তৃতীয় li
তৃতীয়টি বাদে সব
শেষ তিনটি li
প্রথম তিনটি li

(কঠিন) নিচের কোডে p:nth-child(2) কোন লেখাটিকে লাল করবে?

p:nth-child(2) { color: red; }

<div>
  <h2>শিরোনাম</h2>
  <p>এক</p>
  <p>দুই</p>
</div>

“এক”
“দুই”
কোনোটিই না, কারণ দ্বিতীয় সন্তান h2
দুটিই

(মাঝারি) .price::before { content: "৳"; } দিয়েছেন, কিন্তু <img class="price">-এ কিছু দেখাচ্ছে না। কারণ কী?

content-এ বাংলা অক্ষর চলে না
::before-এ সবসময় display: block লাগে
::before শুধু id selector-এর সাথে চলে
<img> একটি replaced element — এর ভেতরে ::before/::after বাক্স তৈরি হয় না

(মাঝারি) যে .card-এর ভেতরে একটি ছবি আছে, শুধু সেই card-এ বাড়তি padding দিতে চান। কোন selector?

img < .card
.card:contains(img)
.card:has(img)
.card > img

আধুনিক CSS, থিম আর একেবারে নতুন ফিচার (পর্ব ৩৫–৩৭)

(সহজ) clamp(1rem, 4vw, 2rem) কী করে?

মান হিসেবে 4vw নেয়, কিন্তু 1rem-এর নিচে বা 2rem-এর ওপরে যেতে দেয় না
তিনটির গড় নেয়
প্রথম মানটি নেয়, বাকিগুলো fallback
সবসময় সবচেয়ে বড়টি (2rem) নেয়

(মাঝারি) viewport 1000px চওড়া হলে font-size: clamp(16px, 5vw, 32px) কত px হবে?

24px
32px
16px
50px

(মাঝারি) native CSS nesting-এ .btn { &:hover { … } } আর .btn { & :hover { … } }-এর পার্থক্য কী?

দুটি একই
native CSS-এ nesting নেই, শুধু Sass-এ
প্রথমটি অবৈধ, nesting-এ & লেখা যায় না
প্রথমটি .btn নিজে hover অবস্থায় (.btn:hover); দ্বিতীয়টি .btn-এর ভেতরের hover করা যেকোনো element (.btn :hover)

(মাঝারি) margin-inline-start কেন অনেক ক্ষেত্রে margin-left-এর চেয়ে ভালো?

এটি margin-left-এর চেয়ে দ্রুত render হয়
margin-left বাতিল হয়ে গেছে
এটি লেখার দিক মানে — বাংলা-ইংরেজির মতো বাঁ থেকে ডানে লেখায় বাঁ দিক, আরবি-উর্দুর মতো ডান থেকে বাঁয়ে লেখায় ডান দিক
এটি শুধু খাড়া লেখায় কাজ করে

(কঠিন) cascade layer-এ !important declaration-এর ক্রম কেমন?

important-এও পরের layer জেতে, ঠিক normal-এর মতো
উল্টে যায় — important হলে আগে ঘোষিত layer সবচেয়ে শক্ত, আর layer-এর বাইরের (unlayered) important সবচেয়ে দুর্বল
layer-এর ভেতরে !important লেখা যায় না
important হলে layer উপেক্ষিত হয়, শুধু specificity দেখা হয়

(মাঝারি) শিরোনামের font-size শুধু vw এককে (যেমন font-size: 5vw) দিলে মূল সমস্যা কী?

ব্যবহারকারী zoom করলে বা ব্রাউজারে বড় লেখা বাছলে লেখা প্রয়োজনমতো বড় হয় না — WCAG-এর Resize Text শর্ত ভাঙে
লেখা কখনো বদলায় না
vw এককটি সব ব্রাউজারে চলে না
vw শুধু ছবির জন্য

(মাঝারি) color-scheme আর prefers-color-scheme-এর পার্থক্য কোনটি?

দুটি একই কাজ করে
color-scheme শুধু ছবির রং বদলায়
prefers-color-scheme একটি CSS property
color-scheme ব্রাউজারকে জানায় পাতাটি কোন থিম পারে (ডিফল্ট রং, ফর্ম, scrollbar বদলায়); prefers-color-scheme হলো ব্যবহারকারী কী চান তা জিজ্ঞেস করার media query

(কঠিন) color: light-dark(#111, #eee); দিয়েছেন, কিন্তু dark mode-এও সবসময় প্রথম রং (#111) আসছে। প্রথমে কী যাচাই করবেন?

পাতায় (যেমন :root-এ) color-scheme: light dark দেওয়া আছে কি না
@media print আছে কি না
light-dark() শুধু background-এ কাজ করে
রং দুটি hex-এ নয়, rgb-তে লিখতে হয় কি না

(মাঝারি) ব্যবহারকারীর বাছা থিম localStorage-এ রাখা, তবু পাতা খুললেই এক ঝলক সাদা দেখা যায়, তারপর ডার্ক হয়। সাধারণ সমাধান কোনটি?

থিমের script-কে defer দিয়ে body-র শেষে রাখা
ছবিগুলো lazy load করা
<head>-এ CSS-এর আগে ছোট একটি inline script, যা প্রথম আঁকার আগেই <html>-এ থিমের attribute বসায়
সব রং !important করা

(কঠিন) সাধারণ CSS variable দিয়ে gradient-এর কোণ (--angle) animate করলে লাফ দেয়, মসৃণ হয় না। কোনটি দিলে মসৃণ হয়?

will-change: --angle দেওয়া
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
transition: all দেওয়া
variable-এর নামে --angle-smooth লেখা

(মাঝারি) Baseline-এর “Newly available” আর “Widely available”-এর পার্থক্য কোনটি?

Newly — পরীক্ষামূলক flag-এর পেছনে; Widely — সবার জন্য চালু
দুটি একই, শুধু তারিখ আলাদা লেখা
Newly — ফিচারটি সব প্রধান ব্রাউজারের (Chrome, Edge, Firefox, Safari) সর্বশেষ সংস্করণে এসেছে; Widely — তার প্রায় ৩০ মাস পরে, যখন বেশিরভাগ ব্যবহারকারীর কাছে পৌঁছেছে
Newly — শুধু Chrome-এ; Widely — Chrome আর Firefox-এ

(মাঝারি) tooltip বা dropdown-কে একটি বোতামের ঠিক পাশে CSS দিয়েই বেঁধে রাখার নতুন ফিচার কোনটি (anchor-name, position-anchor, position-area)?

z-index
CSS Grid-এর named line
position: sticky
CSS anchor positioning

(মাঝারি) একই পাতায় দুটি অবস্থার মধ্যে (যেমন তালিকা থেকে বিস্তারিত দেখা) মসৃণ রূপান্তর, document.startViewTransition() দিয়ে — এটি কোন ফিচার?

@starting-style
View Transitions
scroll-snap
transition-behavior: allow-discrete

(কঠিন) একটি component-এর স্টাইল শুধু তার নিজের ভেতরে সীমিত রাখতে, আর ভেতরের আরেকটি অংশে না ঢুকতে দিতে (“donut scope”) কোন at-rule?

@scope (.card) to (.card-content) { … }
@supports
@layer
@container

মডিউল ৫-এর প্রচলিত ফাঁদ:

@media-কে specificity বাড়ানোর উপায় ভাবা — শুধু শর্ত যোগ করে; ক্রম আর specificity আগের মতোই।
container query-তে container-type ভুলে যাওয়া।
sizes ছাড়া w descriptor — ব্রাউজার 100vw ধরে বড় ফাইল নামায়।
var()-এর ভুল মানে আগের declaration-এ ফেরার আশা — IACVT-তে property unset হয়।
nth-child-কে “একই ট্যাগের মধ্যে” গোনা ভাবা — সেটি nth-of-type.
“CSS-এ parent selector নেই”, “nesting-এ Sass লাগে” — পুরোনো তথ্য; :has() আর nesting এখন Widely available.
উল্টো ভুল: anchor positioning বা পাতা-বদলের View Transition-কে সব ব্রাউজারে নিশ্চিত ধরা।

revise পর্ব: পর্ব ৩০ · রেসপন্সিভ ডিজাইন · পর্ব ৩১ · Media আর container query · পর্ব ৩২ · রেসপন্সিভ ছবি · পর্ব ৩৩ · CSS variable · পর্ব ৩৪ · Pseudo-class আর pseudo-element · পর্ব ৩৫ · আধুনিক CSS · পর্ব ৩৬ · Dark mode আর থিম · পর্ব ৩৭ · একেবারে নতুন CSS

৭ · মডিউল ৬ — মোশন, ইফেক্ট ও পলিশ (৪০টি প্রশ্ন)

এই মডিউলের প্রশ্নে syntax-এর খুঁটিনাটি (কোন সময়টি delay), পারফরম্যান্স (কোন property animate করা সস্তা) আর অ্যাক্সেসিবিলিটি (reduced motion, focus, contrast) — তিনটিই সমান গুরুত্বের। মূল বিষয়: transition বনাম animation, fill-mode, transform-origin আর transform-এর ক্রম, backdrop-filter, clip-path, scroll-snap, appearance, viewBox, currentColor আর focus indicator.

Transition আর keyframe animation (পর্ব ৩৮–৩৯)

(সহজ) transition: opacity 1s 2s; — দুটি সময়ের মানে কী?

দুটিই duration, মোট ৩ সেকেন্ড
১ থেকে ২ সেকেন্ডের মধ্যে এলোমেলো সময়
প্রথমটি delay, দ্বিতীয়টি duration
প্রথমটি duration (১ সেকেন্ড ধরে চলবে), দ্বিতীয়টি delay (২ সেকেন্ড পরে শুরু)

(সহজ) transition আর animation-এর মূল পার্থক্য কোনটি?

দুটি একই, animation পুরোনো নাম
transition চলে কোনো মান বদলালে (যেমন hover), দুই অবস্থার মাঝে একবার; animation @keyframes ধরে নিজে থেকে চলে, বহু ধাপে, বারবারও
animation-এর জন্য JavaScript লাগে
transition বহু ধাপে চলে, animation দুই অবস্থায়

(মাঝারি) মসৃণ অ্যানিমেশনের জন্য left বদলানোর চেয়ে transform: translate() কেন ভালো?

transform-এ কম কোড লাগে, তাই দ্রুত
left শুধু absolute element-এ animate হয়
left প্রতি ফ্রেমে layout আর paint জাগায়; transform সাধারণত শুধু compositing-এ চলে, প্রায়ই আলাদা thread-এ
transform GPU ছাড়া চলে না

(কঠিন) display: none থেকে একটি element fade-in করতে আধুনিক CSS-এ কী লাগে?

display-কে transition-এর তালিকায় রাখা transition-behavior: allow-discrete-সহ, আর @starting-style-এ শুরুর opacity: 0
শুধু transition: opacity 0.3s
এটি CSS-এ কখনো সম্ভব নয়, JavaScript লাগে
display: fade

(কঠিন) নিচের কোডে বোতাম থেকে মাউস সরিয়ে নিলে কী হয়?

.btn { background: blue; }
.btn:hover {
  background: red;
  transition: background 1s;
}

বোতাম অদৃশ্য হয়ে যায়
রং সাথে সাথে নীলে ফেরে — ফেরার সময় কোনো transition নেই
১ সেকেন্ড ধরে মসৃণভাবে নীলে ফেরে
লাল থেকে যায়

(সহজ) animation: move 1s 2s;-এ কোনটি delay?

কোনোটিই না, delay আলাদা property ছাড়া দেওয়া যায় না
move
1s
2s

(মাঝারি) animation শেষ হওয়ার পর element আবার শুরুর চেহারায় ফিরে যায়। শেষ ফ্রেমের চেহারা রাখতে কী দেবেন?

animation-iteration-count: 1
animation-play-state: paused
animation-fill-mode: forwards (বা both)
animation-direction: reverse

(সহজ) একটি loading spinner অনির্দিষ্টকাল ঘুরতে থাকবে — কোন মান?

animation-iteration-count: infinite
animation-iteration-count: 0
animation-loop: true
animation-duration: infinite

(মাঝারি) কোন দুটি property animate করা সাধারণত সবচেয়ে দক্ষ?

margin আর padding
transform আর opacity
box-shadow আর border-radius
width আর height

(মাঝারি) অ্যানিমেশনে অ্যাক্সেসিবিলিটির জন্য কোনটি সঠিক?

অ্যানিমেশন শুধু চেহারার বিষয়, অ্যাক্সেসিবিলিটির সাথে সম্পর্ক নেই
অ্যানিমেশন যত দ্রুত, তত অ্যাক্সেসিবল
prefers-reduced-motion মানা, ৫ সেকেন্ডের বেশি নিজে চলা মোশনে থামানোর উপায় রাখা, আর সেকেন্ডে ৩ বারের বেশি ঝলকানি না রাখা
reduced motion চালু থাকলে পুরো পাতা লুকিয়ে ফেলা

Transform আর ভিজ্যুয়াল ইফেক্ট (পর্ব ৪০–৪১)

(মাঝারি) transform: translateX(20px) আর position: relative; left: 20px-এর পার্থক্য কোনটি?

left-এ % মানে নিজের মাপ
দুটির কোনো পার্থক্য নেই
translate element-কে flow থেকে বের করে দেয়
দুটিই আসল জায়গা রেখে চেহারা সরায়, কিন্তু translate layout ধাপে হিসাব হয় না, % মাপে নিজের মাপ থেকে, আর অ্যানিমেশনে অনেক সস্তা

(কঠিন) transform: rotate(45deg) translateX(100px) আর transform: translateX(100px) rotate(45deg) কি একই ফল দেয়?

না — প্রতিটি ফাংশন আগের ফাংশনে বদলে যাওয়া অক্ষে কাজ করে, তাই ক্রম বদলালে অবস্থান বদলায়
হ্যাঁ, তবে শুধু Chrome-এ
দ্বিতীয়টি অবৈধ, rotate আগে লিখতে হয়
হ্যাঁ, ক্রমের কোনো প্রভাব নেই

(সহজ) transform-origin-এর ডিফল্ট মান কী, অর্থাৎ rotate বা scale কোন বিন্দু ঘিরে হয়?

বাঁ-ওপরের কোণ (0 0)
element-এর মাঝখান (50% 50%)
পাতার মাঝখান
নিচের-ডান কোণ

(মাঝারি) hover-এ একটি কার্ডে transform: scale(1.2) দিলে পাশের কার্ডগুলো কি সরে যায়?

হ্যাঁ, পাশের কার্ডগুলো ২০% সরে জায়গা করে দেয়
হ্যাঁ, পুরো grid নতুন করে সাজানো হয়
না — transform শুধু আঁকা বদলায়, layout বদলায় না; কার্ডটি বড় দেখায় আর দরকারে পাশেরগুলোর ওপর ভেসে থাকে
কার্ডটি অদৃশ্য হয়ে যায়

(কঠিন) কার্ড ফ্লিপ (সামনে-পেছনে উল্টানো) ইফেক্টে কোন তিনটি property সাধারণত লাগে?

z-index, opacity, visibility
display: 3d
rotate, scale, skew শুধু
parent-এ perspective, ঘোরানো মোড়কে transform-style: preserve-3d, দুই মুখে backface-visibility: hidden

(কঠিন) transform দেওয়া একটি parent-এর ভেতরে position: fixed element স্ক্রলের সাথে সরে যাচ্ছে। কেন?

transform-ওয়ালা element তার fixed বংশধরের containing block হয়ে যায় — তাই সে viewport নয়, parent-এর সাপেক্ষে বসে
transform দিলে fixed নিজে থেকে sticky হয়ে যায়
এটি একটি ব্রাউজার-বাগ
fixed শুধু body-তে কাজ করে

(মাঝারি) filter আর backdrop-filter-এর পার্থক্য কোনটি?

backdrop-filter নিজের লেখা ঝাপসা করে
দুটি একই, backdrop পুরোনো নাম
filter element-এর নিজের আঁকায় (লেখা, ছবিসহ) কাজ করে; backdrop-filter element-এর পেছনে যা দেখা যায় তার ওপর কাজ করে
backdrop-filter শুধু ছবিতে চলে

(মাঝারি) clip-path আর mask-এর পার্থক্য কোনটি?

clip-path ধারালো রেখায় দেখা যাবে-যাবে না হিসেবে কাটে; mask স্বচ্ছতার মাত্রা দিয়ে আংশিক দেখায়, তাই নরম কিনারা সম্ভব
দুটিই element-এর জায়গা কমায়
clip-path শুধু SVG-তে চলে
mask শুধু ধারালো কাটে, clip-path নরম

(কঠিন) filter: grayscale(1) sepia(1) আর filter: sepia(1) grayscale(1) কি একই দেখায়?

হ্যাঁ, ক্রমের প্রভাব নেই
না — ফাংশন বাঁ থেকে ডানে একটির ফল পরেরটিতে যায়: প্রথমটি শেষে বাদামি (sepia), দ্বিতীয়টি শেষে ধূসর
দ্বিতীয়টি অবৈধ
দুটিই সাদা-কালো

স্ক্রল ইফেক্ট আর ফর্ম স্টাইলিং (পর্ব ৪২–৪৩)

(মাঝারি) sticky header-এর নিচে #contact লিংকে লাফ দেওয়া শিরোনাম ঢাকা পড়ে যাচ্ছে। সমাধান কোনটি?

header-এ z-index: -1
scroll-behavior: smooth
লক্ষ্যে padding-top: 100vh
scroll container-এ (সাধারণত html) scroll-padding-top: <header-এর উচ্চতা>, অথবা লক্ষ্যে scroll-margin-top

(মাঝারি) scroll-snap-type-এর mandatory আর proximity-র পার্থক্য কোনটি?

mandatory স্ক্রল থামলে সবসময় কোনো খাঁজে বসায়; proximity শুধু খাঁজের কাছাকাছি থামলে টেনে নেয়
দুটি একই
mandatory স্ক্রল একদম বন্ধ করে
proximity সবসময় খাঁজে বসায়

(মাঝারি) একটি অনুভূমিক carousel-এ snap চাইলে কোন property কোথায় দেবেন?

প্রতিটি slide-এ position: sticky
প্রতিটি slide-এ scroll-snap-type, container-এ scroll-snap-align
scroll container-এ scroll-snap-type: x mandatory, প্রতিটি slide-এ scroll-snap-align: start
শুধু container-এ scroll-behavior: snap

(সহজ) একটি modal-এর ভেতরের স্ক্রল শেষে পৌঁছালে পেছনের পুরো পাতা স্ক্রল হতে থাকে (scroll chaining). কী দিলে থামে?

scroll-snap-type: none
ভেতরের scroller-এ overscroll-behavior: contain
pointer-events: none
overflow: visible

(কঠিন) animation-timeline: scroll() দিয়ে স্ক্রলের সাথে চলা progress bar — এর ব্রাউজার সাপোর্ট নিয়ে কোনটি সঠিক?

Baseline Widely available — নিশ্চিন্তে, fallback ছাড়া
শুধু Firefox-এ চলে
শুধু JavaScript-এর scroll event দিয়েই সম্ভব, CSS-এ নেই
এখনো Baseline নয় — Chromium-ভিত্তিক ব্রাউজার আর Safari-র নতুন সংস্করণে আছে, Firefox-এ পরীক্ষামূলক; তাই @supports (animation-timeline: scroll()) দিয়ে বাড়তি সুবিধা হিসেবে

(মাঝারি) appearance: none কী করে?

ফর্ম কন্ট্রোলের ব্রাউজার-নিজস্ব চেহারা মুছে দেয়, কিন্তু element-এর আচরণ, কি-বোর্ড আর অ্যাক্সেসিবিলিটি অক্ষত রাখে
কন্ট্রোলটি পুরো লুকিয়ে দেয়
কন্ট্রোলকে নিষ্ক্রিয় (disabled) করে
শুধু Safari-তে কাজ করে

(মাঝারি) input, button আর select পাতার font-family কেন পায় না, আর সমাধান কী?

ফর্ম কন্ট্রোলে ওয়েব ফন্ট চলে না
font-family-তে !important না দিলে
ব্রাউজারের নিজের CSS ফর্ম কন্ট্রোলকে আলাদা ফন্ট দেয়; font: inherit দিলে পাতার ফন্ট পায়
বাংলা ফন্ট input-এ সমর্থিত নয়

(মাঝারি) :invalid-এর বদলে :user-invalid কেন বেশি ব্যবহারবান্ধব?

দুটি হুবহু এক
:invalid নতুন, :user-invalid বাতিল
:user-invalid সার্ভারের যাচাইয়ের ফল দেখায়
:invalid পাতা খোলামাত্রই ফাঁকা required ঘর লাল করে; :user-invalid শুধু ব্যবহারকারী ঘরটি বদলানোর পর বা জমা দিতে চাইলে

(সহজ) checkbox, radio আর range-এর রং এক লাইনে ব্র্যান্ডের রঙে আনতে কোন property?

color
accent-color
background-color
fill

(মাঝারি) ফর্মের ভুল ঘর বোঝাতে শুধু লাল বর্ডার দেওয়া কেন যথেষ্ট নয়?

লাল রং সব ব্রাউজারে দেখায় না
বর্ডার দিলে ফর্ম জমা হয় না
শুধু রঙে তথ্য দিলে রঙ-অন্ধ বা screen reader ব্যবহারকারী বোঝেন না (WCAG 1.4.1) — লেখায় বার্তা, aria-invalid="true" আর aria-describedby দিয়ে বার্তাটি যুক্ত করুন
লাল বর্ডার ফোনে কাজ করে না

(কঠিন) লেখার সাথে textarea নিজে থেকে লম্বা হবে — field-sizing: content সম্পর্কে কোনটি সঠিক?

এখনো Baseline নয় (মূলত Chromium-ভিত্তিক ব্রাউজারে) — তাই বাড়তি সুবিধা হিসেবে দিন; না চেনা ব্রাউজারে স্বাভাবিক মাপের ঘর আসে
Baseline Widely available, সব ব্রাউজারে বহু বছর
এটি textarea-কে ছোট করে দেয়
এটি শুধু JavaScript দিয়ে চালু করা যায়

SVG আর অ্যাক্সেসিবল CSS (পর্ব ৪৪–৪৫)

(সহজ) raster আর vector ছবির পার্থক্য কোনটি, আর SVG কোনটি?

raster আর vector-এর পার্থক্য শুধু ফাইলের নামে
SVG একটি raster ফরম্যাট
vector ছবি বড় করলে ঝাপসা হয়
raster হলো pixel-এর গ্রিড, বড় করলে ঝাপসা; vector হলো আঁকার নির্দেশ, যেকোনো মাপে ধারালো — SVG একটি XML-ভিত্তিক vector ফরম্যাট

(মাঝারি) <svg viewBox="0 0 24 24">-এর চারটি সংখ্যার অর্থ কী?

লাল, সবুজ, নীল আর স্বচ্ছতা
min-x, min-y, width, height — আঁকার খাতার কোন অংশ দেখানো হবে
x, y, z আর ঘোরার কোণ
ওপর, ডান, নিচ, বাঁ — margin-এর মতো

(সহজ) inline SVG আইকন যেন চারপাশের লেখার রং নেয় — কোন মান?

fill="currentColor" (বা stroke-এ)
color: svg
fill="auto"
fill="inherit-text"

(মাঝারি) শুধু আইকনের একটি বোতাম (যেমন ✕ বন্ধ করুন) কীভাবে অ্যাক্সেসিবল করবেন?

বোতামে role="icon"
svg-তে title="x" দিলেই যথেষ্ট
বোতামে aria-label="বন্ধ করুন" (বা visually-hidden লেখা), আর ভেতরের svg-তে aria-hidden="true"
কিছু লাগে না, screen reader আইকন দেখে বোঝে

(মাঝারি) icon font-এর চেয়ে SVG আইকন কেন ভালো ধরা হয়?

icon font সব ব্রাউজারে বন্ধ হয়ে গেছে
SVG-তে রং বদলানো যায় না
SVG সবসময় ছোট ফাইল
screen reader-এর ভুল পড়া নেই, ফন্ট না এলে ভাঙে না, আঁকা ধারালো, বহু রং আর অ্যানিমেশন সম্ভব, শুধু দরকারি আইকন পাঠানো যায়

(মাঝারি) WCAG অনুযায়ী বোতামের সীমানা, ঘরের বর্ডার বা focus-এর দাগের মতো লেখা-নয় এমন UI অংশের contrast কমপক্ষে কত?

৭:১
৩:১
৪.৫:১
কোনো নিয়ম নেই, শুধু লেখার জন্য আছে

(সহজ) *:focus { outline: none; } লিখে কিছুই বিকল্প না দিলে কী সমস্যা?

পাতা ধীর হয়ে যায়
কোনো সমস্যা নেই, outline শুধু সাজ
মাউস দিয়ে আর ক্লিক করা যায় না
কি-বোর্ড ব্যবহারকারী আর বুঝতে পারেন না focus কোথায় — WCAG 2.4.7 (Focus Visible) ভাঙে

(কঠিন) focus-এর দাগ শুধু box-shadow দিয়ে বানালে কোন পরিস্থিতিতে সমস্যা হয়?

dark mode-এ box-shadow কাজ করে না
Windows-এর high contrast-এর মতো forced colors মোডে — সেখানে box-shadow মুছে যায়, outline থাকে
box-shadow-এর জন্য JavaScript লাগে
ফোনে box-shadow দেখায় না

(মাঝারি) লেখার মাপ px-এর চেয়ে rem-এ দেওয়া কেন অ্যাক্সেসিবিলিটির জন্য ভালো?

rem-এ লেখা সবসময় বড় দেখায়
rem শুধু বাংলা ফন্টে কাজ করে
rem ব্যবহারকারীর বাছা ডিফল্ট font size মানে; px সেই পছন্দ উপেক্ষা করে
px zoom-এ বড় হয় না

(মাঝারি) শুধু screen reader-এর জন্য একটি লেখা রাখতে চান, যা পর্দায় দেখা যাবে না। কোনটি সঠিক?

“visually-hidden” কৌশল — clip দিয়ে ১px বাক্সে লুকানো, position: absolute
visibility: hidden
aria-hidden="true"
display: none

মডিউল ৬-এর প্রচলিত ফাঁদ:

shorthand-এর দুই সময় উল্টে পড়া — প্রথমটি duration, দ্বিতীয়টি delay.
transition শুধু :hover-এ লেখা — ফেরার পথে কোনো transition থাকে না।
animation শেষে ফিরে যাওয়াকে বাগ ভাবা — ডিফল্ট fill-mode none.
transform বা filter-এর ক্রমকে গুরুত্বহীন ভাবা।
transform-ওয়ালা পূর্বপুরুষের ভেতরে fixed রাখা।
outline মুছে দেওয়া, বা শুধু box-shadow-এ focus আঁকা।
scroll-driven animation বা field-sizing-কে সব ব্রাউজারে নিশ্চিত ধরা — দুটিই এখনো Baseline নয়।

revise পর্ব: পর্ব ৩৮ · Transition · পর্ব ৩৯ · Keyframe animation · পর্ব ৪০ · Transform আর 3D · পর্ব ৪১ · ভিজ্যুয়াল ইফেক্ট · পর্ব ৪২ · স্ক্রল ইফেক্ট · পর্ব ৪৩ · ফর্ম স্টাইলিং · পর্ব ৪৪ · SVG আর আইকন · পর্ব ৪৫ · অ্যাক্সেসিবল CSS

৮ · মডিউল ৭ — পেশাদার কাজের ধারা (৪৬টি প্রশ্ন)

চাকরির ইন্টারভিউ আর অনলাইন অ্যাসেসমেন্টে এই মডিউলের প্রশ্ন দিয়েই বোঝা যায়, কে শুধু CSS লিখতে জানেন আর কে দলের সাথে বড় প্রজেক্টে কাজ করতে পারেন। মূল বিষয়: BEM আর utility-first, DevTools-এর প্যানেল, progressive enhancement আর feature detection, Core Web Vitals, render-blocking CSS, Sass আর Autoprefixer, Bootstrap আর Tailwind, DOM আর Web Components, আর Git দিয়ে সাইট প্রকাশ।

CSS architecture আর DevTools (পর্ব ৪৬–৪৭)

(সহজ) BEM নামকরণে নিচের কোনটি একটি “element”?

.card .title
.card--sale
.card
.card__title

(মাঝারি) BEM-এ .card .title-এর মতো nested selector না লিখে .card__title লেখার মূল কারণ কী?

__ লিখলে CSS দ্রুত লোড হয়
সব selector-এর specificity সমান (0,1,0) রাখা, আর HTML-এর গঠন বদলালেও স্টাইল যেন না ভাঙে
BEM শুধু Sass-এ কাজ করে
nested selector ব্রাউজার বোঝে না

(কঠিন) ITCSS-এর স্তরগুলোর সঠিক ক্রম (ওপর থেকে নিচে) কোনটি?

Settings → Tools → Generic → Elements → Objects → Components → Utilities
Utilities → Settings → Components → Elements → Tools → Generic → Objects
Components → Objects → Elements → Generic → Settings → Tools → Utilities
Elements → Settings → Tools → Utilities → Generic → Objects → Components

(মাঝারি) utility-first CSS-এর (যেমন Tailwind) একটি সুবিধা আর একটি অসুবিধা কোনটি?

সুবিধা: HTML ছোট হয়; অসুবিধা: CSS অনেক বড় হয়
সুবিধা: specificity সবচেয়ে বেশি; অসুবিধা: hover লেখা যায় না
সুবিধা: class-এর নাম ভাবতে হয় না, CSS-এর আকার সীমিত থাকে; অসুবিধা: HTML-এ লম্বা class-এর সারি, আর component ছাড়া একই নকশা বহু জায়গায় বদলানো কঠিন
সুবিধা: কোনো CSS লিখতে হয় না; অসুবিধা: শুধু Chrome-এ চলে

(মাঝারি) CSS Modules কীভাবে class-এর নামের সংঘাত ঠেকায়?

build-এর সময় প্রতিটি class-এর নাম ফাইল অনুযায়ী অনন্য করে দেয় (hash যুক্ত করে)
ব্রাউজার নিজে প্রতিটি ফাইলের CSS আলাদা রাখে
id ছাড়া class ব্যবহার নিষিদ্ধ করে
প্রতিটি নিয়মে !important বসায়

(সহজ) DevTools-এর Styles প্যানেলে একটি declaration-এর ওপর দাগ কাটা (strikethrough) মানে কী?

declaration-টি মুছে ফেলা হয়েছে
declaration-টি element-এ মেলে, কিন্তু অন্য একটি নিয়ম জিতেছে (overridden)
declaration-টি শুধু মোবাইলে কাজ করে
declaration-টির বানান ভুল

(সহজ) hover করলে দেখা যায় এমন একটি dropdown-এর স্টাইল DevTools-এ ধীরে-সুস্থে দেখতে কী করবেন?

দ্রুত স্ক্রিনশট নেওয়া
CSS থেকে :hover মুছে দেওয়া
পাতা reload করা
Styles প্যানেলের :hov থেকে :hover অবস্থা force করা

(মাঝারি) একটি element-এর color-এর শেষ (computed) মান আর সেটি কোন নিয়ম থেকে এল — DevTools-এর কোথায় সবচেয়ে সরাসরি দেখা যায়?

Application প্যানেলে
Network প্যানেলে
Elements-এর Computed প্যানেলে
Console-এ

(মাঝারি) পাতার CSS-এর কত অংশ আসলে ব্যবহার হচ্ছে না, তা মাপার DevTools টুল কোনটি?

Coverage প্যানেল
Sources-এর breakpoint
Device toolbar
Elements প্যানেল

ব্রাউজার সাপোর্ট আর পারফরম্যান্স (পর্ব ৪৮–৪৯)

(মাঝারি) progressive enhancement আর graceful degradation-এর পার্থক্য কোনটি?

দুটি একই, শুধু নাম আলাদা
progressive enhancement সবখানে চলা সাধারণ ভিত্তি থেকে শুরু করে নতুন স্তর যোগ করে; graceful degradation পূর্ণ নকশা বানিয়ে পুরোনো ব্রাউজারে কম ভাঙার ব্যবস্থা করে
graceful degradation মানে পুরোনো ব্রাউজারে সাইট বন্ধ রাখা
progressive enhancement মানে শুধু নতুন ব্রাউজারের জন্য সাইট

(মাঝারি) নিচের দুই লাইন এই ক্রমে কেন লেখা হয়?

.btn {
  background: #2563eb;
  background: color-mix(in oklch, #2563eb 80%, black);
}

প্রথম লাইনটি পুরোনো ব্রাউজারে error দেখায়
দ্বিতীয় লাইনটি প্রথমটির সাথে মিশে নতুন রং বানায়
যে ব্রাউজার color-mix() চেনে না, সে দ্বিতীয় লাইনটি বাদ দিয়ে প্রথমটি রাখে; যে চেনে, তার কাছে পরে লেখাটি জেতে
ক্রম উল্টালেও একই ফল

(মাঝারি) @supports (display: grid) { ... } দিয়ে কী যাচাই হয়?

ব্রাউজারের নাম আর সংস্করণ
ব্যবহারকারী grid পছন্দ করেন কি না
ব্যবহারকারীর ডিভাইস কত দ্রুত
ব্রাউজার এই property-মান জোড়াটি পড়তে (parse করতে) পারে কি না

(মাঝারি) feature detection কেন user-agent sniffing-এর চেয়ে ভালো?

user-agent লেখা শুধু সার্ভার পড়তে পারে
ব্রাউজারের নাম-সংস্করণের লেখা মিথ্যা, পুরোনো বা অপ্রত্যাশিত হতে পারে; ফিচারটি আছে কি না সরাসরি যাচাই সবসময় সঠিক থাকে
feature detection-এ কোনো কোড লাগে না
user-agent sniffing আইনত নিষিদ্ধ

(সহজ) একটি CSS বা HTML ফিচার কোন ব্রাউজারে চলে, তা দেখার নির্ভরযোগ্য উৎস কোনটি?

শুধু নিজের ব্রাউজারে একবার চালিয়ে দেখা
যাচাই ছাড়া AI চ্যাটবটের উত্তর
MDN-এর ব্রাউজার-সামঞ্জস্যের টেবিল আর Baseline-বাক্স, বা caniuse.com
কয়েক বছর পুরোনো ফোরামের উত্তর

(মাঝারি) আজ নতুন CSS লেখার সময় -webkit- ধরনের vendor prefix নিয়ে কোনটি সঠিক?

বেশিরভাগ property-তে আর লাগে না; দরকার হলে Autoprefixer লক্ষ্য-ব্রাউজারের তালিকা (browserslist) দেখে নিজেই যোগ করে
prefix আইনত নিষিদ্ধ হয়েছে
prefix দিলে property সব ব্রাউজারে চলে
প্রতিটি property-তে চারটি prefix হাতে লেখা উচিত

(মাঝারি) বর্তমান Core Web Vitals-এর তিনটি মাপ কোনগুলো?

Lighthouse-এর Performance, Accessibility আর SEO স্কোর
LCP, FID আর CLS
FCP, TTFB আর CLS
LCP, INP আর CLS

(মাঝারি) Core Web Vitals-এ “ভালো” ধরার সীমা কোনটি (৭৫তম পারসেন্টাইলে)?

LCP ≤ ২.৫ সেকেন্ড, INP ≤ ২০০ মিলিসেকেন্ড, CLS ≤ ০.১
LCP ≤ ০.১ সেকেন্ড, INP ≤ ১০ মিলিসেকেন্ড, CLS ≤ ০
LCP ≤ ১০ সেকেন্ড, INP ≤ ২ সেকেন্ড, CLS ≤ ১
তিনটিরই সীমা ১০০-এর মধ্যে স্কোর

(মাঝারি) CSS কেন render-blocking, আর এর প্রভাব কমানোর একটি ভালো উপায় কোনটি?

CSS ফাইলকে async দেওয়া
সব CSS-কে body-র শেষে <style> হিসেবে রাখা
CSS কখনো render-blocking নয়
সাজসজ্জাহীন পাতার ঝলক ঠেকাতে ব্রাউজার CSS পাওয়ার আগে আঁকে না; উপায় — প্রথম পর্দার জরুরি (critical) CSS inline করা, বাকিটা পরে

(মাঝারি) Lighthouse-এর মাপ (lab data) আর CrUX-এর মাপ (field data)-এর পার্থক্য কোনটি?

lab আসল ব্যবহারকারীর মাপ
দুটি সবসময় হুবহু মেলে
lab একটি নিয়ন্ত্রিত পরীক্ষা — একটি যন্ত্র, একটি নেটওয়ার্ক; field হলো আসল ব্যবহারকারীদের ডিভাইস আর নেটওয়ার্কের মাপ
field data শুধু ডেস্কটপের

(মাঝারি) <script defer> আর <script async>-এর পার্থক্য কোনটি?

দুটিই parsing আটকায়
দুটিই নামার সময় HTML parsing আটকায় না; defer HTML পড়া শেষে, লেখার ক্রম মেনে চলে; async নামামাত্র চলে, ক্রম মানে না
async ক্রম মানে, defer মানে না
defer শুধু inline script-এ কাজ করে

(কঠিন) একটি লুপে প্রতিবার একটি element-এর style.width লিখে পরক্ষণেই offsetHeight পড়া হচ্ছে, আর পাতা ধীর। এর নাম আর সমাধান কোনটি?

layout thrashing — আগে সব মাপ পড়ে নিন, তারপর সব লিখুন
memory leak — পাতা reload করুন
CLS — ছবিতে width দিন
render-blocking — CSS inline করুন

(সহজ) অন্য domain-এর ফন্ট সার্ভারের (যেমন fonts.gstatic.com) সাথে আগেভাগে সংযোগ শুরু করতে <head>-এ কী লেখা হয়?

<meta name="preconnect">
<script async src="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.gstatic.com">

Sass, PostCSS আর CSS framework (পর্ব ৫০–৫১)

(মাঝারি) preprocessor আর postprocessor-এর পার্থক্য কোনটি?

দুটি একই
preprocessor শুধু JavaScript থেকে CSS বানায়
postprocessor ব্রাউজারের ভেতরে চলে
preprocessor নিজের ভাষা (যেমন SCSS) থেকে CSS বানায়; postprocessor (যেমন PostCSS) তৈরি CSS নিয়ে তাকে বদলায় — prefix, minify

(মাঝারি) Sass-এ @import-এর বদলে @use কেন ব্যবহার করা উচিত?

@use ব্রাউজারে সরাসরি চলে
@use namespace দেয়, প্রতিটি module একবারই লোড হয়, private সদস্য রাখা যায় — আর Sass-এর @import এখন deprecated
@import শুধু ছবি আনে
@use দ্রুত টাইপ করা যায়

(কঠিন) Sass-এ mixin আর @extend-এর পার্থক্য কোনটি?

দুটি হুবহু একই CSS তৈরি করে
mixin-এ argument দেওয়া যায় না
mixin প্রতিবার declaration কপি করে বসায়; @extend selector-এর তালিকায় নাম জুড়ে দেয়, যা অপ্রত্যাশিত selector আর ক্রমের সমস্যা তৈরি করতে পারে
@extend declaration কপি করে, mixin selector জোড়ে

(মাঝারি) Autoprefixer কীভাবে বোঝে কোন prefix যোগ করতে হবে?

প্রতিটি property-তে সব prefix যোগ করে
Sass-এর mixin থেকে
ব্যবহারকারীর ব্রাউজার দেখে চলার সময় যোগ করে
browserslist-এর লক্ষ্য-ব্রাউজারের তালিকা আর Can I use-এর ডেটা মিলিয়ে

(সহজ) Sass-এ _buttons.scss নামের শুরুর underscore কী বোঝায়?

ফাইলটি গোপন, কেউ দেখতে পায় না
এটি একটি partial — নিজে আলাদা CSS ফাইল হয় না, শুধু অন্য ফাইলে @use হয়
ফাইলটি শুধু মোবাইলের CSS
ফাইলটি মুছে ফেলার জন্য চিহ্নিত

(সহজ) Bootstrap-এর grid-এ কয়টি কলাম, আর .col-md-6 মানে কী?

১২টি কলাম; md (768px) বা তার বেশি চওড়ায় অর্ধেক (৬/১২), তার কমে পুরো চওড়া
১৬টি কলাম; ৬px চওড়া
১২টি কলাম; শুধু 768px-এর নিচে অর্ধেক
১০টি কলাম; সবসময় ৬০% চওড়া

(মাঝারি) Tailwind-এ class="block md:flex" মানে কী?

দুটি class পরস্পরকে বাতিল করে
শুধু 768px-এর নিচে flex
md নামের একটি element-এ flex
ছোট পর্দায় display: block, আর md breakpoint (ডিফল্ট 48rem, অর্থাৎ 768px) বা তার বেশি চওড়ায় display: flex

(মাঝারি) Tailwind-এর তৈরি CSS ফাইল সাধারণত ছোট থাকে কেন?

প্রতিটি class একটি ছবি
build টুল আপনার ফাইলগুলো স্ক্যান করে শুধু ব্যবহৃত class-এর CSS তৈরি করে
Tailwind-এ কোনো CSS নেই, সব JavaScript
Tailwind ব্রাউজারে নিজস্ব engine চালায়

(মাঝারি) inline style="..." আর Tailwind-এর utility class-এর মূল পার্থক্য কোনটি?

inline style-এ hover বা media query লেখা যায় না, কোনো ডিজাইন স্কেল নেই, আর specificity সবচেয়ে বেশি; utility class-এ variant, স্কেল আর সাধারণ class-এর specificity থাকে
দুটি একই — Tailwind আসলে inline style বসায়
Tailwind class-এর specificity inline style-এর চেয়ে বেশি
inline style hover সমর্থন করে, Tailwind করে না

DOM, Web Components, Git আর প্রকাশ (পর্ব ৫২–৫৪)

(মাঝারি) ব্যবহারকারীর লেখা মন্তব্য পাতায় দেখাতে innerHTML-এর বদলে textContent কেন নিরাপদ?

innerHTML বাংলা লেখা দেখাতে পারে না
textContent দ্রুত, তাই নিরাপদ
textContent লেখাকে লেখা হিসেবেই বসায়, HTML হিসেবে পার্স করে না — তাই কারও <img onerror=...> চলে না (XSS ঠেকে)
textContent লেখাকে এনক্রিপ্ট করে

(মাঝারি) <template> element-এর ভেতরের HTML সম্পর্কে কোনটি সঠিক?

এটি CSS-এর একটি at-rule
পাতায় দেখায় না, ভেতরের script চলে না, ছবি নামে না — JavaScript দিয়ে কপি (clone) করে বসালে তবেই জীবন্ত হয়
পাতায় সাথে সাথে দেখায়
এটি শুধু সার্ভারে চলে

(সহজ) custom element-এর নামে হাইফেন বাধ্যতামূলক কেন (যেমন <price-tag>)?

এটি শুধু একটি রীতি, বাধ্যতামূলক নয়
হাইফেন দিলে element দ্রুত লোড হয়
হাইফেন ছাড়া নাম CSS ধরতে পারে না
ভবিষ্যতের মানক HTML element-এর সাথে সংঘর্ষ এড়াতে — HTML কখনো হাইফেনওয়ালা নামের element আনবে না

(কঠিন) Shadow DOM-এর ভেতরের অংশে বাইরের page থেকে স্টাইল পৌঁছানোর বৈধ উপায় কোনটি?

বাইরের যেকোনো class selector
id selector দিয়ে
উত্তরাধিকারী property (যেমন color, font), CSS custom property আর component যে অংশ খোলে তার জন্য ::part()
!important দিলে সব ঢোকে

(সহজ) Web Components-এর তিনটি মূল প্রযুক্তি কোনগুলো?

custom elements, Shadow DOM আর <template>/<slot>
iframe, canvas আর SVG
React, Vue আর Angular
HTML, CSS আর JSON

(সহজ) Git আর GitHub-এর পার্থক্য কোনটি?

Git শুধু ছবির জন্য, GitHub কোডের জন্য
GitHub ছাড়া Git চলে না
Git নিজের কম্পিউটারে চলা version control টুল; GitHub হলো Git repository অনলাইনে রাখার আর দলে কাজের একটি সেবা
দুটি একই কোম্পানির একই জিনিস

(মাঝারি) git add আসলে কী করে?

নতুন branch বানায়
বদলানো ফাইলকে staging area-তে তোলে — পরের commit-এ কী যাবে তার বাছাই
ফাইলকে সরাসরি GitHub-এ পাঠায়
ফাইল মুছে দেয়

(মাঝারি) git fetch আর git pull-এর পার্থক্য কোনটি?

fetch শুধু remote-এর নতুন commit নামিয়ে রাখে; pull নামিয়ে বর্তমান branch-এ মিলিয়েও নেয় (মোটামুটি fetch + merge)
দুটি হুবহু এক
pull শুধু নামায়, fetch মেলায়
দুটিই নিজের commit remote-এ পাঠায়

(সহজ) নিচের কোন ফাইল .gitignore-এ রেখে repository-র বাইরে রাখা উচিত?

style.css
README.md
index.html
.env — পাসওয়ার্ড বা API key-এর ফাইল

(মাঝারি) merge conflict কখন হয়, আর কীভাবে মেটায়?

যেকোনো দুই commit-এ সবসময় হয়
git push --force দিয়ে মেটানো উচিত
দুই branch একই ফাইলের একই জায়গা দুইভাবে বদলালে; দাগ দেওয়া অংশ (<<<<<<<, =======, >>>>>>>) হাতে ঠিক করে git add আর git commit
GitHub সার্ভার বন্ধ থাকলে হয়

(মাঝারি) cPanel-এর শেয়ার্ড হোস্টিংয়ে মূল ডোমেইনের সাইটের ফাইল সাধারণত কোন ফোল্ডারে রাখতে হয়?

public_html
tmp
home
mail

(মাঝারি) HTTPS পাতায় <script src="http://..."> দিয়ে স্ক্রিপ্ট আনলে কী হয়?

শুধু ঠিকানার ঘরের তালা সবুজ হয়
পুরো পাতা http-তে বদলে যায়
স্ক্রিপ্ট স্বাভাবিকভাবে চলে
আধুনিক ব্রাউজার এটিকে mixed content হিসেবে আটকে দেয় — স্ক্রিপ্টটি চলে না

(মাঝারি) সাইটে HTTPS (TLS সার্টিফিকেট) চালু করলে মূলত কী নিশ্চিত হয়?

পাতা সার্চে প্রথমে আসবে
ব্রাউজার আর সার্ভারের মাঝের তথ্য এনক্রিপ্টেড থাকে, আর ব্রাউজার যাচাই করে সার্ভারটি সত্যিই ওই ডোমেইনের
সাইটের কোডে কোনো বাগ থাকবে না
সাইট হ্যাক হওয়া অসম্ভব হয়ে যায়

(সহজ) design token বলতে কী বোঝায়?

প্রতিটি পাতার একটি ছবি
একটি লগইন token
একটি CSS framework-এর নাম
নকশার সিদ্ধান্তের (রং, মাপ, ফাঁক, ফন্ট) নাম দেওয়া মান, যেমন --color-brand, --space-4

(মাঝারি) Lighthouse রিপোর্টের প্রধান বিভাগগুলো কোনগুলো?

LCP, INP, CLS আর FID
HTML, CSS, JavaScript আর ছবি
Performance, Accessibility, Best Practices আর SEO
Speed, Color, Font আর Size

মডিউল ৭-এর প্রচলিত ফাঁদ:

DevTools-এ দাগ কাটা declaration-কে “ভুল বানান” ভাবা — বেশিরভাগ সময় অন্য নিয়ম জিতেছে।
fallback আর নতুন মানের ক্রম উল্টে লেখা — fallback আগে।
FID-কে এখনো Core Web Vital বলা — ২০২৪ থেকে INP.
Sass-এর @import আর @extend-কে আধুনিক অভ্যাস ভাবা।
Bootstrap-Tailwind-এর breakpoint-কে “এর নিচে” ভাবা — দুটিই mobile-first, মানে “এর ওপরে”।
ব্যবহারকারীর লেখা innerHTML-এ বসানো।
git add-কে GitHub-এ পাঠানো ভাবা — পাঠায় git push.

revise পর্ব: পর্ব ৪৬ · CSS architecture · পর্ব ৪৭ · DevTools দিয়ে debugging · পর্ব ৪৮ · ব্রাউজার সাপোর্ট · পর্ব ৪৯ · পারফরম্যান্স · পর্ব ৫০ · Sass আর PostCSS · পর্ব ৫১ · CSS framework · পর্ব ৫২ · DOM আর Web Components · পর্ব ৫৩ · Git আর প্রকাশ · পর্ব ৫৪ · ক্যাপস্টোন পোর্টফোলিও

৯ · AI-এর যুগে — AI দিয়ে আরও MCQ বানান, কিন্তু উত্তর ব্রাউজারে যাচাই করুন

এই পাতার প্রশ্ন শেষ হলে আরও অনুশীলন চাইবেন, আর AI চ্যাটবট মুহূর্তে শত শত MCQ বানিয়ে দিতে পারে। কিন্তু একটি সতর্কবার্তা মনে রাখুন: HTML-CSS-এর MCQ-তে AI প্রায়ই পুরোনো তথ্যকে “সঠিক” বলে, বা দুটি সঠিক অপশন রেখে দেয়। কারণ ইন্টারনেটের পুরোনো টিউটোরিয়াল আর প্রশ্নব্যাংকে একই ভুল বছরের পর বছর ঘুরছে — “<b> বাতিল”, “CSS-এ parent selector নেই”, “FID একটি Core Web Vital” — আর AI সেগুলো থেকেই শিখেছে। তার ওপর ব্রাউজার প্রতি মাসে বদলায়, অথচ AI-এর জ্ঞানের একটি শেষ তারিখ থাকে। আর “সঠিক কোড” হিসেবে AI প্রায়ই দেয় div-ভরা, অ্যাক্সেসিবিলিটিহীন markup.

AI-এর প্রচলিত ভুল	উদাহরণ	কীভাবে ধরবেন
পুরোনো তথ্য	“:has() কোনো ব্রাউজারে নেই”, “FID-এর ভালো সীমা ১০০ms”	MDN, web.dev আর এই কোর্সের সংশ্লিষ্ট পর্বের সাথে মেলান
সাপোর্টের তথ্য বানানো	“anchor positioning সব ব্রাউজারে বহুদিন ধরে”	MDN-এর Baseline-বাক্স আর caniuse.com দেখুন
হিসাবে ভুল	specificity “১১০ পয়েন্ট”, content-box-এ বাক্স ২০০px	কোডটি অংশ ১-এর লাইভ এডিটরে বা DevTools-এর Computed প্যানেলে চালান
দুটি সঠিক অপশন	“কোনটি semantic element?” — অপশনে nav আর article দুটিই	প্রতিটি অপশন আলাদা করে সত্য/মিথ্যা যাচাই করুন
“সঠিক কোড”-এ ভুল markup	বাটনের বদলে `<div onclick>`, label ছাড়া input	validator.w3.org আর Lighthouse-এর Accessibility রিপোর্ট
বানানো উৎস	“অমুক পরীক্ষায় এসেছিল”	উৎস দেখাতে না পারলে দাবিটি বাদ দিন

নিচের প্রম্পটটি AI-কে প্রশ্ন বানাতে বলে, কিন্তু সাথে এমন তথ্যও চায়, যা দিয়ে আপনি উত্তর যাচাই করতে পারবেন। প্রতিটি কোড-প্রশ্নের জন্য ব্রাউজারে চালানো যায় এমন পূর্ণ কোড চাওয়াই এখানে আসল কৌশল:

আমি HTML আর CSS-এর MCQ পরীক্ষার প্রস্তুতি নিচ্ছি (বিশ্ববিদ্যালয়, চাকরি আর ফ্রন্ট-এন্ড ইন্টারভিউ)। ধরে নাও: আধুনিক Chrome/Edge, পাতায় <!doctype html> আছে, ডিফল্ট font-size 16px. বিষয়: [যেমন: specificity আর cascade layer] কঠিনতা: [সহজ / মাঝারি / কঠিন] ১০টি MCQ বানাও। প্রতিটির জন্য: ১. প্রশ্ন আর ঠিক ৪টি অপশন; শুধু একটি সঠিক। প্রশ্ন নিজে সম্পূর্ণ হবে — “উপরের কোড” ধরনের উল্লেখ থাকবে না। ২. সঠিক উত্তর, আর প্রতিটি ভুল অপশন কোন ভুল ধারণা থেকে এসেছে — এক লাইনে। ৩. প্রশ্নে কোড থাকলে একটি পূর্ণ HTML ফাইল দাও, যা ব্রাউজারে খুললে উত্তরটি চোখে দেখা যায়। ৪. নতুন কোনো ফিচার থাকলে তার Baseline অবস্থা লেখো (Widely available / Newly available / এখনো Baseline নয়); নিশ্চিত না হলে "নিশ্চিত নই, MDN দেখুন" লেখো। ৫. "সঠিক কোড" হিসেবে কখনো div দিয়ে বাটন, label ছাড়া input বা পুরোনো ট্যাগ (center, font) দেবে না। ৬. কোনো প্রশ্নকে কোনো নির্দিষ্ট পরীক্ষার আসল প্রশ্ন বলে দাবি করবে না।

যাচাইয়ের চেকলিস্ট

প্রতিটি কোড-প্রশ্ন ব্রাউজারে বা লাইভ এডিটরে চালিয়েছি; চোখে দেখা ফল AI-এর উত্তরের সাথে মিলেছে
মাপ আর রঙের প্রশ্নে DevTools-এর Computed প্যানেলে আসল মান দেখেছি
নতুন ফিচারের সাপোর্টের দাবি MDN-এর Baseline-বাক্স বা caniuse.com-এ মিলিয়েছি
“সঠিক কোড” validator.w3.org-এ পাস করে, আর Lighthouse-এর Accessibility রিপোর্টে বড় সমস্যা নেই
চারটি অপশনের মধ্যে ঠিক একটি সঠিক — দুটি সঠিক বা কোনোটিই সঠিক নয় এমন প্রশ্ন বাদ দিয়েছি
সংজ্ঞা আর “কোন সংস্করণে এলো” ধরনের তথ্য এই কোর্সের সংশ্লিষ্ট পর্বের সাথে মিলিয়েছি

কেন এই উত্তর? — কৌশল আর যে বিষয়গুলোতে সবচেয়ে বেশি ভুল হয়

প্রথমটি এই প্রশ্নব্যাংক দিয়ে কীভাবে রিভিশন করবেন তা নিয়ে; বাকি পাঁচটি বিষয় এত বেশি ভুল বোঝা হয় যে আলাদা ব্যাখ্যা দরকার। প্রশ্নটি নিয়ে আগে নিজে ভাবুন — তারপর খুলে উত্তর দেখুন।

প্র ০১এত প্রশ্ন একবারে পড়ে মনে থাকে না। এই প্রশ্নব্যাংক দিয়ে কীভাবে রিভিশন করলে সবচেয়ে বেশি কাজে লাগে?

প্রশ্নব্যাংকের সবচেয়ে বড় অপব্যবহার হলো একটানা পড়ে যাওয়া — প্রশ্ন দেখা, উত্তর চাপা, “ও আচ্ছা” বলে এগিয়ে যাওয়া। শেখার গবেষণায় বারবার দেখা গেছে, তথ্য মনে রাখতে সবচেয়ে কার্যকর দুটি অভ্যাস হলো নিজে থেকে মনে করার চেষ্টা (active recall) আর বিরতি দিয়ে ফিরে আসা (spaced repetition). নিচের পদ্ধতিটি দুটিকেই কাজে লাগায়:

প্রথম দফা — একটি অংশ, পুরো মনোযোগ: একবারে একটি অংশ (যেমন “মডিউল ৩ — CSS-এর ভিত্তি”) নিন। প্রতিটি প্রশ্নে চাপার আগে খাতায় নিজের উত্তর আর এক লাইনের কারণ লিখুন। কারণ লিখতে না পারলে আন্দাজটিকে “ভুল” হিসেবেই গুনুন — ঠিক হলেও।
ভুলের খাতা: প্রতিটি ভুলের জন্য একটি লাইন — কোন নিয়মটি জানতাম না বা গুলিয়েছিলাম (“@media specificity বাড়ায় না”)। প্রশ্ন নয়, নিয়মটি লিখুন; পরীক্ষায় একই নিয়ম অন্য চেহারায় আসবে।
পর্বে ফিরে যাওয়া: একটি অংশে তিনটির বেশি ভুল হলে সেই অংশের শেষের “revise পর্ব”-এর লিংকগুলো আবার পড়ুন — বিশেষ করে সেখানকার লাইভ এডিটরে কোড বদলে দেখুন।
ফিরে আসার সময়সূচি: ভুলের খাতা দেখে ১ দিন, ৩ দিন আর ৭ দিন পরে শুধু ভুল প্রশ্নগুলো আবার করুন। পাতার প্রশ্নের ক্রম একই থাকে, তাই উত্তরের অবস্থান মুখস্থ হয়ে যাওয়ার ঝুঁকি আছে — ব্যাখ্যা না পড়ে নিজের কারণটি আগে বলুন।
সময় ধরে পূর্ণ মহড়া: পরীক্ষার এক-দুই সপ্তাহ আগে সব অংশ থেকে মিশিয়ে ৫০টি প্রশ্ন ৩০ মিনিটে করুন। এতে গতি আর “কখন ছেড়ে যাব” সিদ্ধান্তের অভ্যাস হয়। কোর্স হোমের মডিউল টেস্টও একই কাজে লাগে।
কোড প্রশ্নে সন্দেহ হলে রেন্ডার করুন: অংশ ১-এর লাইভ এডিটরে বা যেকোনো HTML ফাইলে কোডটি বসিয়ে দেখুন — শুধু মিলিয়ে নেওয়ার জন্য নয়, একটু বদলে (content-box-কে border-box, id-কে class) ফল কীভাবে বদলায় তা দেখার জন্য।

মূল উপলব্ধি: প্রশ্ন পড়া নয়, প্রশ্নের পেছনের নিয়ম মনে রাখাই লক্ষ্য — নিজে উত্তর আর কারণ লিখুন, ভুলের নিয়ম খাতায় তুলুন, আর বিরতি দিয়ে ফিরে আসুন।

প্র ০২“পরে লেখা নিয়ম জেতে” — এই কথাটি কেন অর্ধেক-সত্য, আর cascade আসলে কোন ক্রমে বিজয়ী ঠিক করে?

CSS-এর নামের প্রথম শব্দই cascade — ধাপে ধাপে নেমে আসা জলপ্রপাত। একই element-এ একই property-র কয়েকটি declaration লাগলে ব্রাউজার একটির পর একটি প্রশ্ন করে, আর যে ধাপে প্রথম পার্থক্য পায়, সেখানেই খেলা শেষ। নিচের ধাপে পার্থক্য থাকলে ওপরের ধাপে যাওয়ার দরকারই পড়ে না।

সাধারণ পাতার জন্য ধাপগুলো মোটামুটি এই ক্রমে: (১) উৎস আর গুরুত্ব — ব্রাউজারের ডিফল্ট, ব্যবহারকারীর নিজের স্টাইল আর লেখকের (আপনার) CSS, প্রতিটির সাধারণ আর !important রূপ; (২) element-এ সরাসরি লেখা স্টাইল — style attribute; (৩) cascade layer — @layer-এর ক্রম; (৪) specificity — (id, class, type)-এর তিন ঘর; (৫) লেখার ক্রম — সবশেষে, শুধু যখন আগের সব সমান। তাই “পরে লেখা জেতে” কথাটি সত্য, কিন্তু শুধু শেষ ধাপে।

পরীক্ষার ফাঁদগুলো ঠিক এই ধাপগুলো থেকেই আসে। !important ধাপ ১-এই খেলা শেষ করে — specificity বিবেচনাতেই আসে না। @layer-এর বাইরের CSS layer-এর ভেতরের যেকোনো CSS-কে হারায়, id থাকলেও — কারণ ধাপ ৩ আসে ধাপ ৪-এর আগে। আর important-এ layer-এর ক্রম উল্টে যায়, কারণ ব্যবস্থাটি এমনভাবে বানানো যাতে ভিত্তির স্তর (reset, library) চাইলে নিজের জরুরি নিয়ম রক্ষা করতে পারে।

আরেকটি ফাঁদ হলো inheritance-কে এই লড়াইয়ে ঢোকানো। উত্তরাধিকার cascade-এর অংশ নয় — এটি কাজ করে শুধু তখন, যখন element-এ ওই property-র কোনো declaration-ই লাগেনি। তাই * { color: black }-এর মতো শূন্য-specificity-র নিয়মও parent-এর লাল রঙকে হারায়: সরাসরি লাগা যেকোনো মান উত্তরাধিকারের চেয়ে শক্ত। @layer ২০২২ সালে প্রধান ব্রাউজারগুলোতে প্রায় একসাথে আসে; আজ এটি Baseline Widely available, আর বড় প্রজেক্টে specificity-র যুদ্ধ এড়ানোর প্রধান হাতিয়ার।

মূল উপলব্ধি: cascade একটি ধাপের সিঁড়ি — উৎস-গুরুত্ব, inline, layer, specificity, তারপর ক্রম; প্রথম যে ধাপে পার্থক্য, সেখানেই বিজয়ী, আর উত্তরাধিকার আসে শুধু কোনো declaration না থাকলে।

প্র ০৩box model-এর প্রশ্নে এত ভুল হয় কেন — content-box ডিফল্ট কেন, আর margin কেন মিশে যায়?

box model-এর প্রশ্নে বেশিরভাগ ভুল হয় দুটি “অস্বাভাবিক” ডিফল্ট থেকে, যা আসলে ইতিহাসের ফল। প্রথমটি width-এর অর্থ। CSS1-এর মানে width ছিল শুধু content-এর মাপ — padding আর border বাইরে যোগ হয়। এর পেছনের যুক্তি ছিল ছাপাখানার: লেখার ঘর কত চওড়া, তা-ই আসল মাপ। কিন্তু ১৯৯০-এর শেষের দিকে Internet Explorer-এর কিছু সংস্করণ quirks mode-এ উল্টো হিসাব করত — width-এর ভেতরেই padding আর border. ফলে একই CSS দুই ব্রাউজারে দুই মাপের বাক্স বানাত, আর doctype দিয়ে standards mode বাছার প্রথা এখান থেকেই জোরদার হয়।

মজার ব্যাপার হলো, পরে ডেভেলপাররা বুঝলেন IE-র “ভুল” হিসাবটিই অনেক কাজে সুবিধাজনক — “এই কলাম ৫০% চওড়া” বললে padding যোগ হয়ে ৫০% ছাড়িয়ে যাওয়ার ভয় থাকে না। তাই CSS3-এ box-sizing এল, আর আজ প্রায় প্রতিটি reset-এ *, *::before, *::after { box-sizing: border-box; } থাকে। কিন্তু ব্রাউজারের ডিফল্ট আজও content-box — পুরোনো লক্ষ লক্ষ পাতা ভাঙবে বলে বদলানো যায় না। পরীক্ষায় তাই প্রথম প্রশ্ন: “box-sizing কী লেখা আছে?”

দ্বিতীয় ডিফল্ট margin collapsing. দুটি অনুচ্ছেদের একটির নিচে ৩০px, অন্যটির ওপরে ২০px margin থাকলে মাঝে ৫০ নয়, ৩০px ফাঁক। নিয়মটি এসেছে লেখার পাতার ধারণা থেকে: প্রতিটি অনুচ্ছেদ বলে “আমার চারপাশে অন্তত এতটুকু ফাঁক চাই” — দুজনের চাওয়া মেলাতে বড়টিই যথেষ্ট। এটি ঘটে শুধু block লেআউটে, ওপর-নিচের margin-এ; flex বা grid item-এ, padding বা border থাকলে, বা display: flow-root-এর মতো নতুন formatting context-এ ঘটে না। parent-child-এর মধ্যেও ঘটে — সন্তানের margin-top parent-এর বাইরে বেরিয়ে যায় — যা দেখে নতুনরা ভাবেন CSS “বাগ” করছে।

মূল উপলব্ধি: box model-এর প্রশ্নে আগে দুটি জিনিস দেখুন — box-sizing (ডিফল্ট content-box) আর লেআউটের ধরন (block হলে ওপর-নিচের margin মেশে, flex-grid-এ মেশে না); বাকিটা সরল যোগ-বিয়োগ।

প্র ০৪Flexbox আর Grid-এ লম্বা লেখা বা টেবিল কেন লেআউট ভেঙে দেয়, যখন সব নিয়ম ঠিক লেখা?

লেআউটের প্রশ্নে সবচেয়ে চতুর ফাঁদ হলো একটি অদৃশ্য ডিফল্ট: flex item আর grid item-এর automatic minimum size. Flexbox-এ প্রতিটি item-এর ডিফল্ট min-width: auto, যার মানে “আমার ভেতরের সবচেয়ে চওড়া, ভাঙা যায় না এমন জিনিসের (লম্বা URL, ছবি, টেবিল) চেয়ে ছোট হব না।” তাই flex: 1 দেওয়া দুটি কলামের একটিতে লম্বা একটি লিংক থাকলে কলামটি ছোট হতে অস্বীকার করে, আর পুরো সারি পর্দার বাইরে চলে যায়।

Grid-এ একই জিনিস লুকিয়ে থাকে 1fr-এর ভেতরে। 1fr আসলে minmax(auto, 1fr) — নিচের সীমা content-এর ন্যূনতম মাপ। ফলে “দুটি সমান কলাম” (1fr 1fr) একটিতে চওড়া content থাকলে আর সমান থাকে না। সমাধান দুই জায়গাতেই এক ধারণার: নিচের সীমা শূন্য করে দিন — item-এ min-width: 0, বা track-এ minmax(0, 1fr); সাথে লেখার জন্য overflow-wrap: anywhere আর টেবিলের মোড়কে overflow-x: auto.

spec-লেখকেরা এই ডিফল্ট ইচ্ছা করেই বেছেছেন। বিকল্পটি — item-কে শূন্য পর্যন্ত সঙ্কুচিত হতে দেওয়া — আরও খারাপ: তখন লেখা পাশের item-এর ওপর চড়ে বসত, পাঠযোগ্যতা হারাত, আর ডেভেলপার হয়তো খেয়ালই করতেন না। “ভেঙে বাইরে যাওয়া” অন্তত চোখে পড়ে। তাই spec-এ ডিফল্ট হিসেবে শূন্যের বদলে এই স্বয়ংক্রিয় ন্যূনতম মাপ বেছে নেওয়া হয়েছে — নিরাপদ দিকটি ডিফল্ট, আর দরকার হলে আপনি নিজে শূন্য করবেন।

পরীক্ষায় এই বিষয়টি আসে “কেন ছোট হচ্ছে না?” বা “কোন এক লাইনে ঠিক হবে?” রূপে। DevTools-এ flex বা grid overlay চালু করলে item-এর আসল মাপ আর সীমা দেখা যায় — interview-তে debugging-এর গল্প হিসেবেও এটি খুব কাজের।

মূল উপলব্ধি: flex item-এর min-width: auto আর grid-এর 1fr = minmax(auto, 1fr) — দুটিই content-কে রক্ষা করে; লেআউট ভাঙলে নিচের সীমা শূন্য করুন: min-width: 0 বা minmax(0, 1fr).

প্র ০৫“ARIA দিলেই পাতা অ্যাক্সেসিবল” — এই ধারণা কেন বিপজ্জনক, আর অ্যাক্সেসিবিলিটির MCQ-তে সঠিক উত্তর চেনার নিয়ম কী?

অ্যাক্সেসিবিলিটির MCQ-তে প্রায়ই একটি অপশন থাকে বেশি “প্রযুক্তিগত” দেখতে — <div role="button" tabindex="0" aria-label="..."> — আর পাশে সরল <button>. অনেকে প্রথমটি বাছেন, কারণ তাতে বেশি ARIA. অথচ সঠিক উত্তর প্রায় সবসময় সরলটি। ARIA শুধু accessibility tree-তে একটি ঘোষণা দেয় — “এটি বাটন” — কিন্তু বাটনের আচরণ দেয় না: Enter আর Space-এ চাপ, focus-এর ক্রম, ফর্ম জমা, disabled অবস্থা — সব আবার হাতে লিখতে হয়। নিজস্ব <button> এগুলো বিনামূল্যে আনে, বছরের পর বছর ব্রাউজার আর screen reader-এ পরীক্ষিত হয়ে।

এ কারণেই W3C-র ARIA ব্যবহারের নির্দেশিকার প্রথম নিয়ম: নিজস্ব HTML element বা attribute দিয়ে কাজ হলে ARIA নয়। WebAIM-এর বার্ষিক জরিপে বারবার দেখা গেছে, ARIA বেশি থাকা হোমপেজে গড়ে বেশি অ্যাক্সেসিবিলিটি-ত্রুটি ধরা পড়ে — ARIA নিজে খারাপ বলে নয়, ভুল জায়গায় ভুলভাবে ব্যবহারের কারণে। ভুল ARIA (যেমন focus পায় এমন বোতামে aria-hidden="true") কোনো ARIA না থাকার চেয়েও খারাপ।

MCQ-তে সঠিক উত্তর চেনার কয়েকটি নিয়ম: (১) কাজের জন্য নিজস্ব element আছে? থাকলে সেটিই — বাটনে button, লিংকে a href, শিরোনামে h1–h6. (২) ছবির alt ছবির চেহারা নয়, তার কাজ বা তথ্য বলে; সাজসজ্জায় alt খালি। (৩) কোনো তথ্য শুধু রঙে নয় — লেখা বা আইকনও লাগে। (৪) কি-বোর্ডে পুরোটা চলে কি না, আর focus চোখে পড়ে কি না। (৫) WCAG-এর সাধারণ লক্ষ্য AA স্তর — লেখায় ৪.৫:১ contrast, UI অংশে ৩:১, আর WCAG 2.2-তে target-এর ন্যূনতম ২৪×২৪ CSS px.

আর একটি সতর্কতা: Lighthouse-এ Accessibility স্কোর ১০০ মানে স্বয়ংক্রিয় পরীক্ষাগুলো পাস — alt-এর লেখা অর্থবহ কি না, কি-বোর্ডের ক্রম যুক্তিসংগত কি না, এসব মানুষকেই দেখতে হয়।

মূল উপলব্ধি: অ্যাক্সেসিবিলিটির প্রশ্নে সবচেয়ে সরল, নিজস্ব HTML-এর অপশনটিই সাধারণত সঠিক; ARIA শুধু ঘোষণা, আচরণ নয় — আর ভুল ARIA কোনো ARIA না থাকার চেয়েও খারাপ।

প্র ০৬“এই ফিচার কি সব ব্রাউজারে চলে?” — এমন প্রশ্নের উত্তর কীভাবে দেবেন, আর Baseline কেন এল?

আগে এই প্রশ্নের উত্তর দিতে প্রতিটি ব্রাউজারের সংস্করণ-তালিকা মুখস্থ করতে হতো — “Chrome 105, Safari 15.4, Firefox 121 থেকে” — যা প্রতি মাসে পুরোনো হয়ে যায়। এই জটিলতা কমাতে ২০২৩ সালে ব্রাউজার-নির্মাতা আর ওয়েব-সমাজ মিলে Baseline লেবেল চালু করেন, যা এখন MDN-সহ অনেক জায়গায় প্রতিটি ফিচারের পাতায় দেখা যায়। নিয়মটি সহজ: কোনো ফিচার যেদিন Chrome, Edge, Firefox আর Safari — চারটির সর্বশেষ সংস্করণে, ডেস্কটপ আর মোবাইলে — চলে আসে, সেদিন সে Baseline Newly available. তার প্রায় ৩০ মাস পর, যখন বেশিরভাগ মানুষের ব্রাউজার আপডেট হয়ে যায়, সে Baseline Widely available. যা এখনো সব প্রধান ব্রাউজারে আসেনি, তা “এখনো Baseline নয়”।

এই কোর্সের হিসাবে (২০২৫–২৬) কয়েকটি উদাহরণ: :has(), container size query, CSS nesting, @layer, oklch(), dvh — Widely available; @property, light-dark(), popover, @starting-style, একই পাতার View Transitions, @scope — Newly available; anchor positioning সব ইঞ্জিনে পৌঁছানোর পথে; scroll-driven animation আর field-sizing — এখনো Baseline নয়। তবে এগুলো চলমান অবস্থা — আপনি যখন পড়ছেন, তখন হয়তো এক ধাপ এগিয়েছে। তাই মুখস্থ নয়, MDN-এর Baseline-বাক্স দেখার অভ্যাসই আসল।

পরীক্ষায় উত্তর দেওয়ার নিরাপদ কাঠামো: (১) ফিচারটির Baseline স্তর বলুন; (২) Newly বা Baseline-নয় হলে fallback বলুন — আগে পুরোনো মান লিখে পরে নতুনটি, বা @supports দিয়ে বাড়তি স্তর; (৩) progressive enhancement-এর নীতি বলুন — ফিচারটি না থাকলেও মূল কাজ (পড়া, ফর্ম জমা, navigation) যেন আটকে না যায়। পুরোনো বইয়ের “HTML5-এ নতুন ট্যাগ কোনগুলো” বা “parent selector নেই” ধরনের উত্তর আজকের মানের সাথে মেলে না — প্রশ্নটি ইতিহাস জানতে চাইছে, না বর্তমান অভ্যাস, সেটি আগে বুঝুন।

মূল উপলব্ধি: সাপোর্টের প্রশ্নে সংস্করণ নম্বর নয়, Baseline-এর স্তর বলুন — Widely হলে নিশ্চিন্তে, Newly হলে fallback ভেবে, Baseline-নয় হলে শুধু বাড়তি সুবিধা হিসেবে; আর সবসময় MDN-এ মিলিয়ে নিন।

শেষ ধাপ — ক্রম সাজান আর স্কোর দেখুন

উপরের সব MCQ শেষ করলে নিচে আপনার মোট স্কোর দেখাবে — প্রথম চেষ্টায় কয়টি ঠিক হয়েছে।

ক্রমএকই element-এ বিরোধী CSS declaration-এর মধ্যে বিজয়ী ঠিক করতে ব্রাউজার যে ধাপগুলো দেখে, সেগুলো আগে থেকে পরে সাজান (▲▼ চেপে সরান)

🏷️ উৎস আর গুরুত্ব (ব্রাউজার / ব্যবহারকারী / লেখক, !important)
✍️ element-এ সরাসরি লেখা style attribute
🗂️ cascade layer (@layer)-এর ক্রম
⚖️ specificity (id, class, type)
📄 stylesheet-এ লেখার ক্রম

শব্দকোষ

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

মনে রাখুন

বাদ দিন, খুঁজবেন না: প্রতিটি অপশনের পেছনের নিয়ম যাচাই করুন; “সব সময়”, “শুধু” ধরনের চরম শব্দে সতর্ক হোন; “কোনটি নয়” প্রশ্নে প্রতিটি বাক্যে দাগ দিন; দুটি অপশন নিশ্চিত বাদ না দিয়ে negative marking-এর পরীক্ষায় আন্দাজ নয়।
HTML-এর চার জোড়া: strong বনাম b; article বনাম section; disabled বনাম readonly; robots.txt (crawl) বনাম noindex (সূচি) — আর type ছাড়া button মানে submit, সাজসজ্জার ছবিতে alt="".
cascade-এর সিঁড়ি: উৎস-গুরুত্ব → inline → layer → specificity (তিন ঘর, যোগ নয়) → ক্রম; উত্তরাধিকার শুধু declaration না থাকলে; @media specificity বাড়ায় না।
মাপের তিন ফাঁদ: ডিফল্ট content-box (width-এর বাইরে padding-border); block-এ ওপর-নিচের margin মেশে; flex-grid item-এর min-width: auto আর 1fr = minmax(auto, 1fr).
আধুনিক আর সৎ: :has(), nesting, container query, @layer — Widely available; @property, light-dark(), popover — Newly; scroll-driven animation, field-sizing — এখনো নয়। Core Web Vitals = LCP, INP, CLS; fallback আগে, নতুনটি পরে।

পরের পর্বে: MCQ-তে চারটি অপশন থেকে বাছতে হয়। লিখিত আর মৌখিক (ভাইভা) পরীক্ষায় কোনো অপশন নেই — নিজের ভাষায় সংজ্ঞা, পার্থক্য আর ছোট উদাহরণ দিতে হয়। পর্ব ৫৭-এ HTML-CSS-এর সেই প্রশ্নগুলো আর উত্তর সাজানোর কৌশল।