Flexbox Froggy

 (flexboxfroggy.com)
2 पॉइंट द्वारा GN⁺ 2023-10-01 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • CSS flexbox को सीधे लिखकर मेंढक को कमल-पत्ते तक पहुँचाने वाला एक इंटरैक्टिव लर्निंग गेम है, जिसमें alignment properties का असर स्क्रीन पर तुरंत देखा जा सकता है
  • पहले level में #pond पर display: flex; सेट होता है और justify-content के ज़रिए horizontal alignment बदला जाता है
  • justify-content flex-start, flex-end, center, space-between, space-around जैसे values के साथ container के अंदर items की व्यवस्था नियंत्रित करता है
  • उदाहरण के लिए justify-content: flex-end; लिखने पर मेंढक दाईं ओर के कमल-पत्ते पर चला जाता है, जिससे property और result का संबंध समझा जा सकता है
  • पूरा गेम 24 levels से बना है और इसमें हिंदी सहित कई भाषाएँ और colorblind mode उपलब्ध हैं

CSS flexbox को गेम के ज़रिए सीखने का तरीका

  • Flexbox Froggy एक ऐसा गेम है जिसमें Froggy और उसके दोस्तों को लक्ष्य स्थान तक पहुँचाते हुए CSS flexbox सीखा जाता है
  • स्क्रीन पर #pond के CSS code editor में properties लिखने पर मेंढकों की position बदल जाती है
  • पहले level में मेंढक को दाईं ओर के कमल-पत्ते तक पहुँचाने के लिए justify-content इस्तेमाल करना होता है
  • डिफ़ॉल्ट code में यह संरचना दिखाई जाती है
    • #pond {
    • display: flex;
    • }

justify-content से horizontal alignment सीखना

  • justify-content items को horizontal direction में align करने की property है
  • इस्तेमाल किए जा सकने वाले values इस प्रकार हैं
    • flex-start: items को container के बाईं ओर align करता है
    • flex-end: items को container के दाईं ओर align करता है
    • center: items को container के बीच में align करता है
    • space-between: items के बीच समान दूरी रखता है
    • space-around: items के चारों ओर समान दूरी रखता है
  • justify-content: flex-end; लिखने पर मेंढक दाईं ओर चला जाता है, इसलिए property value और layout result की तुरंत तुलना की जा सकती है

संरचना और संबंधित लर्निंग संसाधन

  • गेम पर Level 1 of 24 दिखाया जाता है, और language settings में हिंदी सहित कई भाषाएँ उपलब्ध हैं
  • CSS को और सीखने के लिए Grid Garden और Anchoreum जैसे संबंधित गेम जुड़े हुए हैं

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

1 टिप्पणियां

 
GN⁺ 2023-10-01
Hacker News की राय

  • CSS सीखने के लिए दूसरे अच्छे game-based resources भी हैं
    https://cssgridgarden.com/ — Grid के लिए Froggy जैसा
    https://cssbattle.dev/ — अलग-अलग challenges हल करने का platform, और community भी बड़ी है
    https://flukeout.github.io/ — CSS selectors सिखाता है
    https://css-animations.io/ — CSS animations की practice कराता है

    • पता नहीं अभी पूरी तरह free है या नहीं, लेकिन याद है कि पहले https://flexboxzombies.com/ भी आज़माया था
    • Flexbox Froggy में कुछ detailed explanation थोड़ी कम थी, लेकिन यहाँ से वह gap भर पाया
      https://css-tricks.com/understanding-flex-grow-flex-shrink-a... — flex-grow, flex-shrink, flex-basis समझाता है

  • CSS पर कई साल काम करने के बाद भी align-content और align-items जैसी flex-related properties हर बार confuse करती हैं
    ऐसा लगता है जैसे USB cable हमेशा उलटी लगती हो, और align व justify के साथ भी यही है
    CSS Grid भी सच में कमाल है। अब इतने शानदार layout options हो गए हैं कि हम काफी luxury में हैं

    • 90s के mid से HTML लिख रहा हूँ और web developer के रूप में भी 10 साल हो गए हैं, फिर भी CSS Tricks की flexbox guide और grid guide अक्सर reference करता हूँ
      दोनों की cheat sheets भी print करके desk पर रखी हैं, और वे सच में बहुत valuable resources हैं
      [0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      [1] https://css-tricks.com/snippets/css/complete-guide-grid/
    • नियम यह है: justify- main axis के लिए है, align- cross axis के लिए
      -content grid tracks या flex-wrap container की rows के लिए होता है, और -items individual child elements, यानी row या grid cell के अंदर के items के लिए
      फिर भी नाम और साफ़ होते तो अच्छा होता
    • शायद इसे पूरे flex-direction के लिए generalize करने की कोशिश की गई थी। इसलिए flex-align जैसी property parent की direction के हिसाब से बदलने वाली structure बन गई
      असल में direction बदलकर इससे बड़ा फायदा मिलना बहुत rare है
      पता नहीं यही एकमात्र वजह थी या नहीं, इसलिए इसे खराब choice नहीं कहूँगा, लेकिन कौन सा किस तरफ है यह याद न रहना मेरे साथ भी वही है
      अच्छा होता अगर names सीधे axis दिखाते, या properties parent direction से independent होतीं; तब तक cheat sheet इस्तेमाल करनी पड़ेगी
    • Flexbox और Grid सारी spotlight ले जाते हैं, लेकिन columns की usefulness भी नहीं भूलनी चाहिए: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
    • मैं flex-basis, flex-grow, flex-shrink को दिमाग में ठीक से बैठा ही नहीं पाता
      हालांकि इन पर अक्सर ध्यान देने की जरूरत नहीं पड़ती, इसलिए शायद इसी वजह से ये और याद नहीं रहते

  • ऐसे games से मैंने सच में बहुत कुछ सीखा। Vim भी https://vim-adventures.com/ से सीखा, और अब तो लगभग Vim के बिना रह ही नहीं सकता

  • पुराने HN posts:
    https://news.ycombinator.com/item?id=30251054 2022, 317 points, 31 comments
    https://news.ycombinator.com/item?id=22629903 2020, 27 points, 2 comments
    https://news.ycombinator.com/item?id=21796926 2019, 2 points, 0 comments
    https://news.ycombinator.com/item?id=18752031 2018, 3 points, 0 comments
    https://news.ycombinator.com/item?id=18731852 2018, 6 points, 1 comment
    https://news.ycombinator.com/item?id=15605783 2017, 4 points, 0 comments
    https://news.ycombinator.com/item?id=14349739 2017, 3 points, 0 comments
    https://news.ycombinator.com/item?id=10652909 2015, 315 points, 69 comments

  • शानदार। पहले जब मैं flexbox सीख रहा था, तब मैंने इसका इस्तेमाल किया था
    इसी creator ने https://codepip.com/games/grid-garden/ भी बनाया है, और वही approach अपनाकर CSS Grid सिखाता है

    • मुझे लगता है कि games CSS सीखने का वाकई अच्छा तरीका हैं
      क्योंकि जो आप पहले से सीख चुके होते हैं, उसकी वजह से आसान दिखने वाली समस्याओं को धीरे-धीरे कठिन तरीके से हल करते हुए एक बहुत natural learning path बन जाता है
      पहले CSS selectors सीखने के लिए मैंने यह game मज़े से खेला था: https://flukeout.github.io/

  • Guess CSS में भी एक Flexbox section है, लेकिन इसका focus CSS लिखने के बजाय उसे पढ़ने पर ज़्यादा है: https://www.guess-css.app/

    • CSS position के बारे में मैं सचमुच कुछ भी नहीं समझता था, यह पक्का है
      बाकी questions मैं लगातार सही कर पा रहा था, लेकिन position में बार-बार गलत हो रहा था

  • बहुत उपयोगी। मैं हमेशा flexbox की vertical alignment आखिर में search ही करता हूँ
    जल्दी में flexbox knowledge को तेजी से refresh करने में मदद के लिए, अगर frogs को 3x3 grid में drag and drop करने पर उसके हिसाब से flexbox CSS code output करने वाला feature हो, तो अच्छा रहेगा
    फिर भी यह बहुत बारीकी से बनाया गया tutorial है
    ऐसा कहने की वजह यह है कि मैंने personally नए CSS features को लगातार follow करना छोड़ दिया है। IE7 के दौर से CSS को कभी-कभार इस्तेमाल करता रहा हूँ, और vendor prefix हाथ से लिखने वाले ज़माने और Chrome Canary द्वारा ठूंसे जा रहे नए features देखने के बाद अब CSS tricks को दिमाग में बनाए रखने की energy नहीं है

    • अब tricks जैसी चीज़ें बहुत कम रह गई हैं, और follow करने को भी ज़्यादा कुछ नहीं है। Flexbox और Grid basically final stage हैं
      ज़्यादातर UI में flexbox ही काफी है, और मूल रूप से यह stack/group या vbox/hbox की तरह items को vertical·horizontal तरीके से arrange करने का tool है
      flexbox सीख लें। CSS layout में आई चीज़ों में यह सबसे उपयोगी और सच में बहुत simple है। Spacing के लिए gap, arrangement के लिए justify और align — 99% cases वहीं खत्म हो जाते हैं

  • मुझे Flexbox Froggy पसंद है। कहा जा सकता है कि developers की पूरी एक generation ने इसी site से flexbox सीखा। मैंने भी

    • मेरे मामले में Flexbox Froggy की वजह से flexbox का concept आखिरकार दिमाग में बिल्कुल fit बैठ गया
      उस समय मैं पहले से 15 साल से CSS इस्तेमाल कर रहा था
      कमाल का educational tool है

  • Josh Comeau की flexbox interactive guide भी देखने लायक है: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

  • अच्छा है। Tailwind version भी हो तो अच्छा रहेगा