যে CSS একটা স্ক্রিনশট থেকে শেখা যায় না, তার জন্য ইন্টারঅ্যাক্টিভ অ্যাপ। প্রতিটি যেখানে সম্ভব সেই পাঠের সাথে যুক্ত যা এটি শেখায়, ব্যবহারের সময় নিজেই ব্যাখ্যা দেয়, আর সম্পূর্ণ বাংলায় কাজ করে।
padding, border আর margin টেনে দেখুন কীভাবে ৩০০px-এর বাক্স ৩৬০px হয়ে যায় — তারপর border-box-এ বদলে দেখুন সেটা ঠিক হয়ে যায়।
একাধিক শ্যাডো লেয়ার সাজান, shape-এর উপর সরাসরি টেনে দেখুন, box-shadow-কে filter: drop-shadow()-এর সাথে তুলনা করুন।
অসীম স্টপসহ linear, radial আর conic গ্রেডিয়েন্ট — sRGB বনাম OKLCH interpolation পাশাপাশি দেখুন।
প্রতিটি কন্টেইনার আর আইটেম প্রপার্টি, লাইভ। দেখুন order আসল HTML স্পর্শ না করেই যা দেখছেন তা বদলে দেয়।
স্ক্রলবারের প্রতিটি অংশ স্টাইল করুন — track, thumb, corner, buttons — কোন ব্রাউজার কী সাপোর্ট করে তার honest নোটসহ।
একটি সিলেক্টর পেস্ট করুন, তার (a, b, c) ওজন ভেঙে রং-কোডেড দেখুন। দুটো সিলেক্টর তুলনা করে দেখুন কোনটা জেতে।
একটি রং থেকে প্যালেট তৈরি করুন, WCAG AA/AAA কনট্রাস্ট যাচাই করুন, colour blindness-এ কেমন দেখায় তা প্রিভিউ করুন।
সেলের উপর টেনে আইটেম বসিয়ে আসল CSS Grid তৈরি করুন — fr, px, auto আর minmax() ট্র্যাক মিশিয়ে ব্যবহার করুন, তৈরি হওয়া grid-template-areas এক্সপোর্ট করুন।
একটি min/max viewport আর value জোড়া থেকে font-size বা spacing-এর জন্য একটি fluid clamp() ভ্যালু বানান — আসল resizable প্রিভিউ ফ্রেমে লাইভ, কোনো media query ছাড়াই।
প্রতিটি length, angle, time আর resolution unit-এর মধ্যে কনভার্ট করুন — একটা আসল, কনফিগারযোগ্য font-size, viewport আর container context সহ, একটা লাইভ প্রিভিউ আর সম্পূর্ণ conversion টেবিলসহ।
একটা আসল drag-to-position টাইমলাইন, একটা visual cubic-bezier এডিটর, একটা প্রিসেট লাইব্রেরি, আর scrubbable playback দিয়ে multi-layer @keyframes।
প্রতিটি CSS filter function সাজান আর রিঅর্ডার করুন, সাথে glass panel-এর জন্য আলাদা একটা backdrop-filter স্ট্যাক — before/after তুলনা, নিজের ছবি, আর photo-style প্রিসেটসহ।
Protanopia, deuteranopia, tritanopia আর achromatopsia সিমুলেট করুন — একটা আসল severity স্লাইডারসহ — নিজের ছবিতে, একটা live UI mockup-এ, বা pairwise confusability চেকসহ একটা পেস্ট করা প্যালেটে।
একটা রঙের জন্য বা পুরো একটা design system-এর জন্য একটা কনফিগারযোগ্য-দৈর্ঘ্যের কালার স্কেল তৈরি করুন — একটা perceptually-uniform OKLCH sweep-কে HSL আর naive RGB blending-এর সাথে তুলনা করুন, WCAG ব্যাজ আর multi-format এক্সপোর্টসহ।
চারটা টেক্সট ইঞ্জিন — classic pseudo-Latin, pure gibberish, template-built realistic ইংরেজি prose, আর বাংলা — word/sentence/paragraph/list আউটপুট, HTML ট্যাগ wrapping, আর একটা নির্দিষ্ট character-count টার্গেটসহ।
Lorem Picsum থেকে আসল ছবি বা placehold.co থেকে solid-colour টেক্সট বক্স — aspect-ratio lock, common-size preset, credit-সহ একটা আসল photo browser, আর একটা responsive srcset জেনারেটরসহ।
lorem.video, placeholdervideo.dev বা imgsrc.pub থেকে আসল টেস্ট ভিডিও একটা automatic fallback chain-সহ, সাথে একটা verified archived ফাইল — vertical-সহ aspect preset, একটা মিলে যাওয়া poster ছবি, আর URL/<video>/React/Markdown আউটপুট।
স্কুলে যেভাবে শেখানো হয় সেভাবে binary, octal, decimal আর hexadecimal-এর মধ্যে কনভার্ট করুন — repeated division আর place-value table, একবারে এক step — সাথে একটা interactive bit-toggle row আর হোমওয়ার্কের জন্য একটা practice mode।
আপনার ব্রাউজারে autosave হওয়া একটা plain-text scratchpad — একাধিক note, case/line utility, find & replace, import/export, আর code snippet-এর জন্য একটা ঐচ্ছিক syntax-highlighted প্রিভিউ।
আসল JavaScript, সত্যিই চালানো — আপনার নিজের কোড (বা একটা preset) আসলে execute হওয়ার সময় live call stack, Web APIs, আর microtask queue দেখুন, প্রতিটা step-এর জন্য একটা plain-English বর্ণনাসহ।
একটা recursive function-এর call stack সত্যিই বাড়তে আর কমতে দেখুন, প্রতিটা frame-এ আসল argument আর আসল return value-সহ — sum, factorial আর Fibonacci preset, সাথে editable কোড।
আসল কোড চলার সময় scope chain সত্যিই তৈরি হতে আর ভেঙে যেতে দেখুন — আসল variable value, temporal dead zone-এর আসল ReferenceError, আর একটা closure বাইরের function return করে যাওয়ার পরও ঠিক কী বাঁচিয়ে রাখে।
আপনার title tag আর meta description আসলে Google search result-এ, desktop আর mobile দুটোতেই, কেমন দেখাবে দেখুন — আসল pixel-width measurement দিয়ে, character-count আন্দাজ করে না।
একটা request type বেছে নিন আর file check/uncheck করে দেখুন WordPress আসলে কোন template load করবে, আসল documented search order-এ।
একটা page load-এ common WordPress action hook গুলো যে order-এ fire করে, সাথে ৪০+ আরও hook-এর একটা categorized reference — save/update, user/auth, admin, comments, widgets, content filter — প্রতিটার জন্য একটা ready-to-copy snippet সহ।
একটা secondary WordPress query visually বানান — post type/status, taxonomy ও meta query, date range, pagination, performance flag — আর loop-সহ আসল, সঠিকভাবে nested WP_Query PHP ফেরত পান।
Style আর script row যোগ করুন, handle, dependency আর versioning সেট করুন, আর আসল, সঠিকভাবে wrap করা wp_enqueue_style() / wp_enqueue_script() functions.php ব্লক ফেরত পান।
