वर्चुअल गार्डन गेम से CSS Grid सीखें

 (cssgridgarden.com)
5 पॉइंट द्वारा GN⁺ 2024-06-04 | 1 टिप्पणियां | WhatsApp पर शेयर करें

Grid Garden परिचय

Grid Garden क्या है?

  • Grid Garden CSS Grid layout सीखने के लिए बनाया गया एक गेम है।
  • उपयोगकर्ता grid-column-start प्रॉपर्टी का इस्तेमाल करके उस क्षेत्र में पानी देते हैं जहाँ गाजर लगी होती है, और इसी तरह गेम आगे बढ़ता है।

उदाहरण कोड की व्याख्या

  • grid-column-start: 3; का मतलब है कि पानी उस क्षेत्र में दिया जाएगा जो grid की तीसरी vertical line से शुरू होता है।
  • grid के हर column और row को 20% जगह घेरने के लिए सेट किया गया है।
#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {}

अतिरिक्त सीखने की सामग्री

  • Flexbox Froggy के ज़रिए CSS Flexbox सीखा जा सकता है।

GN⁺ की राय

  • शैक्षिक मूल्य: Grid Garden गेम के माध्यम से CSS Grid layout को मज़ेदार तरीके से सीखने का एक अच्छा टूल है।
  • प्रैक्टिस का महत्व: इस तरह के interactive learning tools थ्योरी की तुलना में प्रैक्टिस के ज़रिए अधिक प्रभावी ढंग से सीखने में मदद करते हैं।
  • तकनीकी विस्तार: CSS Grid और Flexbox आधुनिक web design की महत्वपूर्ण तकनीकें हैं, इसलिए इन्हें अच्छी तरह समझना ज़रूरी है।
  • अन्य टूल की सिफारिश: CSS Grid के अलावा CSS Diner जैसे दूसरे learning tools भी आज़माने की सिफारिश की जाती है।
  • ध्यान देने योग्य बात: गेम के ज़रिए बुनियादी अवधारणाएँ सीखने के बाद, उन्हें वास्तविक projects में कैसे लागू करना है यह सीखना भी महत्वपूर्ण है।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-06-04
Hacker News की राय
  • Rachel Andrews की सीरीज़ बैकएंड डेवलपर्स के लिए भी आधुनिक UI ऐप बनाने में बहुत मददगार है.
  • टीम के साथ 30 मिनट का शो-एंड-टेल किया गया, और गैर-डेवलपर्स ने भी हिस्सा लिया, जिससे बुनियादी प्रोग्रामिंग कौशल विकसित करने में फायदा हुआ.
  • गेम मज़ेदार है, लेकिन यह केवल समस्या हल करने पर ध्यान केंद्रित करवा सकता है, जिससे गहरी समझ में बाधा आ सकती है. समाधान के तौर पर कोशिशों की संख्या पर पेनल्टी देने का सुझाव दिया गया.
  • गेम की अच्छी बात यह है कि absolute positioning देखकर जवाब को सत्यापित किया जा सकता है, और बुरी बात यह है कि हर कोशिश पर Google Analytics भेजा जाता है.
  • CSS Zen Garden पहले CSS सीखने और डिज़ाइन से प्रेरणा पाने का एक शानदार स्रोत था.
  • यह गेम और Flexbox Froggy, मज़ेदार तरीके से CSS layout सीखने के लिए अच्छे हैं.
  • पहले 10 लेवल खेलने के बाद CSS को लेकर झुंझलाहट और बढ़ गई.
  • पहले हुई एक बड़ी चर्चा का लिंक साझा किया गया.
  • Flexbox Froggy, Grid Garden की तुलना में ज़्यादा मददगार रहा. CSS Grid अभी भी ठीक से समझ नहीं आता.
  • हाल में Subgrid शामिल किया गया है या नहीं, इस बारे में जिज्ञासा थी.