गेम्स के साथ CSS सीखें: Flexbox Froggy और Grid Garden

एक एक्सिस के साथ अलाइनमेंट की प्रैक्टिस करने के लिए Flexbox Froggy से शुरू करें, फिर ग्रिड लाइनों के बीच किसी आइटम को रखने की प्रैक्टिस करने के लिए Grid Garden का इस्तेमाल करें। हर गेम एक्सरसाइज के बाद, अपने खुद के एक छोटे पेज में आइडिया को दोबारा लिखें। एक काम का नतीजा यह है कि आप यह समझा पाएँगे कि लेआउट बदलने पर कोई डिक्लेरेशन क्यों काम करता है, बजाय इसके कि किसी खास लेवल का जवाब याद रखें।

गेम्स के साथ CSS कैसे सीखें, फिर उसे अप्लाई करें

यह तरीका दो गेम्स को तीन ओरिजिनल एक्सरसाइज के साथ जोड़ता है। यह उन लोगों के लिए सही है जो एक आसान CSS रूल पढ़ सकते हैं और विज़िबल फीडबैक चाहते हैं। यह पूरा वेब-डेवलपमेंट कोर्स नहीं है: असली इंटरफेस को भी पढ़ने लायक कंटेंट, रिस्पॉन्सिव बिहेवियर, कीबोर्ड एक्सेस और अलग-अलग अमाउंट के टेक्स्ट के साथ टेस्टिंग की ज़रूरत होती है।

अपने सवाल के लिए सही एक्सरसाइज चुनें

गेम्स Codepip के हैं। Cozcade हर होस्ट किए गए गेम को उसके मैचिंग गाइड से जोड़ता है: Flexbox Froggy और उसकी गाइड; Grid Garden और उसकी गाइड। ओरिजिनल Froggy और Grid Garden पेज लेखकों के अपने वर्शन देते हैं। यहां कोड एक्सरसाइज़ को फ़ॉलो करते समय कीबोर्ड का इस्तेमाल करें।

सबसे पहले, कोई प्रॉपर्टी चुनने से पहले एक्सिस को नाम दें

फ्लेक्सबॉक्स में एक मेन एक्सिस और एक क्रॉस एक्सिस होता है। flex-direction मेन दिशा सेट करता है; justify-content आइटम को उस मेन एक्सिस पर रखता है, जबकि align-items क्रॉस एक्सिस से जुड़ा होता है। एक नॉर्मल लेफ्ट-टू-राइट रो में, मेन एक्सिस हॉरिजॉन्टल होता है। दिशा को कॉलम में बदलें और यह वर्टिकल हो जाता है। ये डेफिनिशन MDN के फ्लेक्सबॉक्स इंट्रोडक्शन में बताई गई हैं।

फ्रॉगी में डिक्लेरेशन ट्राई करने से पहले, बताएं कि आप आइटम को किस दिशा में ले जाना चाहते हैं। फिर उस दिशा को करंट मेन एक्सिस के हिसाब से नाम दें। यह गलत जवाब को एक खास सवाल में बदल देता है: क्या आपने गलत प्रॉपर्टी, गलत वैल्यू, या गलत एक्सिस चुना?

एक्सरसाइज़ 1: एक ग्रुप को आखिर में ले जाएं

एक कंटेनर के अंदर तीन छोटे आइटम बनाएं। यह एक ओरिजिनल एक्सरसाइज है, कोई कॉपी किया हुआ गेम लेवल या आंसर की नहीं।

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

आपका मकसद तीनों आइटम को बिना उनका ऑर्डर बदले या हर आइटम को अलग मार्जिन दिए, एक साथ दाएं किनारे की ओर ले जाना है। रिज़ल्ट का अंदाज़ा लगाएं, फिर कंटेनर में justify-content: flex-end जोड़ें।

अब इसकी तुलना justify-content: space-between से करें। पहला ऑप्शन ग्रुप को मूव करता है; दूसरा आइटम के बीच मौजूद जगह को बांटता है। एक पतला और एक चौड़ा कंटेनर ट्राई करें। बताएं कि आप तीन बटन के लिए कौन सा वर्शन चुनेंगे जो एक साथ पास रहने चाहिए। दिखने वाला रिज़ल्ट एक वैल्यू याद रखने से ज़्यादा मायने रखता है।

एक्सरसाइज़ 2: वही इंस्ट्रक्शन रखें, एक्सिस बदलें

उस कंटेनर को दोबारा इस्तेमाल करें, flex-direction: column जोड़ें, height: 12rem सेट करें, और justify-content: flex-end रखें। आइटम अब नीचे की ओर इकट्ठा होते हैं। आपका डिक्लेरेशन “मूव राइट” कमांड नहीं बना: यह अभी भी मेन एक्सिस के साथ काम करता है, जिसे आपने बदला था।

इसके बाद, align-items: flex-start जोड़ें। उस जोड़ने से पहले और बाद के अरेंजमेंट की तुलना करें। बताई गई लेफ्ट-टू-राइट दिशा के साथ, आइटम क्रॉस एक्सिस पर लेफ्ट की ओर अलाइन होते हैं। डिक्लेरेशन हटा दें और डिफ़ॉल्ट स्ट्रेचिंग बिहेवियर को फिर से देखें।

“यह बस काम करता है” का इस्तेमाल किए बिना दोनों बदलावों का छोटा एक्सप्लेनेशन लिखें। उदाहरण के लिए, एक्सिस, खाली जगह और जिस ग्रुप को पोज़िशन किया जा रहा है, उसे पहचानें। अगर आप कोई रिज़ल्ट नहीं समझा सकते हैं, तो उदाहरण को दो आइटम तक कम करें और एक बार में सिर्फ़ एक डिक्लेरेशन बदलें। यह आदत गेम में वापस लाने की है।

इसके बाद, ग्रिड ट्रैक को उसकी बाउंड्री से अलग करें।

ग्रिड प्लेसमेंट में रो और कॉलम के चारों ओर लाइनें इस्तेमाल होती हैं। पाँच साफ़ कॉलम में छह बाउंड्री लाइनें होती हैं। कॉलम लाइन 3 से लाइन 5 तक रखा गया आइटम तीन नहीं, बल्कि दो कॉलम में फैला होता है। ट्रैक, सेल और लाइनों के बीच अंतर के लिए MDN का ग्रिड इंट्रोडक्शन देखें।

Grid Garden में, कोई भी जगह आज़माने से पहले शुरू और आखिर की बाउंड्री पढ़ें। अगर स्पेस गिनना कन्फ्यूजिंग है, तो अपने पेज पर बाउंड्री बनाएँ या लेबल करें।

एक्सरसाइज़ 3: दो लाइनों के बीच एक कार्ड रखें

पांच कॉलम वाला बोर्ड बनाएं और उसे एक कार्ड दें:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

पेज खोलने से पहले अंदाज़ा लगाएं कि कार्ड कहां दिखेगा। फिर सिर्फ़ कॉलम प्लेसमेंट बदलकर इसे पूरे बोर्ड पर फैलाएं। ऊपर दिए गए पांच साफ़ कॉलम के साथ, grid-column: 1 / 6 पहली बाउंड्री से आखिरी बाउंड्री तक पहुंचता है।

आखिर में, टेक्स्ट को बहुत लंबे वाक्य में बदलें और ब्राउज़र को नैरो बनाएं। प्लेसमेंट रूल सही रह सकता है, जबकि कार्ड का फिक्स्ड-हाइट प्रेजेंटेशन उसके कंटेंट के लिए सही नहीं रहता। गेम एक्सरसाइज़ को हल करने से लेआउट का एक हिस्सा सिखाया जाता है; इस्तेमाल करने लायक पेज बनाने के लिए कंटेंट को भी चेक करना ज़रूरी है।

गेम की प्रोग्रेस को फीडबैक के तौर पर इस्तेमाल करें, मास्टरी के सबूत के तौर पर नहीं।

एक सफल एक्सरसाइज के बाद, एक अंदाज़ा बदलें: दिशा, आइटम की संख्या, उपलब्ध चौड़ाई या टेक्स्ट की लंबाई। देखने से पहले नतीजे का अंदाज़ा लगा लें। अगर आप आइडिया को अपना सकते हैं और बदलाव को समझा सकते हैं, तो आपने एक लेवल के जवाब से ज़्यादा सीख लिया है।

किसी गेम पर वापस आते समय, चेक करें कि आप वही वर्शन और ब्राउज़र एनवायरनमेंट खोल रहे हैं। Cozcade अकाउंट फेवरेट उन गेम्स की पहचान करते हैं जिन्हें आप दोबारा देखना चाहते हैं; वे यह वादा नहीं करते कि किसी गेम की अंदरूनी लेसन प्रोग्रेस डिवाइस के बीच ट्रांसफर होती है। प्रोग्रेस की जांच करते समय स्टोर किए गए साइट डेटा को डिलीट करने से बचें, और किसी खास एक्सपोर्ट फीचर का इस्तेमाल तभी करें जब वह खास गेम ऐसा फीचर देता हो।

मैचिंग गाइड के साथ जारी रखें

एक्सिस और अलाइनमेंट प्रैक्टिस के लिए फ्रॉगी गाइड और प्लेसमेंट सवालों के लिए Grid Garden गाइड का इस्तेमाल करें। अगर आप बाद में किसी और तरह की प्रैक्टिस करना चाहते हैं, तो लर्निंग गेम्स ब्राउज़ करें।

ऊपर दी गई एक्सरसाइज इस आर्टिकल के लिए लिखी गई थीं। रेफरेंस पेज 11 अक्टूबर, 2026 को चेक किए गए थे। हमारे रिकॉर्ड किए गए गेमप्ले चेक में कुछ डेस्कटॉप इंटरैक्शन शामिल हैं, न कि सभी लेवल या पूरा मोबाइल कोर्स पूरा करना। यह आर्टिकल एक प्रैक्टिस सीक्वेंस सिखाता है; यह कोई क्वालिफिकेशन नहीं देता है या आपके अपने इंटरफेस को टेस्ट करने की जगह नहीं लेता है।

गेम्स जिन्हें आप Cozcade पर खेल सकते हैं

Flexbox FroggyGrid Garden