CSS শিখা একটি ফ്രাস্ট্রেটিং অভিজ্ঞতা হতে পারে, কিন্তু কমপক্ষে এটি বোরিং হয়ে যাবেনা! কোডিং শিখার সবচেয়ে ভালো দিক হচ্ছে কোডিং-এ দক্ষ লোকজন গেম তৈরি করার দক্ষতাও রাখেন যাতে অন্যদের কোডিং শেখাতে পারেন। বেসিক CSS শিখতে প্র্যাকটিস এবং এক্সপেরিমেন্টের বিকল্প নেই, কিন্তু গেমগুলো অবশ্যই সাহায্য করে, এবং গ্রিড ও ফ্লেক্সবক্সের মত নতুন লেআউট মডেল বিশেষ করে হ্যান্ডস-অন লার্নিং মডেল থেকে লাভ পায়।
এখানে কিছু গেম যা আপনাকে অল্প সময়ে CSS মাস্টার করতে সাহায্য করবে।
১. CSS Diner: CSS Selectors
খুব বেসিক, ঠিক না? এলিমেন্ট, ক্লাস, আইডি সিলেক্ট করুন... হয়তো পসিউডো-ক্লাসও? আর কী আছে? আসলে এলিমেন্ট সিলেক্ট করার উপায় আপনার মনে থাকা চেয়ে বেশি, এবং CSS Diner আপনাকে CSS দিয়ে খাবারের টুকরো সিলেক্ট করিয়ে সেগুলো কীভাবে ব্যবহার করবেন সেটি শেখাবে। কিছু চ্যালেঞ্জ একটু কনফিউজিং হতে পারে, কিন্তু এটি কোডিং—গুগল করলে কোনো লজ্জা নেই।
২. Flexbox Zombies
Flexbox Zombies একটি অবিশ্বাস্যভাবে ভালো ডেভেলপড গেম/কোর্স যা আপনাকে ফ্লেক্সবক্স ব্যবহার শিখাবে একটি ইন্টুইটিভ, এনগেজিং, এবং সেলফ-রিইনফোর্সিং গেমের মাধ্যমে যা মূলত জম্বি শুট করার ওপর ভিত্তি করে যেখানে অস্ত্রগুলো ফ্লেক্সবক্স কোড দ্বারা কন্ট্রোলড। এটি আপনাকে বেসিক থেকে অ্যাডভান্সড পর্যন্ত নেয় অনেক লেভেলের মাধ্যমে যা একটি স্টোর이라ইন, কুল গ্রাফিক্স, এবং জম্বি-স্লেয়িং একশনের সাথে আসে—আপনি ভুলেই যেতে পারেন আপনি CSS শিখছেন।
ফ্লেক্সবক্স নিজে একটি অসাধারণ টেকনোলজি কন্টেন্ট রেসপনসিভলি এক ডাইমেনশনে অর্গানাইজ করার জন্য, এবং আপনি যদি ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্টে কিছু করেন, তবে আপনাকে এটি শিখা উচিত। আপনি এটি বাদ দিয়ে যাচ্ছেন কিনা, Flexbox Zombies একটি দুর্দান্ত বাহানা একটি গেম খেলার যা আসলে আপনাকে কিছু শিখায়। কাশ সব শিক্ষা এতই সহজ হত!
এই ক্রিয়েটর CSS Grid-এর জন্য "Grid Critters" নামে আরেকটি গেম-কোর্স ডিজাইন করেছেন। এটি ফ্রি নয়, কিন্তু Flexbox Zombies পছন্দ হলে আপনি টাকা দিয়ে কিনতে পারেন।
৩. Grid Garden
ব্যক্তিগতভাবে আমি মনে করি ফ্লেক্সবক্স ঠিক আছে, কিন্তু এটি এক-ডাইমেনশনাল (রো অথবা কলাম) লেআউটে যেন চমক দেয়, তাই বড় প্রজেক্ট এবং টেমপ্লেটের জন্য আপনি গ্রিডের দিকে যাবেন (হয়তো গ্রিড সেলের ভিতরে কিছু ফ্লেক্সবক্স কন্টেইনার সহ)। একবার বুঝলে এটি সুন্দর, পরিষ্কার এবং অসম্ভব, কিন্তু লার্নিং কার্ভ থাকতে পারে, যেখানে Grid Garden (এবং উপরের Grid Critters) সাহায্য করতে পারে।
Grid Garden একটি বিনামূল্য গেম যেখানে আপনাকে একটি বাগান লেআউট করতে হবে যাতে আপনার গাজরগুলোর পানি পড়ছে এবং ঘাসফুসলগুলো পয়েজন খাচ্ছে—এবং আশ্চর্য, গ্রিড এই কাজের জন্য পर्फেক্ট! এটি আপনাকে বেসিক গ্রিড পজিশনিংয়ের একটি সुदৃঢ় ধারণা দেবে যা আপনি আপনার সাইট লেআউটে প্রয়োগ করতে পারবেন।
৪. Flexbox Defense
ফ্লেক্সবক্সের বেসিক জানলেও "justify" এবং "align" ঠিক রাখতে পারছেন না? Flexbox Defense একটি টাওয়ার ডিফেন্স গেমের আড়ালে ফ্লেক্সবক্স টিউটোরিয়াল যা নিশ্চিত করবে আপনি justify-content এবং align-self মনে রাখেন—অথবা মরুন। কিন্তু আপনি আবার চেষ্টা করতে পারেন। আপনি যদি সেই গেমগুলো পছন্দ না করেন যা শুধু একটি সঠিক উত্তর kabul করে, তবে আপনি এটিকে পছন্দ করবেন, কারণ এটি আপনাকে যেকোনো জায়গায় টাওয়ার প্লেস করতে দেয় এবং আপনি নিজে সফল বা ব্যর্থ হন।
৫. Flexbox Froggy
আপনি খুব সময় গেমিং করে বिताয়তে পারেন শুধু বিদ্যমান Flexbox টিউটোরিয়াল গুলো পূরণ করে, তবে এটি একাধিক দিন বা সপ্তাহে ছড়িয়ে দেয়া ভালো যাতে মেমরি রিফ্রেশার মিলে। Flexbox Froggy সেটি জন্য পেরফেক্ট—এটি আপনাকে শূন্য থেকে নয়, কিন্তু আপনি যদি কখনো কমান্ডগুলো ভুলে যান, তবে এই গেম কয়েক মিনিটে ড্যাশ করে আপনাকে আবার আপ-টু-স্পীডে নিয়ে আসবে।
৬. CodePip Games
আপনি যদি Grid Garden এবং Flexbox Froggy চেক করে থাকেন, তবে আপনি ইতিমধ্যে CodePip-এর কাজের কিছু উদাহরণ দেখেছেন। এগুলো শুধু তাদের অফার করা দুটি বিনামূল্য গেম। আপনি যদি তাদের সাইটে প্রো অ্যাকাউন্টে সাইন আপ করেন, তবে জেনারেল CSS রিভিউ থেকে JavaScript পর্যন্ত গেম আছে।
এই গেমগুলো কতটুকু CSS শিখাবে?
এই গেমগুলো রান করলে আপনি কিছু বেসিক কনসেপ্ট খুব ভালো শিখতে পারবেন—বিশেষ করে ফ্লেক্সবক্স শিখতে চাইলে। কিন্তু আলティমেটলি, গেমগুলো আপনাকে শুধু কোন শব্দগুলো টাইপ করতে হয় সেটি শিখাবে। আপনাকে সেগুলো প্র্যাকটিস করতে হবে আপনি যদি বুঝতে চান কীভাবে ব্যবহার করবেন। একটি ভালো কোড এডিটর এবং কিছু আইডিয়া التى আপনি ইমপ্লিমেন্ট করতে চান নিন এবং এক্সপেরিমেন্ট শুরু করুন!
