
CSS सीखना एक निराशाजनक अनुभव हो सकता है, लेकिन कम से कम यह उबाऊ नहीं होना चाहिए! कोड सीखने के बारे में सबसे अच्छी चीजों में से एक यह है कि जो लोग कोडिंग में अच्छे होते हैं उनके पास ऐसे गेम बनाने का कौशल भी होता है जो अन्य लोगों को कोड करना सिखाते हैं। बुनियादी सीएसएस सीखने में अभ्यास और प्रयोग का कोई विकल्प नहीं है, लेकिन गेम निश्चित रूप से मदद करते हैं, और ग्रिड और फ्लेक्सबॉक्स जैसे नए लेआउट मॉडल विशेष रूप से हैंड्स-ऑन लर्निंग मॉडल से लाभान्वित होते हैं।
यहां कुछ गेम दिए गए हैं जो आपको कुछ ही समय में CSS में महारत हासिल करने की अनुमति देते हैं।
<एच2>1. सीएसएस डायनर:सीएसएस चयनकर्ता
बहुत बुनियादी, है ना? तत्वों, वर्गों, आईडी का चयन करें ... शायद छद्म वर्ग? अब क्या शेष है? वास्तव में, आपके विचार से तत्वों का चयन करने के और भी तरीके हैं, और सीएसएस डायनर आपको सीएसएस के साथ भोजन के टुकड़ों का चयन करने के लिए कहकर उनका उपयोग करना सिखाना चाहता है। कुछ चुनौतियाँ थोड़ी भ्रमित करने वाली हो सकती हैं, लेकिन यह कोडिंग है - इसे गुगल करने में कोई शर्म नहीं है।
2. फ्लेक्सबॉक्स लाश
फ्लेक्सबॉक्स लाश एक बहुत अच्छी तरह से विकसित गेम / कोर्स है जो आपको एक सहज, आकर्षक और आत्म-सुदृढ़ीकरण गेम के साथ फ्लेक्सबॉक्स का उपयोग करने का तरीका सिखाने का वादा करता है जो ज्यादातर आपके चारों ओर घूमता है जो फ्लेक्सबॉक्स कोड द्वारा नियंत्रित हथियारों के साथ लाश की शूटिंग करता है। यह आपको कहानी, शानदार ग्राफ़िक्स और ज़ॉम्बी-स्लेइंग एक्शन के साथ आने वाले कई स्तरों के दौरान बहुत बुनियादी बातों से लेकर उन्नत सामग्री तक ले जाता है - आप यह भी भूल सकते हैं कि आप CSS सीख रहे हैं।

फ्लेक्सबॉक्स अपने आप में एक आयाम के साथ सामग्री को प्रतिक्रियात्मक रूप से व्यवस्थित करने के लिए एक शानदार तकनीक है, और यदि आप फ्रंट-एंड वेब विकास के साथ कुछ भी करते हैं, तो इसे सीखने के लिए आप स्वयं पर निर्भर हैं। आप इसे बंद कर रहे हैं या नहीं, Flexbox Zombies एक ऐसा गेम खेलने का एक उत्कृष्ट बहाना है जो वास्तव में आपको कुछ सिखाता है। यदि केवल सारी शिक्षा इसी तरह हो सकती है, है ना?
उसी निर्माता ने CSS ग्रिड के लिए "ग्रिड क्रिटर्स" नामक एक गेम-कोर्स भी डिज़ाइन किया है। यह मुफ़्त नहीं है, लेकिन अगर आपको फ्लेक्सबॉक्स ज़ॉम्बीज़ पसंद है तो आप इस पर नकद देना चुन सकते हैं।
3. ग्रिड गार्डन
व्यक्तिगत रूप से, मुझे लगता है कि फ्लेक्सबॉक्स ठीक है, लेकिन यह वास्तव में एक-आयामी (पंक्ति या) पर चमकता है कॉलम) लेआउट, इसलिए बड़ी परियोजनाओं और टेम्प्लेट के लिए, आप ग्रिड की ओर मुड़ना चाहेंगे (शायद ग्रिड कोशिकाओं के अंदर कुछ फ्लेक्सबॉक्स कंटेनरों के साथ)। एक बार जब आप इसका पता लगा लेते हैं, तो यह साफ-सुथरा और अद्भुत होता है, लेकिन इसमें कुछ सीखने की अवस्था हो सकती है, जहां ग्रिड गार्डन (और उपरोक्त ग्रिड क्रिटर्स) मदद कर सकता है।

ग्रिड गार्डन एक मुफ्त गेम है जहां आपको एक बगीचा लगाना होता है ताकि आपकी गाजर को पानी पिलाया जा सके और खरपतवारों को जहर दिया जा सके - और यह पता चलता है कि ग्रिड इस कार्य के लिए एकदम सही है! यह आपको बुनियादी ग्रिड स्थिति की एक ठोस समझ देगा जिसे आप तब अपने स्वयं के साइट लेआउट पर लागू कर सकते हैं
4. फ्लेक्सबॉक्स रक्षा

फ्लेक्सबॉक्स की मूल बातें पहले से ही जानते हैं लेकिन "औचित्य" और "संरेखित" को बिल्कुल सीधा नहीं रख सकते हैं? फ्लेक्सबॉक्स डिफेंस एक फ्लेक्सबॉक्स ट्यूटोरियल है जो टॉवर डिफेंस गेम के रूप में प्रच्छन्न है जो यह सुनिश्चित करेगा कि आपको याद रहे कि आपको अपनी जस्टिफाई-कंटेंट और अलाइन-सेल्फ-या मरना याद है। लेकिन आप बस फिर से कोशिश कर सकते हैं। यदि आप कभी भी उन खेलों के प्रशंसक नहीं रहे हैं जो केवल एक सही उत्तर को स्वीकार करते हैं, तो आप इसे पसंद करेंगे, क्योंकि यह आपको अपनी पसंद के अनुसार टावरों को स्थापित करने और अपने दम पर सफल या असफल होने की अनुमति देता है।
5. फ्लेक्सबॉक्स मेंढक

आप शायद मौजूदा फ्लेक्सबॉक्स ट्यूटोरियल के माध्यम से एक ठोस दोपहर का गेमिंग प्राप्त कर सकते हैं, लेकिन शायद यह सुनिश्चित करने के लिए कि आपको बहुत सारे मेमोरी-रिफ्रेशर मिलते हैं, इसे कुछ दिनों या हफ्तों में बाहर रखना बेहतर है। फ्लेक्सबॉक्स फ्रॉगी इसके लिए एकदम सही है - यह आपको शून्य से ऊपर नहीं ले जाता है, लेकिन यदि आप कभी भी अपने आप को आदेशों को भूल जाते हैं, तो आप अपने आप को गति में वापस लाने के लिए कुछ ही मिनटों में इस गेम के माध्यम से डैश कर सकते हैं।
6. कोडपिप गेम्स

यदि आपने ग्रिड गार्डन और फ्लेक्सबॉक्स फ्रॉगी की जाँच की है, तो आपने कोडपिप के काम के कुछ उदाहरण पहले ही देख लिए हैं। वे सिर्फ दो मुफ्त गेम हैं जो वे पेश करते हैं। यदि आप उनकी साइट पर एक समर्थक खाते के लिए साइन अप करते हैं, तो उनके पास सामान्य सीएसएस समीक्षा से लेकर जावास्क्रिप्ट तक के गेम भी हैं।
यह मुझे कितना CSS सिखाएगा?
इन खेलों के माध्यम से चलने से आपको कुछ बुनियादी अवधारणाओं को अच्छी तरह से सीखने में मदद मिल सकती है - खासकर यदि आप फ्लेक्सबॉक्स सीखना चाहते हैं। अंततः, हालांकि, गेम आपको केवल यह सिखा सकते हैं कि कौन से शब्द टाइप करने हैं। यदि आप वास्तव में यह जानना चाहते हैं कि उनका उपयोग कैसे करना है, तो आपको उन्हें अभ्यास में लाना होगा। अपने आप को एक अच्छा कोड संपादक और कुछ विचार प्राप्त करें जिन्हें आप लागू करना चाहते हैं और गड़बड़ करना शुरू करें!