Flexbox Froggy

 (flexboxfroggy.com)
2 puan yazan GN⁺ 2023-10-01 | 1 yorum | WhatsApp'ta paylaş
  • CSS kodu öğrenmeye yardımcı olan Flexbox Froggy adlı oyunu tanıtan bir yazı
  • justify-content özelliğini kullanarak kurbağaları nilüfer yapraklarına yönlendirdiğiniz bir oyun
  • justify-content özelliği, bir kapsayıcı içindeki öğeleri yatay olarak hizalar
  • Bu özellik flex-start (öğeleri sola hizalar), flex-end (öğeleri sağa hizalar), center (öğeleri ortaya hizalar), space-between (öğeler arasında eşit boşluk), space-around (öğelerin etrafında eşit boşluk) gibi çeşitli değerleri destekler
  • justify-content: flex-end; ifadesinin kurbağayı sağa taşıdığı bir örnek sunuluyor
  • Codepip tarafından oluşturulan Flexbox Froggy oyunu; GitHub ve Twitter bağlantıları da veriliyor
  • CSS Grid öğrenmek isteyenlere Grid Garden öneriliyor

İlgili okumalar

1 yorum

 
GN⁺ 2023-10-01
Hacker News görüşleri
  • CSS öğrenme oyunu 'Flexbox Froggy' hakkındaki yazı
  • Kullanıcıların CSS öğrenmek için önerdiği benzer oyunlar: cssgridgarden.com, cssbattle.dev, flukeout.github.io ve css-animations.io
  • align-content ve align-items gibi flex özelliklerini hatırlamakta zorlandığını söyleyen kullanıcılar; bunu USB kablosunu ters takma gibi yaygın bir sorunla karşılaştırıyorlar
  • CSS Grid'i ve sunduğu yerleşim seçeneklerini öven kullanıcılar
  • 'Flexbox Froggy' gibi oyunlar sayesinde çok şey öğrendiklerini paylaşan kullanıcılar
  • Tüm flexbox özelliklerini hatırlamakta zorlananlar için bir kullanıcının hazırladığı kısa rehber: darekkay.com/flexbox-cheatsheet
  • Kullanıcılar, özellikle flexbox bilgilerini tazelemek için 'Flexbox Froggy'nin çok faydalı olduğunu düşünüyor
  • Bir kullanıcı, kurbağaları 3x3 bir grid üzerinde sürükleyip bırakarak çıktı olarak flexbox CSS kodu alınabilecek bir özellik öneriyor
  • CSS okumaya daha fazla odaklanan başka bir oyun olan guess-css.app de öneriliyor
  • Kullanıcılar flexbox ile ilgili deneyimlerini tartışıyor; bazıları order özelliğini öğrendiğini söylerken, bazıları justify-content ile align-items adlandırmaları arasındaki farkın kafa karıştırıcı olduğunu belirtiyor
  • CSS öğrenmenin eğlenceli bir yolu olarak önerilen bir başka oyun: flexboxzombies.com