লিখিত ও মৌখিক (ভাইভা) প্রশ্ন — HTML-CSS মডেল উত্তর ও কৌশল

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

উপমা: একটি বাড়ি। HTML হলো কাঠামো — দেয়াল, দরজা, ঘর; CSS হলো রং, টাইলস, পর্দা; JavaScript হলো বিদ্যুৎ-সংযোগ — সুইচ টিপলে বাতি জ্বলে, ফ্যান ঘোরে।

যোগ করুন: তিনটি আলাদা রাখার নাম separation of concerns. রং বদলাতে HTML ছুঁতে হয় না, আর CSS বা JavaScript লোড না হলেও HTML-এর লেখা পড়া যায় — এটাই progressive enhancement-এর ভিত্তি।

ঝালিয়ে নিন: পর্ব ০১ · ওয়েব কীভাবে চলে

সংজ্ঞা: পাতা দেখানো দুই ভাগের কাজ — নেটওয়ার্ক ভাগে ব্রাউজার সার্ভার থেকে ফাইল আনে, আর রেন্ডারিং ভাগে সেই ফাইল থেকে পর্দার ছবি বানায়।

ধাপে ধাপে ব্যাখ্যা:

1. URL ভাঙা ও cache দেখা: scheme (https), domain, path আলাদা হয়; ফাইলটি আগে থেকে cache-এ থাকলে নেটওয়ার্কে যাওয়ার দরকারই পড়ে না।
2. DNS: domain নাম (যেমন abcltech.com) থেকে সার্ভারের IP address খোঁজা — ফোনবুকে নাম দেখে নম্বর বের করার মতো।
3. সংযোগ: সার্ভারের সাথে সংযোগ, আর HTTPS হলে TLS দিয়ে এনক্রিপশনের চুক্তি।
4. HTTP request ও response: ব্রাউজার GET /index.html পাঠায়; সার্ভার status code (200 OK, 404 …), header আর HTML ফেরত দেয়।
5. Parse: HTML পড়ে DOM গাছ, CSS পড়ে CSSOM. পথে পাওয়া CSS, ছবি, ফন্ট, স্ক্রিপ্টের জন্য নতুন request যায়। defer ছাড়া সাধারণ <script> parsing থামিয়ে রাখে, আর head-এর stylesheet প্রথম ছবি আঁকা আটকে রাখে।
6. Render tree: DOM আর CSSOM মিলিয়ে শুধু দৃশ্যমান অংশের গাছ — display: none দেওয়া element এখানে থাকে না।
7. Layout: প্রতিটি বাক্সের অবস্থান আর মাপের হিসাব।
8. Paint ও compositing: রং, লেখা, ছায়া আঁকা; তারপর স্তরগুলো জুড়ে পর্দায় দেখানো।

চিত্র:

URL ─► DNS ─► সংযোগ (TCP/QUIC + TLS) ─► HTTP request
                                           │
            HTML, CSS, ছবি ◄── response ◄──┘
                 │
     HTML ─► DOM ──┐
                   ├─► render tree ─► layout ─► paint ─► composite ─► পর্দা
     CSS ─► CSSOM ─┘

উপসংহার: পাতা দ্রুত দেখাতে এই পথের প্রতিটি ধাপ ছোট করতে হয় — কম ও ছোট ফাইল, render-blocking CSS কম, ছবির মাপ আগে থেকে দেওয়া (পর্ব ৪৯)। পরবর্তী যেকোনো বদলে (যেমন JavaScript দিয়ে class যোগ) ব্রাউজার আবার style → layout → paint-এর যতটুকু দরকার, ততটুকু চালায়।

ঝালিয়ে নিন: পর্ব ০১, পর্ব ৪৯ · পারফরম্যান্স; নেটওয়ার্কের দিক বিস্তারিত: ইন্টারনেট কীভাবে কাজ করে

সংজ্ঞা: HTML 4.01 (১৯৯৯) ছিল ক্ষমাশীল নিয়মের markup ভাষা। XHTML 1.0 (W3C, ২০০০) সেই একই ট্যাগ XML-এর কড়া নিয়মে লেখার রূপ। HTML5 হলো WHATWG-এর নেতৃত্বে HTML-এর বড় পুনর্গঠন (W3C Recommendation ২০১৪), যা নতুন element আর ভুল HTML পড়ার নির্দিষ্ট নিয়ম আনে।

উপসংহার: আজকের HTML একটি Living Standard — কোনো সংস্করণ নম্বর নেই, নিয়মিত হালনাগাদ হয়। তাই “HTML5” শব্দটি প্রচলিত নাম হিসেবে ঠিক, কিন্তু প্রযুক্তিগতভাবে আমরা WHATWG-এর HTML Living Standard মেনে লিখি। একটি সূক্ষ্ম তথ্য যোগ করুন: XHTML লেখা বেশিরভাগ পাতা আসলে text/html হিসেবে পাঠানো হতো, তাই ব্রাউজার সেগুলো সাধারণ HTML হিসেবেই পড়ত — কড়া নিয়মের সুফল বাস্তবে প্রায় মেলেনি।

ঝালিয়ে নিন: পর্ব ০১, পর্ব ০৩

Tag হলো কোণ-বন্ধনীর চিহ্ন — শুরুর <a> আর শেষের </a>. Element হলো পুরো জিনিসটি — শুরুর tag, ভেতরের বিষয়বস্তু আর শেষের tag; DOM-এ প্রতিটি element একটি node. Attribute শুরুর tag-এর ভেতরে বাড়তি তথ্য, নাম="মান" আকারে।

<a href="contact.html" class="btn">যোগাযোগ</a>
 └tag┘ └─attribute─┘  └attribute┘ └বিষয়┘ └tag┘
└──────────────── পুরোটা একটি element ────────────────┘

Void element: যার ভেতরে কোনো বিষয়বস্তু থাকতে পারে না, তাই শেষের tag-ও নেই — <img>, <br>, <hr>, <input>, <meta>, <link>. <br />-এর স্ল্যাশ XHTML-এর অভ্যাস — HTML-এ বৈধ, কিন্তু প্রভাবহীন। আর <div /> লিখলে div বন্ধ হয় না.

ঝালিয়ে নিন: পর্ব ০৩ · প্রথম HTML পেজ

DOCTYPE ব্রাউজারকে বলে পাতাটি আধুনিক নিয়মে, অর্থাৎ standards mode-এ দেখাতে। এটি কোনো element নয়, শুধু একটি নির্দেশ। না লিখলে ব্রাউজার quirks mode-এ যায় — ১৯৯০-এর দশকের পুরোনো ব্রাউজারের কিছু ভুল আচরণ নকল করে, যেমন টেবিলের ভেতরে font-size উত্তরাধিকার সূত্রে না আসা বা কিছু মাপের হিসাব আলাদা হওয়া। ফলে একই CSS অপ্রত্যাশিত দেখায়। JavaScript-এ document.compatMode দেখলে standards mode-এ "CSS1Compat" আর quirks mode-এ "BackCompat" পাওয়া যায়।

ঝালিয়ে নিন: পর্ব ০৩

সংজ্ঞা: দুটিই অর্থহীন (generic) পাত্র — কোনো অর্থ যোগ করে না, শুধু CSS বা JavaScript-এর জন্য অংশ আলাদা করে। <div> বড় অংশ ঘিরে রাখে আর ডিফল্টে block; <span> লাইনের ভেতরের ছোট অংশ ঘিরে রাখে আর ডিফল্টে inline. মনে রাখুন, “block” আর “inline” আসলে CSS-এর display-এর মান, যা ব্রাউজারের ডিফল্ট stylesheet দেয় — CSS দিয়ে বদলানো যায়।

<style>
  div  { background: #dbeafe; width: 220px; margin: 8px 0; }
  span { background: #fde68a; width: 220px; margin: 20px; }
</style>
<div>প্রথম div — নিজের লাইনে</div>
<div>দ্বিতীয় div — আবার নতুন লাইনে</div>
<p>এই বাক্যের <span>এই অংশটি span</span> আর <span>এটিও span</span> — লাইন ভাঙেনি।</p>

উপসংহার: অর্থবহ element (<nav>, <button>, <strong>) না মিললে তবেই div বা span. সব জায়গায় div লিখলে তাকে বলে div soup — screen reader আর সার্চ ইঞ্জিন কাঠামো বোঝে না।

ঝালিয়ে নিন: পর্ব ০৪, পর্ব ২৩ · display আর normal flow

সংজ্ঞা: Semantic HTML মানে চেহারা নয়, অর্থ দেখে element বাছা — শিরোনামে <h1>–<h6>, তালিকায় <ul>, বোতামে <button>. লাভ তিনটি: screen reader কাঠামো শোনায়, সার্চ ইঞ্জিন বিষয় বোঝে, আর কোড পড়া সহজ হয়।

সীমা যোগ করুন: চোখে strong আর b দুটোই মোটা — পার্থক্য শুধু অর্থে। বেশিরভাগ screen reader ডিফল্টে এদের আলাদা স্বরে পড়ে না, তাই অর্থের জন্য শুধু এই ট্যাগের ওপর ভরসা না করে লেখাতেও স্পষ্ট বলুন। মোটা করার জন্যই মোটা করতে চাইলে CSS-এর font-weight.

ঝালিয়ে নিন: পর্ব ০৪ · লেখা ও অর্থবহ ট্যাগ

সংজ্ঞা: Absolute URL পুরো ঠিকানা — scheme, domain আর path সব লেখা থাকে, তাই যেকোনো জায়গা থেকে একই ফাইল বোঝায়। Relative path বর্তমান ফাইলের অবস্থান থেকে পথ বলে — ঠিকানার শুরুর অংশ ব্রাউজার নিজে বসিয়ে নেয়। ধরুন ফাইল-গঠন এমন:

site/
├── index.html
├── css/style.css
├── images/logo.png
└── blog/post.html      ← আমরা এখানে আছি

উপসংহার: নিজের সাইটের ভেতরের লিংকে relative, বাইরের সাইটে absolute. সাধারণ ভুল: Windows-এর মতো \ দিয়ে পথ লেখা বা C:\Users\... লিখে ফেলা — ওয়েবে সবসময় /, আর সার্ভারে বড়-ছোট অক্ষর আলাদা ধরা হতে পারে (Logo.png ≠ logo.png).

ঝালিয়ে নিন: পর্ব ০৫ · লিংক আর path

alt: ছবিটি দেখা না গেলে তার জায়গায় যে লেখা কাজ করবে — screen reader পড়ে, ছবি লোড না হলে দেখায়, সার্চ ইঞ্জিন ছবি বোঝে। ছবির কাজ লিখুন, “ছবি” শব্দটি নয়: লোগো-লিংকে “ABCL TECH — হোম”. শুধু সাজের ছবিতে alt="" — screen reader তখন এড়িয়ে যায়। alt একেবারে না দিলে অনেক screen reader ফাইলের নাম পড়ে ফেলে।

width/height: ছবি আসার আগেই ব্রাউজার এই দুই মান থেকে অনুপাত বুঝে জায়গা রেখে দেয়। না দিলে ছবি আসার পর নিচের লেখা ধাক্কা খেয়ে সরে যায় — একে বলে layout shift, যা CLS নম্বর খারাপ করে। CSS-এ max-width: 100%; height: auto; দিলে ছবি রেসপন্সিভও থাকে, অনুপাতও ঠিক থাকে।

যোগ করুন: প্রথম পর্দার নিচের ছবিতে loading="lazy", কিন্তু প্রধান (hero) ছবিতে নয় — সেটি দেরিতে এলে LCP খারাপ হয়।

ঝালিয়ে নিন: পর্ব ০৬, পর্ব ১২

তালিকা: ক্রম অর্থের অংশ না হলে <ul> (বাজারের ফর্দ), ক্রম জরুরি হলে <ol> (রান্নার ধাপ; start, reversed, type attribute আছে), আর নাম-বিবরণের জোড়ায় <dl> — ভেতরে <dt> (নাম) আর <dd> (বিবরণ)। ul আর ol-এর সরাসরি সন্তান শুধু <li>.

টেবিল: শুধু সারি-কলামের ডেটার জন্য — লেআউটের জন্য নয়। অংশগুলো: <caption> (নাম), <thead>, <tbody>, <tfoot>, শিরোনাম-ঘর <th> আর ডেটা-ঘর <td>. <th>-এ scope="col" বা scope="row" বলে শিরোনামটি কলামের না সারির — তখন screen reader প্রতিটি ঘরের সাথে তার শিরোনামও পড়ে। ঘর জোড়া লাগাতে colspan আর rowspan. সম্পূর্ণ মডেল কোড অংশ ৮-এর কো-০১-এ।

ঝালিয়ে নিন: পর্ব ০৭ · তালিকা আর টেবিল

HTML5 থেকে ভিডিও আর অডিও চলে কোনো plugin ছাড়াই। একাধিক <source> দিলে ব্রাউজার প্রথম যেটি চালাতে পারে সেটিই নেয়; শেষে থাকে fallback লেখা।

<video controls width="640" height="360" poster="cover.jpg" preload="metadata">
  <source src="class.webm" type="video/webm">
  <source src="class.mp4" type="video/mp4">
  <track kind="captions" src="class.bn.vtt" srclang="bn" label="বাংলা">
  আপনার ব্রাউজার ভিডিও চালাতে পারে না। <a href="class.mp4">ভিডিওটি নামিয়ে নিন</a>.
</video>

Caption কেন: যাঁরা শুনতে পান না, যাঁরা বাসে বা অফিসে শব্দ বন্ধ রেখে দেখেন, আর যাঁদের ভাষাটি দুর্বল — সবার জন্য। <track> ফাইলটি WebVTT আকারে লেখা হয়। মনে রাখুন, ব্রাউজারের autoplay নিয়ম অনুযায়ী শব্দসহ ভিডিও নিজে থেকে চলে না — autoplay সাধারণত muted-এর সাথেই কাজ করে।

<iframe>: অন্য একটি পাতা নিজের পাতার ভেতরে বসায় — YouTube ভিডিও, Google Map. সবসময় title দিন (screen reader-এ নাম), নিচের দিকে হলে loading="lazy", আর অচেনা বিষয়বস্তুতে sandbox দিয়ে ক্ষমতা সীমিত করুন।

ঝালিয়ে নিন: পর্ব ০৬ · ছবি, অডিও, ভিডিও আর iframe

সংজ্ঞা: <form>-এর action বলে ডেটা কোন ঠিকানায় যাবে, আর method বলে কীভাবে যাবে। GET ডেটাকে URL-এর query string-এ জুড়ে দেয়; POST ডেটা পাঠায় request-এর ভেতরে (body). কিছু না লিখলে method হয় GET, আর action না দিলে ডেটা যায় বর্তমান পাতার ঠিকানাতেই।

সাধারণ ভুল ধারণা: “POST নিরাপদ, কারণ এনক্রিপ্ট করা” — ভুল। POST-এর ডেটা শুধু URL-এ দেখা যায় না; এনক্রিপশন আসে HTTPS থেকে, দুই method-এর জন্যই। পাসওয়ার্ড কখনো GET-এ পাঠাবেন না, কারণ URL ব্রাউজারের history আর সার্ভারের log-এ থেকে যায়।

ঝালিয়ে নিন: পর্ব ০৮ · ফর্মের ভিত্তি

<label> ঘরটির নাম দেয় — screen reader ঘরে ঢুকলেই নামটি পড়ে, আর label-এ ক্লিক করলে ঘরটি focus হয় (checkbox-এ টিক পড়ে), ফলে ফোনে চাপার জায়গাও বড় হয়। দুই উপায়: <label for="phone"> আর <input id="phone"> জোড়া, অথবা input-কে label-এর ভেতরে রাখা।

Placeholder label-এর বিকল্প নয়: লিখতে শুরু করলেই মুছে যায় (কী লিখছিলেন মনে থাকে না), রং সাধারণত হালকা (পড়া কঠিন), আর অনেক অবস্থায় accessible name হিসেবে ভরসাযোগ্য নয়। placeholder শুধু উদাহরণ দেখাতে: placeholder="01XXXXXXXXX".

ঝালিয়ে নিন: পর্ব ০৮, পর্ব ৪৩

সংজ্ঞা: JavaScript ছাড়াই ব্রাউজার ফর্ম জমার আগে ঘরের মান যাচাই করে — একে বলে constraint validation. ভুল থাকলে জমা থামে আর ব্রাউজার নিজের বার্তা দেখায়।

• required — ঘর খালি রাখা যাবে না
• type="email", type="url", type="number" — ধরন যাচাই; ফোনে ঠিক কি-বোর্ডও খোলে
• min, max, step, minlength, maxlength — সীমা
• pattern="01[3-9][0-9]{8}" — regular expression দিয়ে নিজস্ব নিয়ম (এখানে বাংলাদেশের ১১ অঙ্কের মোবাইল নম্বরের ধাঁচ)
• CSS-এ :user-invalid — ব্যবহারকারী ঘরটি ছোঁয়ার পরেই লাল দাগ (Baseline Widely available)

কেন server-side লাগে: client-side validation শুধু ব্যবহারকারীর সুবিধা — দ্রুত ভুল দেখায়। কিন্তু যে কেউ DevTools-এ required মুছে দিতে পারেন, বা ব্রাউজার ছাড়াই সরাসরি সার্ভারে request পাঠাতে পারেন। তাই নিরাপত্তা আর ডেটার শুদ্ধতার জন্য server-side validation বাধ্যতামূলক। এক লাইনে: “client-side সুবিধার জন্য, server-side নিরাপত্তার জন্য।”

ঝালিয়ে নিন: পর্ব ০৯ · ফর্মের কন্ট্রোল আর validation

দুই ক্ষেত্রেই দলটিকে <fieldset> আর <legend>-এ মুড়ে দিন — screen reader তখন প্রশ্নটিও পড়ে (“পেমেন্ট পদ্ধতি, bKash, radio button”). আর মনে রাখুন, টিক না দেওয়া checkbox ফর্মের ডেটায় যায়ই না।

ঝালিয়ে নিন: পর্ব ০৯

সংজ্ঞা: এই element-গুলো পাতার বড় অংশগুলোর ভূমিকা বলে। screen reader এদের landmark হিসেবে চেনে, তাই ব্যবহারকারী এক চাপে “মূল অংশ” বা “মেনু”-তে লাফাতে পারেন।

article বনাম section: পরীক্ষা হলো “এটা কি আলাদা করে অন্য সাইটে বা RSS-এ ছাপলেও অর্থবহ?” হ্যাঁ হলে <article> — একটি খবর, ব্লগ পোস্ট, পণ্যের কার্ড, একটি মন্তব্য। না হলে, অর্থাৎ বড় কিছুর একটি অধ্যায় হলে <section> — “আমাদের সেবা”, “প্রশ্নোত্তর”. একটি article-এর ভেতরে section থাকতে পারে, আবার একটি section-এর ভেতরে কয়েকটি article-ও। শুধু CSS-এর জন্য মোড়ক লাগলে কোনোটিই নয় — <div>.

উপসংহার: semantic element নিজে চেহারা দেয় না; এদের দাম কাঠামোয় — অ্যাক্সেসিবিলিটি, SEO আর কোড পড়ার সহজতা। ছোট একটি কঙ্কালের মডেল কোড অংশ ৮-এর কো-০৩-এ।

ঝালিয়ে নিন: পর্ব ১০ · Semantic layout

dialog আর popover দুটোই top layer-এ বসে, তাই কোনো z-index যুদ্ধ লাগে না। modal dialog খুললে বাকি পাতা inert হয়ে যায় — কি-বোর্ডের focus বাইরে যায় না। এগুলো নিজে থেকেই কি-বোর্ড আর screen reader সামলায় — এখানেই হাতে বানানো div-modal-এর চেয়ে এদের জোর।

ঝালিয়ে নিন: পর্ব ১১ · details, dialog আর popover

সংজ্ঞা: Accessibility মানে পাতাটি সবাই ব্যবহার করতে পারবেন — দৃষ্টি, শ্রবণ, চলাফেরা বা বোধের প্রতিবন্ধিতা থাকলেও, আর ভাঙা হাত বা রোদে ঝলসানো পর্দার মতো সাময়িক অবস্থাতেও। আন্তর্জাতিক মানদণ্ড WCAG (বর্তমান সংস্করণ 2.2), তিন স্তরে: A, AA, AAA — সাধারণ লক্ষ্য AA.

চার নীতি — POUR:

1. Perceivable (বোঝার মতো করে পৌঁছানো): ছবিতে alt, ভিডিওতে caption, লেখা আর পটভূমির পর্যাপ্ত contrast (সাধারণ লেখায় অন্তত 4.5:1).
2. Operable (চালানো যায়): সব কাজ শুধু কি-বোর্ডে; দৃশ্যমান focus; চলমান জিনিস থামানোর উপায়; যথেষ্ট বড় চাপার জায়গা।
3. Understandable (বোধগম্য): lang দেওয়া, পরিষ্কার label আর error বার্তা, সব পাতায় একই রকম নেভিগেশন।
4. Robust (টেকসই): বৈধ, অর্থবহ HTML, যাতে ব্রাউজার আর সহায়ক প্রযুক্তি ঠিকভাবে বোঝে।

ব্রাউজার কী করে: HTML থেকে ব্রাউজার একটি accessibility tree বানায় — প্রতিটি অংশের role (ভূমিকা), name (নাম) আর state (অবস্থা)। screen reader সেই গাছ পড়ে। <button> নিজেই role “button”, Tab-এ আসে, Enter আর Space-এ চলে; একটি <div onclick>-এর এসবের কিছুই নেই।

ARIA-র প্রথম নিয়ম: ARIA (WAI-ARIA) হলো এমন attribute (role, aria-label, aria-expanded …), যা accessibility tree-তে তথ্য যোগ বা বদল করে — কিন্তু কোনো আচরণ যোগ করে না। প্রথম নিয়ম: যে কাজের জন্য আসল HTML element আছে, সেটিই ব্যবহার করুন; ARIA দিয়ে অন্য element-কে সেই ভূমিকায় সাজাবেন না।

<!-- ভুল: role দিলেও Tab, Enter, Space কিছুই নিজে কাজ করে না -->
<div role="button" onclick="save()">সংরক্ষণ</div>

<!-- ঠিক: সব আচরণ বিনা খরচে -->
<button type="button" onclick="save()">সংরক্ষণ</button>

উপসংহার: ভুল ARIA, ARIA না থাকার চেয়েও খারাপ — কারণ সে screen reader-কে মিথ্যা বলে। যাচাইয়ে তিন স্তর: শুধু কি-বোর্ডে পুরো পাতা চালানো, Lighthouse বা axe-এর মতো স্বয়ংক্রিয় পরীক্ষা (যা সব সমস্যা ধরে না), আর একটি আসল screen reader (যেমন NVDA) দিয়ে শোনা।

ঝালিয়ে নিন: পর্ব ১২ · অ্যাক্সেসিবিলিটি, পর্ব ৪৫ · অ্যাক্সেসিবল CSS

tabindex ঠিক করে একটি element কি-বোর্ডের focus পাবে কি না, আর কোন ক্রমে।

• tabindex="0" — সাধারণভাবে focus পায় না এমন element (যেমন স্ক্রল করা একটি টেবিলের পাত্র) Tab-এর স্বাভাবিক ক্রমে যোগ হয়।
• tabindex="-1" — Tab-এ আসে না, কিন্তু JavaScript-এর focus() দিয়ে focus দেওয়া যায় (যেমন error-এর সারাংশে বা dialog-এর শিরোনামে)।
• ধনাত্মক (1, 2 …) — পাতার বাকি সবকিছুর আগে আসে, স্বাভাবিক ক্রম ভেঙে যায়। এড়িয়ে চলুন; ক্রম ঠিক করুন HTML-এর ক্রম ঠিক করে।

বোতাম, লিংক, input নিজেরাই focus পায় — তাদের tabindex লাগে না।

ঝালিয়ে নিন: পর্ব ১২

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>বাংলায় HTML শিখুন | ABCL TECH</title>
  <meta name="description" content="শুরু থেকে আধুনিক HTML…">
  <link rel="canonical" href="https://example.com/html/">
  <meta property="og:title" content="বাংলায় HTML শিখুন">
  <meta property="og:image" content="https://example.com/share.jpg">
  <link rel="icon" href="/favicon.ico">
</head>

• charset — UTF-8; ফাইলের একেবারে শুরুর দিকে, নইলে বাংলা ভাঙতে পারে।
• viewport — ফোনে পাতাকে ডেস্কটপের মাপে ছোট করে দেখানো বন্ধ করে; রেসপন্সিভ ডিজাইনের প্রথম শর্ত।
• title — ট্যাবের নাম আর সার্চ ফলাফলের নীল শিরোনাম; প্রতিটি পাতায় আলাদা।
• description — সার্চ ফলাফলের নিচের ছোট বিবরণ হিসেবে প্রায়ই দেখানো হয়; সরাসরি র‍্যাংক বাড়ায় না, কিন্তু ক্লিক টানে।
• canonical — একই বিষয়ের কয়েকটি URL থাকলে কোনটি আসল।
• Open Graph — Facebook, WhatsApp, LinkedIn-এ লিংক শেয়ার করলে যে ছবি-শিরোনাম-বিবরণের কার্ড দেখায়।

<meta name="keywords"> লিখলে ক্ষতি নেই, কিন্তু Google বহু বছর ধরে এটি র‍্যাংকিংয়ে ব্যবহার করে না — পরীক্ষায় এটিকে “SEO-র প্রধান tag” লিখবেন না।

ঝালিয়ে নিন: পর্ব ১৩ · head, meta, SEO

1. UTF-8: ফাইল UTF-8-এ সেভ, আর <meta charset="utf-8">. নইলে লেখা অর্থহীন চিহ্নে বদলে যায় (mojibake).
2. lang: <html lang="bn"> — screen reader বাংলা উচ্চারণ বাছে, ব্রাউজার ঠিক ফন্ট আর hyphenation বোঝে, সার্চ ইঞ্জিন ভাষা চেনে। মাঝে ইংরেজি অনুচ্ছেদ থাকলে সেখানে lang="en".
3. Unicode, ANSI নয়: বিজয়ের মতো পুরোনো ANSI ফন্টে লেখা আসলে ইংরেজি অক্ষরের ওপর বাংলা চেহারা — সার্চে পাওয়া যায় না, কপি করলে উল্টাপাল্টা হয়, screen reader পড়তে পারে না।
4. ফন্ট: বাংলা web font (যেমন Noto Sans Bengali, Hind Siliguri), সাথে fallback stack; font-display: swap; বাংলার জন্য সাধারণত ইংরেজির চেয়ে বড় line-height (১.৬–১.৮), কারণ মাত্রা, কার আর যুক্তাক্ষর ওপর-নিচে জায়গা নেয়।
5. সাবধানতা: বাংলা লেখায় letter-spacing দিলে যুক্তাক্ষর আর কারের গঠন ভাঙতে পারে।

ঝালিয়ে নিন: পর্ব ১৪ · ওয়েবে বাংলা; টাইপিং-এর দিক: বাংলা টাইপিং ও Unicode

coaching-site/
├── index.html        (হোম)
├── courses.html      (কোর্স ও ফি)
├── contact.html      (যোগাযোগ ফর্ম)
├── css/style.css
└── images/

প্রতিটি পাতায় একই কঙ্কাল: <!DOCTYPE html>, <html lang="bn">, নিজস্ব <title> ও description, একটি skip link, <header>-এর ভেতরে <nav>, একটি <main> আর তাতে একটি <h1>, শেষে <footer>. মেনুতে বর্তমান পাতার লিংকে aria-current="page" — screen reader “বর্তমান পাতা” বলে, আর CSS দিয়ে আলাদা চেহারাও দেওয়া যায়। ফাইলের নাম ছোট হাতের, ফাঁকা জায়গা ছাড়া (contact-us.html, Contact Us.html নয়)।

যোগ করুন: সব পাতায় হাতে একই header কপি করলে একটিতে ভুল থেকে যায় — বড় সাইটে template, server-side include বা static site generator লাগে। শেষে validator.w3.org-এ প্রতিটি পাতা যাচাই।

ঝালিয়ে নিন: পর্ব ১৫ · মাইলস্টোন

<!-- ১. inline: element-এর style attribute -->
<p style="color: green;">…</p>

<!-- ২. internal: head-এর <style> -->
<style> p { color: green; } </style>

<!-- ৩. external: আলাদা ফাইল -->
<link rel="stylesheet" href="css/style.css">

External সবচেয়ে ভালো — এক ফাইল বদলালে পুরো সাইট বদলায়, আর ব্রাউজার ফাইলটি cache করে রাখে বলে পরের পাতা দ্রুত খোলে। Internal এক পাতার বিশেষ নিয়ম বা ইমেইলের মতো জায়গায়; দক্ষ সাইটে প্রথম পর্দার জরুরি CSS (critical CSS) এভাবে বসানো হয়। Inline এড়িয়ে চলুন — বারবার একই কথা লিখতে হয়, আর selector দিয়ে হারানো কঠিন।

সাধারণ ভুল ধারণা: “internal সবসময় external-কে হারায়” — না। একই specificity হলে যে নিয়ম পরে আসে সে জেতে; <link>টি <style>-এর পরে থাকলে external জিতবে। inline style আলাদা: সে প্রায় সব selector-কে হারায় (শুধু !important তাকে হারাতে পারে)।

ঝালিয়ে নিন: পর্ব ১৬ · CSS-এর সাথে পরিচয়

   selector        declaration block
  ┌───┴───┐ ┌──────────────┴───────────────┐
  .price   {  color: crimson;  font-size: 1.25rem;  }
             └─┬─┘  └──┬──┘   └───────┬────────┘
            property  value     আরেকটি declaration

Selector বলে কোন element; declaration block-এর ভেতরের প্রতিটি declaration একটি property আর তার value, মাঝে কোলন, শেষে সেমিকোলন। ভুল বানানের declaration ব্রাউজার চুপচাপ বাদ দেয় — বাকিগুলো চলতে থাকে।

ঝালিয়ে নিন: পর্ব ১৬

উপসংহার: স্টাইলের জন্য class. id-র specificity এত বেশি যে পরে তাকে হারাতে আরও ভারী selector বা !important লাগে — একে বলে specificity-র যুদ্ধ। id রাখুন লিংক, label আর JavaScript-এর জন্য।

ঝালিয়ে নিন: পর্ব ১৭ · Selector

Combinator দুটি selector-এর মধ্যে সম্পর্ক বলে — HTML গাছে কে কার ভেতরে বা পাশে।

লক্ষ করুন, combinator নিজে specificity যোগ করে না — ul > li-এর specificity (0,0,2), দুটি type selector-এর যোগফল। আর sibling combinator শুধু পরের দিকে দেখে; আগের ভাই-বোনকে ধরতে লাগে :has() (পর্ব ৩৪)।

ঝালিয়ে নিন: পর্ব ১৭

সংজ্ঞা: একই element-এর একই property-তে কয়েকটি declaration লাগলে ব্রাউজার একটি নির্দিষ্ট ক্রমে বিচার করে একটিকে জয়ী বাছে — এই প্রক্রিয়ার নাম cascade. আর কোনো property-তে কোনো declaration-ই না লাগলে কিছু property মা-বাবার মান নিয়ে নেয় — একে বলে inheritance.

Cascade-এর বিচারের ক্রম (আগের ধাপে মীমাংসা হলে পরের ধাপে যায় না):

1. উৎস ও গুরুত্ব: ব্রাউজারের ডিফল্ট < ব্যবহারকারীর < লেখকের (আপনার) CSS; !important দিলে ক্রম উল্টে যায়।
2. element-এর নিজের style attribute — selector-ভিত্তিক নিয়মকে হারায়।
3. Cascade layer (@layer): পরে ঘোষিত layer জেতে; layer-এর বাইরের সাধারণ CSS সব layer-কে হারায়।
4. Specificity: selector কত নির্দিষ্ট — তিন ঘরের সংখ্যা (A, B, C).
5. উৎসের ক্রম: সব সমান হলে যে পরে লেখা, সে জেতে।

Specificity গোনা: A = id-এর সংখ্যা; B = class, attribute selector আর pseudo-class; C = type selector আর pseudo-element. * আর combinator শূন্য; :where() সবসময় শূন্য; :is(), :not(), :has() নেয় তাদের ভেতরের সবচেয়ে ভারী selector-এর মান। তুলনা হয় বাঁ থেকে — (1,0,0) সবসময় (0,15,0)-কে হারায়।

<style>
  p              { color: gray; }    /* (0,0,1) */
  .note          { color: green; }   /* (0,1,0) */
  #tip           { color: blue; }    /* (1,0,0) */
  article p.note { color: orange; }  /* (0,1,2) */
  p.note         { color: red; }     /* (0,1,1) — সবার শেষে লেখা */
</style>
<article>
  <p id="tip" class="note">প্রথম লেখা — কোন রং?</p>
  <p class="note">দ্বিতীয় লেখা — কোন রং?</p>
  <p>তৃতীয় লেখা — কোন রং?</p>
</article>
<script>
  document.querySelectorAll('p').forEach((p, i) =>
    console.log('p' + (i + 1) + ':', getComputedStyle(p).color));
</script>

Inheritance: লেখা-সংক্রান্ত property — color, font-family, font-size, line-height — সাধারণত উত্তরাধিকার সূত্রে আসে; বাক্স-সংক্রান্ত — margin, padding, border, background — আসে না। জোর করে আনতে inherit, property-র প্রাথমিক মানে (ব্রাউজারের ডিফল্ট stylesheet-এর মান নয় — যেমন div-এ display: initial দিলে inline হয়) ফেরাতে initial, স্বাভাবিক আচরণে ফেরাতে unset. মনে রাখুন: উত্তরাধিকারের মান সবচেয়ে দুর্বল — element-এ সরাসরি লাগা p { color: gray; }-এর মতো সাধারণ নিয়মও মা-বাবার #id থেকে আসা রংকে হারায়।

উপসংহার: বড় প্রজেক্টে specificity কম ও সমান রাখুন (একটি class-ভিত্তিক নিয়ম), ক্রম সামলান @layer দিয়ে, আর !important রাখুন শুধু utility বা অ্যাক্সেসিবিলিটির জরুরি ক্ষেত্রে। DevTools-এর Styles প্যানেলে কাটা দাগ দেওয়া declaration দেখায় কে হেরেছে।

ঝালিয়ে নিন: পর্ব ১৮ · Cascade, specificity আর inheritance, পর্ব ৩৫ · @layer

অংশ ১-এর ডায়াগ্রামে box model-এর পুরো উত্তর আছে। এখানে মূল পার্থক্য: content-box (ডিফল্ট)-এ width শুধু content-এর মাপ, padding আর border তার বাইরে যোগ হয়। border-box-এ width border পর্যন্ত পুরো বাক্সের মাপ, padding আর border তার ভেতর থেকে জায়গা নেয়। margin দুই ক্ষেত্রেই বাইরে।

<style>
  .box { width: 200px; padding: 20px; border: 5px solid #2563eb;
         margin: 10px 0; background: #dbeafe; }
  .bb  { box-sizing: border-box; }
</style>
<div class="box">content-box</div>
<div class="box bb">border-box</div>
<script>
  (function m() {
    if (!document.body.offsetWidth) return setTimeout(m, 50);
    document.querySelectorAll('.box').forEach(b =>
      console.log(b.textContent + ': ' + b.offsetWidth + 'px'));
  })();
</script>

এ কারণেই আধুনিক CSS-এর শুরুতে প্রায় সবাই লেখেন *, *::before, *::after { box-sizing: border-box; } — width: 50% দিলে padding যোগ করেও বাক্স ঠিক অর্ধেকই থাকে।

ঝালিয়ে নিন: পর্ব ১৯ · Box model

সংজ্ঞা: normal flow-তে ওপর-নিচে পাশাপাশি দুটি block-এর vertical margin যোগ না হয়ে মিলে একটি হয় — বড়টির মাপে। একটি <p>-এর margin-bottom: 20px আর পরেরটির margin-top: 30px হলে মাঝের ফাঁক 50px নয়, 30px. একে বলে margin collapsing.

আরেক রূপ: মা-বাবার কোনো border, padding বা নতুন formatting context না থাকলে প্রথম সন্তানের margin-top মা-বাবার বাইরে “বেরিয়ে” যায় — মনে হয় মা-বাবাই নিচে নেমেছে।

যেখানে হয় না: পাশাপাশি (horizontal) margin; flex বা grid-এর item; float আর absolute element; inline-block. মা-বাবায় padding বা border দিলে, বা display: flow-root দিয়ে নতুন block formatting context বানালে বেরিয়ে যাওয়া থামে। আধুনিক সমাধান: ফাঁক দিতে flex বা grid-এ gap.

ঝালিয়ে নিন: পর্ব ১৯

<style>
  .card { font-size: 20px; }
  .em   { font-size: 1.5em;  padding: 1em;  background: #fde68a; }
  .rem  { font-size: 1.5rem; padding: 1rem; background: #bbf7d0; }
</style>
<div class="card">
  <p class="em">1.5em লেখা</p>
  <p class="rem">1.5rem লেখা</p>
</div>
<script>
  for (const c of ['em', 'rem']) {
    const s = getComputedStyle(document.querySelector('.' + c));
    console.log(c + ' → font-size ' + s.fontSize + ', padding ' + s.paddingTop);
  }
</script>

যোগ করুন: font-size px-এ স্থির করলে ব্যবহারকারী ব্রাউজারের সেটিংসে ডিফল্ট লেখা বড় করলেও তা মানে না; rem বা em মানে। তাই লেখার মাপে rem অ্যাক্সেসিবিলিটির দিক থেকেও ভালো।

ঝালিয়ে নিন: পর্ব ২০ · একক আর রং

px একটি স্থির (absolute) একক — তবে এটি পর্দার আসল বিন্দু নয়, CSS pixel; উচ্চ-ঘনত্বের ফোনে একটি CSS pixel কয়েকটি আসল বিন্দু (device pixel ratio) জুড়ে আঁকা হয়। % একটি আপেক্ষিক একক — অন্য কোনো মাপের শতাংশ, আর কোন মাপের তা property অনুযায়ী বদলায়:

কখন কোনটি: border, ছায়া, ছোট স্থির মাপে px; চওড়া যাতে পাত্রের সাথে বাড়ে-কমে সেখানে % (সাথে max-width); লেখায় rem.

ঝালিয়ে নিন: পর্ব ২০

color: crimson;                  /* নাম */
color: #0d6efd;                  /* hex — #RRGGBB, ছোট রূপ #RGB, স্বচ্ছতাসহ #RRGGBBAA */
color: rgb(13 110 253 / 80%);    /* লাল, সবুজ, নীল / alpha */
color: hsl(216 98% 52%);         /* hue, saturation, lightness */
color: oklch(60% 0.2 260);       /* lightness, chroma, hue */
border-color: currentColor;      /* নিজের color-এর মান */

oklch(): HSL-এ একই lightness-এর হলুদ আর নীল চোখে মোটেই সমান উজ্জ্বল দেখায় না। oklch মানুষের চোখের অনুভূতির কাছাকাছি করে বানানো (perceptually uniform) — L একই রাখলে রং বদলালেও উজ্জ্বলতা প্রায় একই থাকে, তাই রঙের সিঁড়ি (palette) বানানো সহজ; আর এটি sRGB-র বাইরের উজ্জ্বল রংও প্রকাশ করতে পারে। ২০২৬ সালের হিসাবে এটি Baseline Widely available.

অ্যাক্সেসিবিলিটি: WCAG AA-তে সাধারণ লেখা আর পটভূমির contrast ratio অন্তত 4.5:1, বড় লেখায় 3:1; আর শুধু রং দিয়ে তথ্য বোঝাবেন না (“লাল ঘরগুলো ভুল” — সাথে আইকন বা লেখাও দিন)।

ঝালিয়ে নিন: পর্ব ২০, পর্ব ৪৫

@font-face {
  font-family: "Hind Siliguri";
  src: url("fonts/hind-siliguri-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
body { font-family: "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif; }

@font-face ব্রাউজারকে ফন্ট ফাইলের ঠিকানা দেয়; আধুনিক ফরম্যাট WOFF2 (সবচেয়ে ছোট)। ফন্ট নামতে সময় লাগে — font-display: swap বলে ততক্ষণ fallback ফন্টে লেখা দেখাও, ফন্ট এলে বদলে দাও। না দিলে কিছু ব্রাউজার কিছুক্ষণ লেখা অদৃশ্য রাখে (FOIT). Font stack হলো পছন্দের তালিকা — প্রথমটি না পেলে পরেরটি, শেষে একটি generic family (sans-serif).

যোগ করুন: শুধু দরকারি weight আনুন (৪০০ আর ৭০০), বাংলা-ইংরেজির আলাদা unicode-range subset দিন, আর Google Fonts ব্যবহার করলেও নিজের সার্ভারে রাখার (self-hosting) বিকল্পটি জানুন।

ঝালিয়ে নিন: পর্ব ২১ · টাইপোগ্রাফি আর ওয়েব ফন্ট, পর্ব ১৪

Normal flow: কোনো লেআউট-CSS না দিলে ব্রাউজার যেভাবে সাজায় — block-গুলো ওপর থেকে নিচে একটির পর একটি, আর inline-গুলো বাঁ থেকে ডানে লেখার লাইনে, জায়গা ফুরালে পরের লাইনে। ভালো লেআউট normal flow-এর বিরুদ্ধে নয়, তার ওপর গড়ে ওঠে।

আরও গভীরে বলতে চাইলে: আধুনিক spec-এ display আসলে দুই অংশের — বাইরের আচরণ (block না inline) আর ভেতরের সাজ (flow, flex, grid). display: inline flex লেখা inline-flex-এর সমান (two-value display).

ঝালিয়ে নিন: পর্ব ২৩ · Normal flow, display আর overflow

<style>
  .row span { display: inline-block; width: 64px; padding: 8px 0;
              text-align: center; background: #bfdbfe; }
  .row .vh { visibility: hidden; }
  .row .dn { display: none; }
  .row .op { opacity: 0; }
</style>
<p class="row">visibility: <span>ক</span><span class="vh">খ</span><span>গ</span></p>
<p class="row">display: <span>ক</span><span class="dn">খ</span><span>গ</span></p>
<p class="row">opacity: <span>ক</span><span class="op">খ</span><span>গ</span></p>

উপসংহার: একেবারে সরাতে display: none (বা HTML-এর hidden attribute); জায়গা রেখে লুকাতে visibility; fade-এর জন্য opacity, তবে শেষে visibility বা display দিয়ে ক্লিক আর focus বন্ধ করুন। চোখ থেকে লুকিয়ে শুধু screen reader-এর জন্য রাখতে চাইলে এগুলোর কোনোটিই নয় — visually-hidden class.

ঝালিয়ে নিন: পর্ব ২৩, পর্ব ১২

সংজ্ঞা: position ঠিক করে একটি element normal flow-তে থাকবে কি না, আর top, right, bottom, left (একসাথে inset) কিসের সাপেক্ষে মাপা হবে।

.card  { position: relative; }              ┌──────── .card ────────┐
.badge { position: absolute;                │                  [NEW]│ ← top: 8px
         top: 8px; right: 8px; }            │   product photo       │   right: 8px
                                            │   Tk 450              │
                                            └───────────────────────┘
badge flow থেকে বেরিয়ে গেছে — কার্ডের লেখা তার জন্য জায়গা রাখে না।

সূক্ষ্ম তথ্য (এখানেই বেশি নম্বর): (১) কোনো পূর্বপুরুষে transform, filter বা কিছু contain মান থাকলে সে-ই absolute আর এমনকি fixed সন্তানের containing block হয়ে যায় — তখন fixed আর পর্দায় স্থির থাকে না। (২) sticky কাজ না করার সাধারণ কারণ: top-এর মতো কোনো সীমা দেওয়া হয়নি, বা কোনো পূর্বপুরুষে overflow: hidden/auto আছে, ফলে সে সেই পূর্বপুরুষের ভেতরেই আটকায়। (৩) position static নয় এমন element-এ z-index কাজ করে (flex ও grid item-এও)।

উপসংহার: পাতার লেআউট position দিয়ে নয় — flex আর grid দিয়ে; position রাখুন স্তরের ওপর ভাসানো ছোট জিনিসের জন্য। আর fixed বা sticky header যেন লেখা ঢেকে না দেয়, সেজন্য scroll-padding-top. মডেল কোড: অংশ ৮-এর কো-০৬।

ঝালিয়ে নিন: পর্ব ২৪ · position আর z-index

Stacking context হলো স্তরের একটি আলাদা দল। একটি দলের ভেতরের element-গুলো নিজেদের মধ্যে z-index অনুযায়ী সাজে, কিন্তু পুরো দলটি বাইরের জগতে একটিই স্তর হিসেবে বসে। তাই মা-বাবার z-index 1 হলে ভেতরের সন্তানের z-index 9999 হলেও সে z-index 2 থাকা মা-বাবার ভাইয়ের ওপরে উঠতে পারে না — যেমন একটি দালানের পাঁচতলা কখনো পাশের উঁচু দালানের দশতলার ওপরে ওঠে না।

নতুন stacking context তৈরি করে: <html>; position দেওয়া আর z-index auto নয় এমন element; position: fixed বা sticky; opacity ১-এর কম; transform, filter; isolation: isolate; z-index দেওয়া flex/grid item ইত্যাদি।

সমাধান: DevTools-এ দেখুন কোন পূর্বপুরুষ context বানাচ্ছে; z-index দিন context-এর মূলে, ভেতরে নয়; অথবা modal আর মেনুর জন্য <dialog> বা popover ব্যবহার করুন — তারা top layer-এ বসে, সব context-এর ওপরে। z-index-এর জন্য ছোট একটি মাপের সিঁড়ি (১, ১০, ১০০) রাখুন, ৯৯৯৯-এর প্রতিযোগিতা নয়।

ঝালিয়ে নিন: পর্ব ২৪

overflow ঠিক করে বাক্সের বাইরে উপচে পড়া বিষয়বস্তুর কী হবে: visible (ডিফল্ট — বাইরে দেখা যায়), hidden (কেটে যায়, তবে স্ক্রিপ্টে স্ক্রল করা যায়), clip (একেবারে কাটা, স্ক্রল-পাত্রও হয় না), scroll (সবসময় স্ক্রলবার), auto (দরকার হলে স্ক্রলবার)। overflow-x আর overflow-y আলাদা করেও দেওয়া যায়।

.title {
  white-space: nowrap;      /* এক লাইনে রাখো */
  overflow: hidden;         /* বাড়তিটা কাটো */
  text-overflow: ellipsis;  /* কাটা জায়গায় … */
}

একাধিক লাইনের পর “…” দিতে line-clamp কৌশল (পর্ব ২৩)। সাবধান: hidden বা auto দিলে বাক্সটি স্ক্রল-পাত্র হয়ে যায়, আর তার ভেতরের position: sticky তখন পাতার নয়, এই বাক্সের স্ক্রলের সাপেক্ষে আটকায়।

ঝালিয়ে নিন: পর্ব ২৩

Flexbox এক দিকে সাজানোর লেআউট। পাত্রে display: flex দিলে সরাসরি সন্তানেরা হয় flex item, আর তারা সাজে main axis বরাবর — flex-direction: row-এ বাঁ থেকে ডানে (বাংলা-ইংরেজির মতো বাঁ-থেকে-ডান লেখায়), column-এ ওপর থেকে নিচে। তার আড়াআড়ি দিকটি cross axis.

flex-direction: row
            main axis ─────────────►
  ┌────────────────────────────────────┐  ▲
  │ [Logo]  [Home] [Courses] [Contact] │  │ cross axis
  └────────────────────────────────────┘  ▼

• justify-content — main axis বরাবর বাড়তি জায়গা ভাগ: flex-start, center, space-between, space-around, space-evenly.
• align-items — cross axis বরাবর প্রতিটি item-এর অবস্থান: stretch (ডিফল্ট), flex-start, center, baseline.

ফাঁদ: flex-direction: column দিলে অক্ষ দুটি অদলবদল হয় — তখন justify-content কাজ করে ওপর-নিচে, align-items ডানে-বাঁয়ে। আর item-গুলোর মাঝে ফাঁক দিতে margin নয়, gap.

ঝালিয়ে নিন: পর্ব ২৫ · Flexbox

flex তিনটি property-র সংক্ষিপ্ত রূপ: flex-grow (বাড়তি জায়গার কত ভাগ নেবে), flex-shrink (জায়গা কম পড়লে কত ভাগ ছাড়বে), flex-basis (ভাগাভাগির আগে শুরুর মাপ)।

পরীক্ষার প্রিয় ফাঁদ: flex: 1 দেওয়া item-এর ভেতরে লম্বা URL বা চওড়া টেবিল থাকলে সে ছোট হতে চায় না, পাতা পাশে সরে যায়। কারণ flex item-এর min-width-এর ডিফল্ট auto — সে নিজের ভেতরের সবচেয়ে চওড়া জিনিসের (min-content) চেয়ে ছোট হয় না। সমাধান: item-এ min-width: 0.

ঝালিয়ে নিন: পর্ব ২৫, পর্ব ২৬

সংজ্ঞা: Flexbox এক মাত্রার লেআউট — একবারে একটি সারি অথবা একটি কলাম। CSS Grid দুই মাত্রার — সারি আর কলাম একসাথে, যেন একটি ছকে ঘর ভাগ করা।

<style>
  .flex, .grid { width: 320px; gap: 8px; margin-bottom: 12px; }
  .flex { display: flex; flex-wrap: wrap; }
  .flex div { flex: 1 1 80px; }
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); }
  .flex div, .grid div { background: #c7d2fe; padding: 8px; }
</style>
<p>flex + wrap:</p>
<div class="flex"><div>চাল</div><div>ডাল</div><div>তেল</div><div>লবণ</div><div>চিনি</div></div>
<p>grid, ৩ কলাম:</p>
<div class="grid"><div>চাল</div><div>ডাল</div><div>তেল</div><div>লবণ</div><div>চিনি</div></div>

উপসংহার: প্রতিযোগিতা নয়, সহযোগিতা — পাতার কাঠামো grid-এ, প্রতিটি কার্ডের ভেতরের সারি flex-এ। এক লাইনে মনে রাখুন: “এক দিকে সাজাতে flex, ছকে বসাতে grid.”

ঝালিয়ে নিন: পর্ব ২৫, পর্ব ২৭, পর্ব ২৯

• fr — স্থির মাপের track বসানোর পর বাকি জায়গার এক ভাগ। 200px 1fr 2fr: প্রথম কলাম 200px, বাকি জায়গার এক-তৃতীয়াংশ দ্বিতীয়টি, দুই-তৃতীয়াংশ তৃতীয়টি।
• repeat(3, 1fr) — একই track বারবার না লিখে।
• minmax(200px, 1fr) — track অন্তত 200px, জায়গা থাকলে এক ভাগ পর্যন্ত বাড়বে।

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1rem;
}

এই এক লাইনেই media query ছাড়া রেসপন্সিভ গ্যালারি: যত কলাম ২০০px করে ধরে, ততটি; ফোনে একটি। min(200px, 100%) খুব সরু পর্দায় 200px-এর চেয়ে ছোট পাত্রেও উপচে পড়া আটকায়।

auto-fill বনাম auto-fit: দুটিই যতগুলো কলাম ধরে ততগুলো বানায়। পার্থক্য দেখা যায় শুধু item কম হলে — ধরুন ১০০০px চওড়া পাত্রে মাত্র দুটি কার্ড। auto-fill খালি কলামগুলোও রেখে দেয়, তাই দুটি কার্ড বাঁয়ে ২০০px-এর কাছাকাছি চওড়ায় বসে, ডানে ফাঁকা। auto-fit খালি কলামগুলোকে শূন্যে গুটিয়ে ফেলে, তাই দুটি কার্ড বেড়ে পুরো চওড়া ভাগ করে নেয়। কার্ড বেশি হলে দুটি একই রকম দেখায়।

ঝালিয়ে নিন: পর্ব ২৭, পর্ব ২৮ · auto-fit, minmax আর subgrid

float এসেছিল পত্রিকার মতো লেখা ছবির চারপাশে ঘোরানোর জন্য — ছবি বাঁয়ে, লেখা তার ডানে আর নিচে বয়ে চলে। ২০০০-এর দশকে আর কোনো ভালো উপায় না থাকায় ডেভেলপাররা float দিয়েই কলাম-লেআউট বানাতেন; float-এর পরে মা-বাবার উচ্চতা ভেঙে পড়ত, তাই লাগত clearfix-এর মতো কৌশল।

আজ লেআউটের জন্য float ঠিক নয় — flexbox আর grid পরিষ্কার, রেসপন্সিভ আর অ্যাক্সেসিবল। float-এর নিজের আসল কাজটি অবশ্য এখনো বৈধ: লেখার ভেতরে ছবি ঘোরানো, আর shape-outside দিয়ে গোল বা বাঁকা আকারে লেখা বওয়ানো। পরীক্ষায় float-ভিত্তিক লেআউট লিখলে তা পুরোনো অভ্যাস হিসেবে ধরা হতে পারে।

ঝালিয়ে নিন: পর্ব ২৩

সংজ্ঞা: Responsive design মানে একই HTML আর CSS দিয়ে বানানো পাতা ফোন, ট্যাবলেট, ল্যাপটপ — সব পর্দায় নিজেকে মানিয়ে নেয়; আলাদা “মোবাইল সাইট” লাগে না। ২০১০ সালে Ethan Marcotte শব্দটি জনপ্রিয় করেন, তিনটি উপাদান দিয়ে: নমনীয় (fluid) গ্রিড, নমনীয় ছবি আর media query. আজ এর সাথে যোগ হয়েছে flexbox, grid, container query আর clamp().

Viewport meta: <meta name="viewport" content="width=device-width, initial-scale=1">. এটি না থাকলে ফোনের ব্রাউজার ধরে নেয় পাতাটি ডেস্কটপের জন্য — প্রায় ৯৮০px চওড়ায় সাজিয়ে পুরোটা ছোট করে দেখায়; লেখা পিঁপড়ের মতো, আর কোনো media query ঠিকমতো কাজ করে না। কখনো user-scalable=no দেবেন না — যাঁদের লেখা বড় করে পড়তে হয়, তাঁদের আটকে দেয়।

Mobile-first: আগে ছোট পর্দার সরল CSS লিখুন (এক কলাম), তারপর min-width media query দিয়ে বড় পর্দায় ধাপে ধাপে যোগ করুন।

.grid { display: grid; gap: 1rem; }                 /* ফোন: এক কলাম */
@media (min-width: 40em) {                          /* ≈ 640px */
  .grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {                          /* ≈ 1024px */
  .grid { grid-template-columns: repeat(3, 1fr); }
}

কেন mobile-first: বাংলাদেশে অনেক মানুষের প্রথম — অনেকের একমাত্র — ইন্টারনেট ডিভাইস ফোন; সবচেয়ে সীমিত পরিবেশ আগে ভাবলে বিষয়বস্তুর অগ্রাধিকার পরিষ্কার হয়; আর ফোন কম CSS নিয়ম পড়ে। breakpoint বাছুন বিষয়বস্তু দেখে — যেখানে নকশা ভাঙে — কোনো নির্দিষ্ট ফোনের নাম দেখে নয়।

ঝালিয়ে নিন: পর্ব ৩০ · রেসপন্সিভ ডিজাইন

উপসংহার: দুটি একে অপরের বিকল্প নয়। পাতা আর মানুষের পছন্দের জন্য media query, component-এর জন্য container query. একটি সতর্কতা: container নিজের মাপ সন্তানের মাপ থেকে নিতে পারে না — তাই যার ওপর container-type দিচ্ছেন, তার চওড়া বাইরের লেআউট থেকেই আসতে হবে।

ঝালিয়ে নিন: পর্ব ৩১ · Media query আর container query

সমস্যা: ২০০০px চওড়া একটি ছবি ৩৬০px-এর ফোনেও নামলে ডেটা আর সময় নষ্ট; আবার ছোট ছবি বড় পর্দায় ঝাপসা। সমাধান দুই ধরনের: একই ছবির কয়েকটি মাপ থেকে ব্রাউজারকে বাছতে দেওয়া (resolution switching), আর পর্দা অনুযায়ী আলাদা কাটা বা ফরম্যাটের ছবি দেওয়া (art direction).

<img src="saree-800.jpg"
     srcset="saree-400.jpg 400w, saree-800.jpg 800w, saree-1600.jpg 1600w"
     sizes="(min-width: 64em) 33vw, 100vw"
     width="800" height="600" alt="লাল জামদানি শাড়ি" loading="lazy">

• srcset — কোন কোন ফাইল আছে, প্রতিটি কত পিক্সেল চওড়া (w); বা স্থির মাপের ছবিতে 1x, 2x.
• sizes — পাতায় ছবিটি কত চওড়া দেখাবে: বড় পর্দায় viewport-এর এক-তৃতীয়াংশ, নইলে পুরো। ব্রাউজার এই মাপকে পর্দার pixel ঘনত্ব দিয়ে গুণ করে সবচেয়ে মানানসই ফাইল বাছে — CSS লোড হওয়ার আগেই, তাই sizes-এর তথ্য দরকার।
• src — যে ব্রাউজার srcset বোঝে না, তার জন্য।

<picture>
  <source media="(width < 40em)" srcset="hero-square.jpg">
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" width="1200" height="600" alt="…" fetchpriority="high">
</picture>

<picture>-এ ব্রাউজার ওপর থেকে প্রথম মেলা <source> নেয়, আর কিছু না মিললে <img>. তাই media-যুক্ত source সবার আগে লিখুন — AVIF-এর source আগে থাকলে AVIF-চেনা ব্রাউজার সেটিই নিয়ে নেয়, ফোনের বর্গাকার ছবিটি আর কখনো আসে না। alt, width, height সবসময় <img>-এ — picture নিজে কিছু দেখায় না।

উপসংহার: প্রধান (hero) ছবিতে lazy নয়, fetchpriority="high" (Baseline Newly available — না চিনলে চুপচাপ উপেক্ষা); নিচের ছবিতে loading="lazy"; সব ছবিতে width আর height. AVIF আর WebP দুটিই এখন Baseline.

ঝালিয়ে নিন: পর্ব ৩২ · রেসপন্সিভ ছবি

সংজ্ঞা: Custom property হলো -- দিয়ে শুরু হওয়া নিজের বানানো property, যার মান var() দিয়ে অন্য জায়গায় ব্যবহার করা যায়। একবার লিখে বারবার ব্যবহার — রং বদলাতে একটি জায়গাই বদলাতে হয়।

:root {
  --brand: oklch(55% 0.2 260);
  --space: 1rem;
}
.btn { background: var(--brand); padding: var(--space) calc(var(--space) * 2); }
.btn.danger { --brand: crimson; }          /* শুধু এই বোতামে বদল */
.note { color: var(--note-color, gray); }  /* না থাকলে fallback: gray */

কীভাবে কাজ করে: এরা সাধারণ property-র মতোই cascade আর inheritance মানে — :root-এ দিলে সব element পায়, আর ভেতরের কোনো element-এ নতুন মান দিলে শুধু সেই শাখায় বদলায়। মান ঠিক হয় ব্রাউজারে, পাতা চলার সময়, তাই media query, :hover, dark mode বা JavaScript-এর style.setProperty('--brand', …) দিয়ে চলন্ত অবস্থায় বদলানো যায়।

সীমা: ভুল মান হলে ব্রাউজার আগে থেকে ধরতে পারে না — ব্যবহারের জায়গায় declaration-টি অকার্যকর হয়ে প্রাথমিক বা উত্তরাধিকারের মানে ফেরে। টাইপ দিতে চাইলে @property (Baseline Newly available). আর media query-র শর্তের ভেতরে (@media (width >= var(--bp))) var() চলে না।

ঝালিয়ে নিন: পর্ব ৩৩ · CSS variable

সতর্কতা: ::before-এ দেওয়া লেখা অনেক screen reader পড়ে, কিন্তু কপি বা নির্বাচন করা যায় না। জরুরি তথ্য তাই HTML-এ রাখুন; সাজের চিহ্নের জন্য alt text দিতে content: "★" / ""; লেখা যায়।

ঝালিয়ে নিন: পর্ব ৩৪ · Pseudo-class আর pseudo-element

বহু বছর CSS-এ শুধু নিচের বা পরের দিকে দেখা যেত — “এই element-এর ভেতরে কী আছে তা দেখে এই element-কে সাজাও” বলা যেত না, তাই JavaScript দিয়ে class বসাতে হতো। :has() সেটি সম্ভব করেছে: বাইরের element-টি ধরা পড়ে, যদি তার ভেতরে (বা পরে) বন্ধনীর selector মেলে।

/* ছবি আছে এমন কার্ড দুই কলামে */
.card:has(img) { display: grid; grid-template-columns: 120px 1fr; }

/* ফর্মের কোনো ঘর ভুল হলে জমার বোতাম ফ্যাকাশে */
form:has(:user-invalid) button[type="submit"] { opacity: .6; }

/* required ঘরের ঠিক আগের label-এ তারকা */
label:has(+ input:required)::after { content: " *"; }

Safari আর Chrome ২০২২-এ, Firefox ২০২৩-এর ডিসেম্বরে যোগ দেয় — এখন Baseline Widely available. specificity নেয় বন্ধনীর ভেতরের সবচেয়ে ভারী selector-এর মান।

ঝালিয়ে নিন: পর্ব ৩৪

• clamp(min, পছন্দ, max): font-size: clamp(1.25rem, 1rem + 2vw, 2.5rem); — পর্দার সাথে শিরোনাম মসৃণভাবে বাড়ে, কিন্তু কখনো ২০px-এর কম বা ৪০px-এর বেশি নয়; media query ছাড়াই fluid typography. মাঝের মানে rem রাখুন, যাতে ব্যবহারকারী zoom করলেও লেখা বাড়ে। Widely available.
• Logical property: margin-inline, padding-block, inline-size — বাঁ-ডান নয়, লেখার দিক অনুযায়ী শুরু-শেষ। একই CSS আরবি বা উর্দুর মতো ডান-থেকে-বাঁ ভাষাতেও ঠিক থাকে। Widely available.
• Nesting: Sass ছাড়াই নিয়মের ভেতরে নিয়ম —

.card {
  padding: 1rem;
  &:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .15); }
  .title { font-weight: 700; }      /* = .card .title */
}

Nesting ২০২৩-এর ডিসেম্বরে Baseline Newly available হয়; প্রায় আড়াই বছরের হিসাবে ২০২৬-এর মাঝামাঝি Widely available. খুব পুরোনো ব্রাউজার লক্ষ্য হলে build টুল দিয়ে সমতল করে নিন।

ঝালিয়ে নিন: পর্ব ৩৫ · আধুনিক CSS

:root {
  color-scheme: light dark;            /* ফর্মের ঘর, scrollbar-ও মানাবে */
  --surface: #ffffff;  --text: #1f2937;
}
@media (prefers-color-scheme: dark) {
  :root { --surface: #121417; --text: #e5e7eb; }
}
body { background: var(--surface); color: var(--text); }

1. color-scheme ব্রাউজারকে জানায় পাতা দুই থিমই সামলায়।
2. অর্থবহ variable (--surface, --text) — থিম বদল মানে শুধু এদের মান বদল।
3. prefers-color-scheme দিয়ে সিস্টেমের পছন্দ মানা; আধুনিক বিকল্প light-dark(#fff, #121417) (Baseline Newly available).
4. নিজের বোতাম: <html data-theme="dark"> বসানো আর পছন্দটি localStorage-এ রাখা — কাজটি head-এর ছোট script-এ CSS আঁকার আগেই, নইলে খোলার মুহূর্তে সাদা ঝলক দেখা যায়।
5. নকশা: খাঁটি কালো নয়, গাঢ় ধূসর; কম উজ্জ্বল রং; আর দুই থিমেই আলাদা করে contrast যাচাই।

ঝালিয়ে নিন: পর্ব ৩৬ · Dark mode আর থিম

.btn {
  padding: .6rem 1.2rem; border: 0; border-radius: 8px;
  background: #2563eb; color: #fff; font: inherit;
  transition: background-color .3s ease, transform .3s ease;
}
.btn:hover, .btn:focus-visible { background: #1e40af; transform: translateY(-3px); }

.dot {
  display: inline-block; width: 14px; height: 14px; margin: 0 .5rem 0 2rem;
  border-radius: 50%; background: #16a34a;
  animation: pulse .8s ease-in-out infinite alternate;
}
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.6); } }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .dot { animation: none; }
}

উপসংহার: দুটিতেই সস্তায় মসৃণ চলে transform আর opacity; আর দুটিতেই prefers-reduced-motion মানা বাধ্যতামূলক অভ্যাস।

ঝালিয়ে নিন: পর্ব ৩৮ · Transition, পর্ব ৩৯ · Keyframe animation

প্রতিটি ফ্রেমে ব্রাউজারের কাজের ধাপ: style → layout → paint → composite. মসৃণ ৬০ fps-এ প্রতি ফ্রেমের জন্য সময় মাত্র ১৬.৭ মিলিসেকেন্ডের মতো।

• left, top, width, margin বদলালে প্রতি ফ্রেমে আবার layout — আশপাশের বাক্সের মাপও নতুন করে হিসাব — তারপর paint. কম দামের ফোনে ফ্রেম পড়ে যায়, অ্যানিমেশন হোঁচট খায় (jank).
• transform আর opacity লেআউটে কোনো প্রভাব ফেলে না — আশপাশের কিছু সরে না। ব্রাউজার প্রায়ই element-টিকে আলাদা স্তরে রেখে শুধু composite ধাপে GPU দিয়ে সরায়, যা main thread ব্যস্ত থাকলেও চলতে পারে (compositor thread).

সীমা: will-change: transform দিয়ে আগাম স্তর বানানো যায়, কিন্তু সব জায়গায় দিলে মেমরি খরচ বাড়ে — শুধু সত্যিই সমস্যা হলে, মেপে। আর filter বা box-shadow-এর বড় অ্যানিমেশন paint-ভারী। DevTools-এর Performance প্যানেলে মেপে নিশ্চিত হোন।

ঝালিয়ে নিন: পর্ব ৪০ · Transform, পর্ব ৩৮

ঝালিয়ে নিন: পর্ব ৪৪ · SVG আর আইকন

1. Focus দেখা যাক: outline: none দিয়ে বিকল্প না দিলে কি-বোর্ডের ব্যবহারকারী জানেন না কোথায় আছেন। :focus-visible দিয়ে স্পষ্ট দাগ দিন — কি-বোর্ডে দেখাবে, মাউস-ক্লিকে সাধারণত নয়।
2. Contrast: সাধারণ লেখা 4.5:1, বড় লেখা ও বোতামের সীমানার মতো অ-লেখা অংশ 3:1.
3. কম মোশন: @media (prefers-reduced-motion: reduce)-এ বড় নড়াচড়া বন্ধ বা ছোট — বড় নড়াচড়ায় কারো কারো মাথা ঘোরে।
4. বড় লেখা ও zoom: লেখা rem-এ, যাতে ২০০% পর্যন্ত বড় করলেও কিছু না কাটে; ৩২০ CSS pixel চওড়ায়ও পাশে স্ক্রল ছাড়া পড়া যায় (WCAG-এর reflow শর্ত)।
5. চাপার জায়গা: WCAG 2.2-এ AA স্তরে অন্তত ২৪×২৪ CSS pixel-এর লক্ষ্য (বা যথেষ্ট ফাঁক)।
6. শুধু রঙে নয়: ভুল ঘর লাল করার সাথে বার্তা বা আইকন; লিংক শুধু রঙে নয়, underline-এও চেনা যাক।
7. লুকানোর ঠিক উপায়: চোখে লুকিয়ে screen reader-এ রাখতে visually-hidden class; উচ্চ-contrast মোডে (forced colors) নকশা ভাঙছে কি না দেখা।

ঝালিয়ে নিন: পর্ব ৪৫ · অ্যাক্সেসিবল CSS, পর্ব ৪৩

লগইন token localStorage-এ রাখবেন না — পাতায় কোনো XSS দুর্বলতা থাকলে যেকোনো script সেটি পড়তে পারে। বিস্তারিত JavaScript কোর্সে: Web Storage পর্ব.

ঝালিয়ে নিন: পর্ব ৩৬ (পছন্দ মনে রাখা)

BEM (Block, Element, Modifier) class-এর নাম রাখার একটি নিয়ম। Block — স্বাধীন component (.card); Element — তার অংশ, দুই underscore দিয়ে (.card__title); Modifier — রূপভেদ, দুই হাইফেন দিয়ে (.card--featured).

<article class="card card--featured">
  <h3 class="card__title">জামদানি শাড়ি</h3>
  <p class="card__price">৳ ৪,৫০০</p>
</article>

সুবিধা: সব selector একটি class — specificity সমান ও কম, তাই যুদ্ধ নেই; নাম দেখেই বোঝা যায় কোন অংশ কোন component-এর; এক component-এর CSS আরেকটিতে চুইয়ে পড়ে না। সীমা: নাম লম্বা হয়। বিকল্প: utility class (Tailwind), CSS Modules, আর নতুন @scope.

ঝালিয়ে নিন: পর্ব ৪৬ · CSS architecture

1. ঠিক element বেছেছেন? ডান-ক্লিক → Inspect; DevTools-এর Elements প্যানেলে দেখুন class-এর বানান ঠিক আছে কি না, আর element-টি আসলে কোথায়।
2. নিয়মটি আদৌ লাগছে? Styles প্যানেলে নিয়মটি না দেখালে selector মেলেনি, বা CSS ফাইলই লোড হয়নি (Network প্যানেলে 404?)।
3. কেটে দেওয়া? declaration-এর ওপর দাগ মানে অন্য নিয়ম জিতেছে — specificity বা ক্রম দেখুন। হলুদ সতর্ক-চিহ্ন মানে ভুল মান বা বানান।
4. অকার্যকর? ধূসর হয়ে থাকা declaration-এর পাশের তথ্য-চিহ্ন বলে কেন কাজ করছে না — যেমন inline element-এ width, বা flex পাত্র ছাড়া justify-content.
5. Computed প্যানেল: শেষ পর্যন্ত কোন মান বসল আর কোন নিয়ম থেকে; box model-এর ছবিতে মাপ।
6. অবস্থা ও লেআউট: :hover/:focus জোর করে চালু করে দেখা; flex আর grid-এর overlay; ফোনের মাপে device toolbar.

তাও না মিললে সমস্যাটিকে সবচেয়ে ছোট কোডে নামিয়ে আনুন (minimal reproduction) — প্রায়ই সেখানেই কারণ বেরিয়ে পড়ে।

ঝালিয়ে নিন: পর্ব ৪৭ · DevTools দিয়ে debugging

উপসংহার: আজকের সুপারিশ progressive enhancement — কারণ ধীর নেটওয়ার্কে JavaScript দেরিতে এলে বা ব্যর্থ হলে, পুরোনো ফোনে, বা সহায়ক প্রযুক্তিতেও মূল কাজ টিকে থাকে। CSS নিজেই এতে সাহায্য করে: না চেনা declaration ব্রাউজার চুপচাপ বাদ দেয়, তাই আগে fallback, পরে নতুন মান লেখা যায়। @supports দিয়ে শর্তসাপেক্ষ নিয়ম।

ঝালিয়ে নিন: পর্ব ৪৮ · ব্রাউজার সাপোর্ট

Vendor prefix হলো ব্রাউজারের নিজস্ব পরীক্ষামূলক সংস্করণের চিহ্ন — -webkit- (Safari, পুরোনো Chrome), -moz- (Firefox), -ms- (পুরোনো IE/Edge). ২০০০–২০১০-এর দশকে নতুন feature আগে prefix দিয়ে আসত; সমস্যা হলো সবাই prefix-যুক্ত রূপের ওপর নির্ভর করে ফেলেছিল। এখন ব্রাউজারগুলো সাধারণত নতুন feature পরীক্ষা করে সেটিংসের পতাকার (flag) পেছনে বা সীমিত পরীক্ষায়, prefix দিয়ে নয়।

হাতে লিখবেন না — দরকার হলে Autoprefixer (PostCSS) আপনার লক্ষ্য-ব্রাউজারের তালিকা দেখে নিজেই যোগ করে। Baseline: কোনো feature যেদিন সব প্রধান ব্রাউজারের (Chrome, Edge, Firefox, Safari — ডেস্কটপ ও মোবাইল) সর্বশেষ সংস্করণে আসে, সেদিন সে Newly available; তার ৩০ মাস পর Widely available. যাচাই করবেন Can I use আর MDN-এর Baseline চিহ্নে।

ঝালিয়ে নিন: পর্ব ৪৮, পর্ব ৫০

সংজ্ঞা: Core Web Vitals হলো আসল ব্যবহারকারীর অভিজ্ঞতা মাপার তিনটি সংখ্যা, যা Google প্রচার করে আর সার্চ র‍্যাংকিংয়ের সংকেতগুলোর একটি হিসেবে ব্যবহার করে। “ভালো” ধরা হয় যদি পরিদর্শনের অন্তত ৭৫ শতাংশে সীমার ভেতরে থাকে।

INP ২০২৪ সালের মার্চে আগের মাপ FID-এর জায়গা নিয়েছে। মাপার দুই ধরন: Lighthouse-এর মতো ল্যাবের মাপ (lab data), আর আসল ব্যবহারকারীদের মাপ (field data, যেমন CrUX); PageSpeed Insights দুটোই দেখায়। আগে মাপুন, তারপর ঠিক করুন, আবার মাপুন।

ঝালিয়ে নিন: পর্ব ৪৯ · পারফরম্যান্স

উপসংহার: থিম আর চলন্ত বদলের জন্য CSS variable; CSS তৈরির কাজে (যেমন map থেকে loop চালিয়ে দশটি রঙের utility বানানো) Sass. দুটি একসাথেও চলে — Sass-এর map থেকে :root-এ custom property তৈরি করা প্রচলিত কৌশল। Sass-এর বর্তমান সংস্করণ Dart Sass, যেখানে @import deprecated — নতুন কাজে @use.

ঝালিয়ে নিন: পর্ব ৫০ · Sass আর PostCSS, পর্ব ৩৩

কখন কোনটি: দ্রুত, প্রচলিত চেহারার admin প্যানেল বা ছোট অফিস-সাইটে Bootstrap; নিজস্ব নকশা আর component-ভিত্তিক JavaScript প্রজেক্টে (React, Vue) Tailwind; খুব ছোট সাইটে হয়তো কোনো framework-ই নয়। আর যেটিই বাছুন, শেষ পর্যন্ত সব class সাধারণ CSS — flexbox, grid, cascade না বুঝলে framework-এর ভুল ধরা যায় না।

ঝালিয়ে নিন: পর্ব ৫১ · CSS framework

সংজ্ঞা: Web Components হলো কোনো framework ছাড়াই ব্রাউজারের নিজস্ব প্রযুক্তি দিয়ে নিজের HTML ট্যাগ বানানোর উপায় — যেমন <price-tag>, যা যেকোনো সাইটে বা framework-এ চলে।

1. Custom element: JavaScript-এর class দিয়ে নতুন ট্যাগ নিবন্ধন — customElements.define('price-tag', PriceTag). নামে হাইফেন বাধ্যতামূলক, যাতে ভবিষ্যতের HTML ট্যাগের সাথে নাম না মেলে। connectedCallback চলে পাতায় বসানোর সময়।
2. Shadow DOM: element-এর ভেতরে আলাদা একটি লুকানো DOM-গাছ, যার CSS বাইরে চুইয়ে যায় না, বাইরের CSS-ও ভেতরে ঢোকে না। দেয়াল পেরিয়ে আসে শুধু উত্তরাধিকারী property (যেমন color, font), CSS variable আর ::part().
3. <template> ও <slot>: template-এর ভেতরের HTML পার্স হয় কিন্তু দেখায় না — ছাঁচ হিসেবে কপি করা হয়; slot হলো সেই জায়গা, যেখানে ব্যবহারকারীর দেওয়া বিষয়বস্তু বসে।

সীমা ও পরামর্শ: custom element নিজে কোনো বোতাম বা লিংক নয় — ভেতরে আসল <button> বা <a> রাখুন, নইলে কি-বোর্ড আর screen reader-এর সব কাজ হাতে করতে হয়। সবচেয়ে টেকসই ধরন: যে component আগে থেকে কাজ করা HTML-কে শুধু উন্নত করে (progressive enhancement).

ঝালিয়ে নিন: পর্ব ৫২ · DOM, template আর Web Components, JavaScript কোর্সের DOM পর্ব

git init                        # ফোল্ডারকে repository বানাও
git add index.html css/         # staging-এ তোলো
git commit -m "Add contact page"  # নাম-সময়-কারণসহ সংরক্ষণ
git remote add origin https://github.com/<user>/portfolio.git
git push -u origin main         # GitHub-এ পাঠাও

তিন জায়গা: কাজের ফোল্ডার → git add → staging → git commit → repository. git status সবসময় বলে আপনি কোথায়। পাসওয়ার্ড, API key বা .env কখনো commit নয় — .gitignore আগে।

প্রকাশের পথ: GitHub Pages (repository থেকে সরাসরি), Netlify বা Cloudflare Pages-এর মতো সেবা (repository যুক্ত করলে প্রতি push-এ নতুন সংস্করণ), অথবা হোস্টিংয়ের cPanel-এর File Manager বা SFTP দিয়ে public_html-এ তোলা। তারপর নিজের domain, HTTPS, কাস্টম 404, favicon আর Lighthouse যাচাই।

ঝালিয়ে নিন: পর্ব ৫৩ · Git, GitHub আর প্রকাশ, ডোমেইন ও হোস্টিং

1. পরিকল্পনা: লক্ষ্য (চাকরি না ফ্রিল্যান্স ক্লায়েন্ট), পাঠক কে, কোন বিষয়বস্তু লাগবে (content inventory), কয়টি পাতা (সাইটম্যাপ), আর কাগজে মোটা দাগের নকশা (wireframe).
2. Design system: রং (oklch, contrast যাচাই করা), লেখার মাপ (clamp()), ফাঁক আর কোণের মাপ — সব custom property-তে; light-dark() দিয়ে দুই থিম।
3. কাঠামো আগে: landmark, skip link, একটি <h1>, পূর্ণ head আর Open Graph; তারপর header-মেনু, hero, প্রজেক্টের কার্ড, “আমার সম্পর্কে”, যোগাযোগ ফর্ম আর footer.
4. রেসপন্সিভ: পাতার কাঠামো media query-তে, কার্ড নিজের জায়গা দেখে container query-তে, গ্যালারি repeat(auto-fit, minmax(…))-এ।
5. যাচাই: শুধু কি-বোর্ডে পুরো সাইট, validator, Lighthouse-এর অ্যাক্সেসিবিলিটি ও পারফরম্যান্স, ৩২০px চওড়ায় পাশে স্ক্রল নেই, ছবিতে alt ও মাপ।
6. প্রকাশ: Git দিয়ে GitHub-এ, তারপর GitHub Pages; README-তে কী, কেন, কীভাবে।
7. মূল্যায়ন: একটি রুব্রিক ধরে নিজেকে নম্বর দেওয়া — কাঠামো, রেসপন্সিভ, অ্যাক্সেসিবিলিটি, পারফরম্যান্স, কোডের পরিচ্ছন্নতা।

উপসংহার: পরীক্ষকেরা ফল নয়, সিদ্ধান্তের কারণ শুনতে চান — “কেন container query”, “কেন popover-এ মেনু”. এই প্রশ্নের ভাইভা-রূপ অংশ ৯-এ।

ঝালিয়ে নিন: পর্ব ৫৪ · ক্যাপস্টোন

পরিকল্পনা: caption-এ নাম; thead-এর প্রথম সারিতে “শাখা” আর “মোট” দুই সারি জুড়ে (rowspan="2"), “পণ্য” দুই কলাম জুড়ে (colspan="2"); প্রতিটি সারির শুরুতে th scope="row"; শেষে tfoot.

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 4px 12px; }
  td { text-align: right; }
</style>
<table>
  <caption>অক্টোবরের বিক্রি, শাখা অনুযায়ী (পিস, উদাহরণ)</caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">শাখা</th>
      <th scope="colgroup" colspan="2">পণ্য</th>
      <th scope="col" rowspan="2">মোট</th>
    </tr>
    <tr><th scope="col">শাড়ি</th><th scope="col">পাঞ্জাবি</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">ঢাকা</th><td>১২০</td><td>৮০</td><td>২০০</td></tr>
    <tr><th scope="row">চট্টগ্রাম</th><td>৯০</td><td>৬০</td><td>১৫০</td></tr>
    <tr><th scope="row">রাজশাহী</th><td>৪০</td><td>৩৫</td><td>৭৫</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">সব শাখা</th><td>২৫০</td><td>১৭৫</td><td>৪২৫</td></tr>
  </tfoot>
</table>

যোগ করুন: CSS ছাড়া টেবিলে কোনো দাগই থাকে না, তাই border CSS-এ — HTML-এর পুরোনো border="1" attribute নয়। ফোনে চওড়া টেবিল একটি স্ক্রল-পাত্রে মুড়ে দিন (overflow-x: auto).

<style> label { display: block; margin-top: .6rem; } </style>
<form action="/register" method="post">
  <label for="name">পূর্ণ নাম</label>
  <input id="name" name="name" autocomplete="name" required>

  <label for="phone">মোবাইল নম্বর</label>
  <input id="phone" name="phone" type="tel" inputmode="numeric" autocomplete="tel"
         pattern="01[3-9][0-9]{8}" placeholder="01XXXXXXXXX" required>

  <label for="email">ইমেইল (ঐচ্ছিক)</label>
  <input id="email" name="email" type="email" autocomplete="email">

  <label for="pw">পাসওয়ার্ড (অন্তত ৮ অক্ষর)</label>
  <input id="pw" name="password" type="password" minlength="8" autocomplete="new-password" required>

  <fieldset>
    <legend>ব্যাচের সময়</legend>
    <label><input type="radio" name="batch" value="morning" required> সকাল</label>
    <label><input type="radio" name="batch" value="evening"> বিকাল</label>
  </fieldset>

  <label for="district">জেলা</label>
  <select id="district" name="district" required>
    <option value="">— বেছে নিন —</option>
    <option>ঢাকা</option><option>খুলনা</option><option>রংপুর</option>
  </select>

  <label><input type="checkbox" name="agree" required> শর্তাবলিতে রাজি</label>
  <button type="submit">রেজিস্ট্রেশন করুন</button>
</form>

কেন এভাবে: প্রতিটি ঘরের name আছে (নইলে মান জমা হয় না); autocomplete ব্রাউজারকে আগে থেকে পূরণে সাহায্য করে; type="tel" আর inputmode="numeric" ফোনে সংখ্যার কি-বোর্ড খোলে; পাসওয়ার্ড POST-এ যায়। আর মনে রাখুন, এই যাচাই শুধু সুবিধা — সার্ভারেও আবার যাচাই করতে হবে।

<a href="#main">সরাসরি মূল লেখায় যান</a>
<header>
  <p><strong>চায়ের কাপে প্রযুক্তি</strong></p>
  <nav aria-label="প্রধান মেনু">
    <ul>
      <li><a href="#main" aria-current="page">হোম</a></li>
      <li><a href="#about">পরিচিতি</a></li>
    </ul>
  </nav>
</header>
<main id="main">
  <article>
    <h1>ফোনে ওয়েবসাইট কেন ছোট দেখায়?</h1>
    <p><time datetime="2026-10-20">২০ অক্টোবর ২০২৬</time></p>
    <p>কারণটি একটি ছোট meta tag…</p>
  </article>
  <aside>
    <h2>আরও পড়ুন</h2>
    <p>viewport আর রেসপন্সিভ ডিজাইন</p>
  </aside>
</main>
<footer id="about">
  <p>© ২০২৬ চায়ের কাপে প্রযুক্তি</p>
</footer>

লক্ষ করুন: একটিই <h1>; nav-এর ভেতরে তালিকা; প্রকাশের তারিখ <time datetime>-এ, যাতে যন্ত্রও বোঝে; বর্তমান পাতার লিংকে aria-current="page".

.stage {
  min-height: 320px;        /* আসল পাতায়: body-তে min-height: 100dvh */
  display: grid;
  place-items: center;      /* align-items + justify-items, দুটোই center */
  background: #f1f5f9;
}
.card {
  width: min(100% - 2rem, 22rem);
  padding: 1.5rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgb(0 0 0 / .12);
  text-align: center;
}
/* বিকল্প: .stage { display: flex; justify-content: center; align-items: center; } */

পুরোনো উপায় শুধু ইতিহাস হিসেবে: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) — এখনো কাজ করে, কিন্তু element-কে flow থেকে বের করে দেয়। খাতায় grid বা flex-এর উত্তরই লিখুন, আর এক লাইনে উল্লেখ করুন কেন উচ্চতা লাগবে।

<style>
  .grid { display: grid; gap: 12px; padding: 0; list-style: none; }
  @media (min-width: 30em) { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 40em) { .grid { grid-template-columns: repeat(3, 1fr); } }
  .grid li { padding: 1rem; border-radius: 8px; background: #e0e7ff; }
</style>
<ul class="grid">
  <li>HTML</li><li>CSS</li><li>Flexbox</li>
  <li>Grid</li><li>রেসপন্সিভ</li><li>অ্যাক্সেসিবিলিটি</li>
</ul>
<p id="info"></p>
<script>
  (function m() {
    if (!document.body.offsetWidth) return setTimeout(m, 50);
    const cols = getComputedStyle(document.querySelector('.grid'))
      .gridTemplateColumns.split(' ').length;
    console.log('preview width: ' + innerWidth + 'px → columns: ' + cols);
  })();
</script>

বিকল্প উত্তর (media query ছাড়া): grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); — কলামের সংখ্যা জায়গা দেখে নিজেই ঠিক হয়, তবে “ঠিক ৩টি” সর্বোচ্চ বেঁধে দিতে চাইলে media query বা পাত্রের max-width লাগে। খাতায় দুটিই লিখে পার্থক্য এক লাইনে বললে উত্তর পূর্ণ হয়।

<style>
  html { scroll-padding-top: 4rem; }   /* #লিংকে লাফালে header লেখা ঢাকবে না */
  body { margin: 0; font-family: system-ui, sans-serif; }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: .75rem 1rem;
    background: #0f172a; color: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / .25);
  }
  main { padding: 1rem; }
</style>
<header class="site-header">ABCL শপ — <a href="#offer" style="color:#93c5fd">আজকের অফার</a></header>
<main>
  <p>প্রিভিউর ভেতরে নিচে স্ক্রল করুন।</p>
  <p>পণ্য ১ … পণ্য ২ … পণ্য ৩ …</p><p>পণ্য ৪ … পণ্য ৫ …</p>
  <p>পণ্য ৬ … পণ্য ৭ …</p><p>পণ্য ৮ … পণ্য ৯ …</p>
  <p>পণ্য ১০ … পণ্য ১১ …</p><p>পণ্য ১২ … পণ্য ১৩ …</p>
  <p>পণ্য ১৪ … পণ্য ১৫ …</p><p>পণ্য ১৬ … পণ্য ১৭ …</p>
  <h2 id="offer">আজকের অফার</h2>
  <p>সব শাড়িতে ১০% ছাড়।</p>
  <p>পণ্য ১৮ … পণ্য ১৯ …</p><p>পণ্য ২০ … শেষ।</p>
</main>

কেন fixed নয়: position: fixed header-কে flow থেকে বের করে দেয়, তাই নিচের লেখার শুরুতে হাতে padding দিতে হয়; sticky নিজের জায়গা রাখে। sticky কাজ না করলে পূর্বপুরুষে overflow: hidden আছে কি না দেখুন।

.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1rem;
  padding: .75rem 1rem;
  background: #0d1f3c;
}
.bar a { color: #fff; text-decoration: none; }
.logo { font-weight: 700; }
.bar ul { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.bar a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.bar a:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; }

লক্ষ করুন: মেনু <nav>-এর ভেতরে <ul> — তালিকার বুলেট CSS-এ সরানো, অর্থ রয়ে গেছে; বর্তমান পাতা চেনানো হয়েছে attribute দিয়ে, আলাদা class ছাড়াই; আর ফাঁক margin নয়, gap. ছোট পর্দায় hamburger মেনু লাগলে আসল <button> আর popover বা aria-expanded (পর্ব ১১, ২৬)।

.plan {
  position: relative;               /* badge-এর ভিত্তি */
  max-width: 16rem;
  margin: 1.5rem;
  padding: 1.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.plan:hover, .plan:focus-within {
  box-shadow: 0 10px 24px rgb(0 0 0 / .15);
  transform: translateY(-4px);
}
.badge {
  position: absolute; top: -.75rem; right: 1rem;
  padding: .2rem .6rem; border-radius: 999px;
  background: #f59e0b; color: #111; font-size: .85rem;
}
.price { font-size: 1.5rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .plan { transition: none; } }

লক্ষ করুন: :focus-within কি-বোর্ডের ব্যবহারকারীকেও একই অনুভূতি দেয়; অ্যানিমেশন শুধু transform আর box-shadow-এ; আর “কম মোশন” পছন্দ মানা হয়েছে।

<style>
  .page {
    display: grid; gap: 8px; min-height: 300px;
    grid-template-areas: "head" "nav" "main" "side" "foot";
  }
  @media (min-width: 40em) {
    .page {
      grid-template-columns: 9rem 1fr 9rem;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "head head head"
        "nav  main side"
        "foot foot foot";
    }
  }
  header { grid-area: head; }  nav { grid-area: nav; }  main { grid-area: main; }
  aside  { grid-area: side; }  footer { grid-area: foot; }
  .page > * { padding: .75rem; border-radius: 6px; background: #e2e8f0; }
  main { background: #dbeafe; }
</style>
<div class="page">
  <header>header</header>
  <nav>nav</nav>
  <main>main — মূল লেখা</main>
  <aside>aside</aside>
  <footer>footer</footer>
</div>

কেন এটি ভালো উত্তর: HTML-এর ক্রম (header, nav, main, aside, footer) অর্থ আর কি-বোর্ডের ক্রম ঠিক রাখে, আর চেহারার নকশা থাকে CSS-এর একটি “মানচিত্রে”. সাবধান: areas দিয়ে চোখের ক্রম DOM-এর ক্রম থেকে খুব আলাদা করবেন না — Tab আর screen reader DOM-এর ক্রমই মানে।

না — markup ভাষা: বিষয়বস্তুর কাঠামো আর অর্থ বলে; এতে variable, শর্ত বা লুপ নেই, হিসাবের কাজ JavaScript-এর। পর্ব ০১

বেশিরভাগ ওয়েব সার্ভার কোনো ফোল্ডারের ঠিকানা চাওয়া হলে ডিফল্টে সেখানকার index.html খোঁজে ও পাঠায়। পর্ব ০২

<!-- … -->; পাতায় দেখায় না, কিন্তু View Source-এ যে কেউ পড়তে পারেন — তাই গোপন কিছু কখনো নয়। পর্ব ০৩

<p> একটি অনুচ্ছেদ; <br> একই অনুচ্ছেদের ভেতরে লাইন ভাঙা — ঠিকানা বা কবিতায়। ফাঁক বাড়াতে br নয়, CSS-এর margin. পর্ব ০৪

লিংক নতুন ট্যাবে খোলে; আধুনিক ব্রাউজার ডিফল্টে নতুন পাতাকে পুরোনো পাতা ছুঁতে দেয় না, তবু rel="noopener" লেখা নিরাপদ অভ্যাস (tabnabbing রোধ), আর ব্যবহারকারীকে জানিয়ে দেওয়া ভালো যে নতুন ট্যাব খুলবে। পর্ব ০৫

টেবিল সারি-কলামের ডেটার অর্থ বহন করে — লেআউটে দিলে screen reader ভুল কাঠামো শোনায়, ফোনে ভাঙে, আর কোড জটিল হয়; লেআউটের কাজ CSS-এর flex আর grid-এর। পর্ব ০৭

submit — তাই ফর্মের ভেতরের সাধারণ বোতামে (যেমন “পাসওয়ার্ড দেখাও”) type="button" লিখুন, নইলে চাপলেই ফর্ম জমা হয়ে যায়। পর্ব ০৮

না — শুধু name থাকা ঘরের মান যায়; id থাকলেও যথেষ্ট নয়। পর্ব ০৮

readonly ঘর বদলানো যায় না, কিন্তু focus পায় আর তার মান জমা হয়; disabled ঘর focus পায় না, তার মান জমাও হয় না। পর্ব ০৯

নিয়মে একাধিক নিষেধ নয়, কিন্তু প্রচলিত ভালো অভ্যাস একটি — পাতার মূল শিরোনাম; তারপর h2, h3 ক্রমে, মাঝখানে স্তর লাফ না দিয়ে। পর্ব ১০

পাতার একেবারে প্রথম লিংক — “সরাসরি মূল লেখায় যান” — যা কি-বোর্ডের ব্যবহারকারীকে প্রতিটি পাতায় পুরো মেনু Tab করে পেরোনো থেকে বাঁচায়। পর্ব ১২

যখন কোনো control-এর দৃশ্যমান লেখা নেই — যেমন শুধু আইকনের বোতাম (🔍 → “খুঁজুন”); দৃশ্যমান লেখা থাকলে সেটিই নাম, aria-label দিয়ে তাকে ঢাকবেন না। পর্ব ১২

Cascading Style Sheets — কয়েকটি উৎসের নিয়ম একটি নির্দিষ্ট ক্রমে বিচার হয়ে, ঝরনার মতো ধাপে ধাপে নেমে জয়ী মান ঠিক হয়। পর্ব ১৮

শূন্য — (0,0,0); সে সব element ধরে, কিন্তু যেকোনো অন্য selector তাকে হারায়। পর্ব ১৭

খুব কম — utility class বা অ্যাক্সেসিবিলিটির জরুরি override-এ; নিয়মিত ব্যবহার specificity-র যুদ্ধ বাড়ায়, কারণ তাকে হারাতে আরেকটি !important লাগে। পর্ব ১৮

ওপর-নিচে 10px, ডানে-বাঁয়ে 20px. চার মান দিলে ঘড়ির কাঁটার দিকে: ওপর, ডান, নিচ, বাঁ। পর্ব ১৯

নির্দিষ্ট width (বা max-width) দেওয়া block-এর বাঁ-ডানের auto margin বাকি জায়গা সমান ভাগ করে নেয়; width না থাকলে বাক্স পুরো চওড়া, তাই ভাগের কিছুই থাকে না। পর্ব ১৯

না — background-color-এর প্রাথমিক মান transparent, তাই মা-বাবার রং “দেখা যায়”, কিন্তু উত্তরাধিকার সূত্রে আসে না। পর্ব ১৮

পাত্রে display: grid; place-items: center; — খাড়া দিকে মাঝখানে আনতে পাত্রের উচ্চতা থাকতে হবে। পর্ব ২৬

সবচেয়ে কাছের positioned পূর্বপুরুষের (position static নয়, বা transform-এর মতো কিছু আছে); না থাকলে প্রাথমিক containing block-এর। পর্ব ২৪

না — flexbox-এও চলে, আর এখন সব প্রধান ব্রাউজারে বহুদিন ধরে আছে; item-এর মাঝে margin-এর হিসাবের চেয়ে পরিষ্কার। পর্ব ২৫

% পুরো পাত্রের চওড়ার ভাগ — gap যোগ হলে উপচে পড়ে; fr হলো gap আর স্থির track বাদ দিয়ে বাকি জায়গার ভাগ, তাই উপচে পড়ে না। পর্ব ২৭

শুধু চোখের ক্রম বদলায়; Tab আর screen reader DOM-এর ক্রম মানে — দুই ক্রম না মিললে কি-বোর্ডের ব্যবহারকারী বিভ্রান্ত হন। পর্ব ২৮

পাশাপাশি কার্ডের ভেতরের অংশ — শিরোনাম, দাম, বোতাম — যাতে বাইরের grid-এর সারি মেনে এক রেখায় মেলে, লেখা ছোট-বড় হলেও; এটি এখন Baseline Widely available. পর্ব ২৮

ঠিকানা-বার ওঠানামা করায় 100vh অনেক সময় দৃশ্যমান পর্দার চেয়ে বড় হয়, নিচের অংশ ঢাকা পড়ে; dvh (dynamic viewport height) বর্তমান দৃশ্যমান উচ্চতা মানে — Baseline Widely available. পর্ব ২০

না — touch পর্দায় hover নির্ভরযোগ্য নয়; জরুরি তথ্য বা মেনু শুধু hover-এ লুকাবেন না, দরকারে @media (hover: hover) দিয়ে শুধু hover-ক্ষম ডিভাইসে বাড়তি সাজ। পর্ব ৩০

content দেওয়া আছে কি না (ফাঁকা হলেও content: ""); আর element-টি <img> বা <input>-এর মতো replaced element কি না — সেখানে ::before কাজ করে না। পর্ব ৩৪

যে property অ্যানিমেট করার কথা ভাবেননি সেগুলোও করে — অপ্রত্যাশিত আচরণ আর পারফরম্যান্সের খরচ; নির্দিষ্ট property-র নাম লিখুন। পর্ব ৩৮

element-এর নিজের color-এর মান; SVG আইকনে fill: currentColor দিলে আইকন পাশের লেখার রঙের সাথে মিলে যায়, hover-এও একসাথে বদলায়। পর্ব ৪৪

কি-বোর্ডের ব্যবহারকারী focus দেখতে পান না — কোথায় আছেন বোঝেন না; সরালে অবশ্যই :focus-visible-এ স্পষ্ট বিকল্প দিন। পর্ব ৪৫

tooltip বা মেনুকে JavaScript ছাড়াই অন্য একটি element-এর গায়ে বসানোর নতুন CSS; ২০২৫–২৬-এ এটি এখনো সব প্রধান ব্রাউজারে নিশ্চিত নয় — Baseline হওয়ার পথে — তাই fallback-সহ বাড়তি সুবিধা হিসেবে। পর্ব ৩৭

ফাঁকা জায়গা, মন্তব্য আর অপ্রয়োজনীয় অক্ষর বাদ দিয়ে CSS-JS ফাইল ছোট করা; সার্ভারের gzip বা Brotli সংকোচনের সাথে মিলে ডাউনলোড আরও কমে। পর্ব ৪৯

নানা দেশে ছড়ানো সার্ভারের জাল, যা ব্যবহারকারীর সবচেয়ে কাছের সার্ভার থেকে ফাইল পাঠায় — দূরত্ব কম, পাতা দ্রুত। পর্ব ৫১

Performance, Accessibility, Best Practices আর SEO — ল্যাবের পরিবেশে একবারের মাপ; আসল ব্যবহারকারীর মাপ (field data) আলাদা। পর্ব ৪৯

কোন ফাইল Git-এ কখনো যাবে না তা বলে — .env, পাসওয়ার্ড, node_modules, বড় build ফাইল। পর্ব ৫৩

পথে কেউ পাতা পড়তে বা বদলাতে (যেমন বিজ্ঞাপন ঢোকাতে) পারে না; ব্রাউজার “Not secure” সতর্কতা দেখায় না; আর অনেক আধুনিক ব্রাউজার-সুবিধা শুধু HTTPS-এ চলে। পর্ব ৫৩