লার্ন কম্পিউটার একাডেমি
English

টুলস

যে 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 নোটসহ।

খুলুন

CSS স্পেসিফিসিটি ক্যালকুলেটর

একটি সিলেক্টর পেস্ট করুন, তার (a, b, c) ওজন ভেঙে রং-কোডেড দেখুন। দুটো সিলেক্টর তুলনা করে দেখুন কোনটা জেতে।

খুলুন

কালার ও কনট্রাস্ট স্টুডিও

একটি রং থেকে প্যালেট তৈরি করুন, WCAG AA/AAA কনট্রাস্ট যাচাই করুন, colour blindness-এ কেমন দেখায় তা প্রিভিউ করুন।

খুলুন

গ্রিড জেনারেটর

সেলের উপর টেনে আইটেম বসিয়ে আসল CSS Grid তৈরি করুন — fr, px, auto আর minmax() ট্র্যাক মিশিয়ে ব্যবহার করুন, তৈরি হওয়া grid-template-areas এক্সপোর্ট করুন।

খুলুন