CSS Playgrounds
Published in
2 min readJul 12, 2023
আপনার যদি CSS Selector, flexbox, Grid নিয়ে কোনও confusion থেকে থাকে বা মনে হয় জিনিসটা বুঝতে পারছি হয়তো কিন্তু ঠিকমত apply করতে পারছি না, তাহলে এই blog আপনার জন্যই। এখানে আমরা গতাগুগতিক style থেকে বের হয়ে কীভাবে একটু মজা করে জিনিসগুলো শিখতে পারি সেটা জানবো।
- CSS Diner
CSS Selector শেখার জন্য এটা খুবই মজার একটা Playground। আপনার যদি code করতে করতে ক্ষুধা লেগে যায়, চলে যাবেন এখানে dinner করতে। সুন্দর করে এই website আপনাকে dinner utensils এবং food items দিয়ে সিখিয়ে দিবে কীভাবে বিভিন্ন ভাবে apply করতে হয় css selector. - Flexbox Froggy
এখানে একটা frog থাকবে সবুজ রং এর। আপনাকে এর পেছন পেছন সারাক্ষণ দৌড়াতে হবে level গুলো complete করার জন্য। আপনার দরকার অনুযায়ী আপনি flex এর property গুলো ব্যাবহার করে কোড লিখে লেভেল সম্পূর্ণ করতে পারবেন। - CSS Grid Generator
এটা খুবই উপকারি একটা plaground grid শেখার জন্য। কারণ এখানে আপনি নিজের ইচ্ছামত grid এর row, column, gap generate করে সাথে code তাও দেখে নিতে পারবেন। - Grid Garden
এখানে আপনার একটা বাগান থাকবে, সেখানে বাগানের সবজি গুলো আপনাকে ঠিকমত চাষ করে বড় করতে হবে Grid এর বিভিন্ন property use করে। - CSS Battle
এখানে different different things এর উপর অনেক battle দেওয়া আছে এবং regular new battle আসবে। একটা battle এ ঢুকে target output এর match হয় এরকম ভাবে html+css লিখতে হয়। u can submit infinite times a battle code. Code এ কয়টা letter write করা হয়েছে & target এর সাথে কতটুকু matched হয়েছে given raw picture টা সেটার উপর base করে scoring হয়। sign in করে নিলে best top 3 coder দের leaderboard এ name show করে।
Bonus of today
এখন Flex & Grid এর উপর এই short animation টা দেখে নিতে পারেন। Hopefully এটা একটা quick recap হিসেবে কাজ করবে আপনাদের।
