Flexbox Froggy

• CSS code सीखने में मदद करने वाले गेम 'Flexbox Froggy' का परिचय देने वाला लेख
• 'justify-content' प्रॉपर्टी का उपयोग करके मेंढक को कमल-पत्तों तक पहुँचाने वाला गेम
• 'justify-content' प्रॉपर्टी कंटेनर के अंदर items को क्षैतिज रूप से align करती है
• यह प्रॉपर्टी कई values स्वीकार करती है, जैसे 'flex-start' (items को बाईं ओर align करना), 'flex-end' (items को दाईं ओर align करना), 'center' (items को बीच में align करना), 'space-between' (items के बीच समान अंतर), 'space-around' (items के चारों ओर समान अंतर)
• 'justify-content: flex-end;' मेंढक को दाईं ओर ले जाने का उदाहरण देता है
• Codepip द्वारा बनाया गया 'Flexbox Froggy' गेम, साथ में GitHub और Twitter लिंक उपलब्ध
• CSS Grid सीखना चाहने वालों के लिए 'Grid Garden' की सिफारिश करने वाला लेख

[GN⁺]

Hacker News की राय

• 'Flexbox Froggy' के बारे में लेख, CSS सीखने का गेम
• CSS सीखने के लिए उपयोगकर्ताओं द्वारा सुझाए गए इसी तरह के गेम, cssgridgarden.com, cssbattle.dev, flukeout.github.io, और css-animations.io
• उपयोगकर्ता align-content और align-items जैसी flex properties को याद रखने में कठिनाई बताते हैं, और इसकी तुलना USB केबल को गलत तरफ से लगाने की आम समस्या से करते हैं
• उपयोगकर्ता CSS Grid और उसके द्वारा दिए जाने वाले layout options की तारीफ करते हैं
• उपयोगकर्ता साझा करते हैं कि उन्होंने 'Flexbox Froggy' जैसे गेम्स के ज़रिए बहुत कुछ सीखा
• सभी flexbox properties को याद रखने में कठिनाई झेलने वालों के लिए एक उपयोगकर्ता द्वारा बनाई गई cheat sheet, darekkay.com/flexbox-cheatsheet
• उपयोगकर्ताओं को 'Flexbox Froggy' खास तौर पर flexbox की अपनी जानकारी ताज़ा करने के लिए उपयोगी लगता है
• एक उपयोगकर्ता ऐसा फीचर सुझाता है जिसमें मेंढकों को 3x3 grid पर drag-and-drop करके आउटपुट में flexbox CSS code पाया जा सके
• CSS पढ़ने पर अधिक केंद्रित एक और गेम, guess-css.app, की सिफारिश की गई है
• उपयोगकर्ता flexbox से जुड़े अपने अनुभवों पर चर्चा करते हैं; कुछ order property के बारे में सीखते हैं, जबकि कुछ justify-content और align-items के naming difference को लेकर उलझन जताते हैं
• CSS सीखने के मज़ेदार तरीके के रूप में सुझाया गया एक और गेम, flexboxzombies.com