Flexbox Froggy

 (flexboxfroggy.com)
2 puan yazan GN⁺ 2023-10-01 | 1 yorum | WhatsApp'ta paylaş
  • CSS flexbox’u doğrudan yazarak kurbağayı nilüfer yaprağına ulaştıran etkileşimli bir öğrenme oyunu; hizalama özelliklerinin etkisi ekranda anında görülebiliyor
  • İlk seviyede #pond üzerinde display: flex; ayarlanmış durumda ve yatay hizalama justify-content ile değiştiriliyor
  • justify-content, flex-start, flex-end, center, space-between, space-around gibi değerlerle kapsayıcı içindeki öğelerin yerleşimini ayarlıyor
  • Örneğin justify-content: flex-end; yazıldığında kurbağa sağdaki nilüfer yaprağına gider ve özellikle sonuç arasındaki ilişki görülebilir
  • Toplam 24 seviye bulunuyor; Türkçe dahil birçok dil ve renk körlüğü düzeltme modu sunuluyor

CSS flexbox’u oyunla öğrenme yöntemi

  • Flexbox Froggy, Froggy ve arkadaşlarını hedef konumlara göndererek CSS flexbox öğrenilen bir oyun
  • Ekrandaki #pond CSS kod düzenleme alanına özellikler yazıldığında kurbağaların konumu değişiyor
  • İlk seviye, kurbağayı sağdaki nilüfer yaprağına göndermek için justify-content kullanma görevi veriyor
  • Varsayılan kodda şu yapı gösteriliyor
    • #pond {
    • display: flex;
    • }

justify-content ile yatay hizalamayı öğrenme

  • justify-content, öğeleri yatay yönde hizalayan bir özellik
  • Kullanılabilen değerler şunlar
    • flex-start: Öğeleri kapsayıcının soluna hizalar
    • flex-end: Öğeleri kapsayıcının sağına hizalar
    • center: Öğeleri kapsayıcının ortasına hizalar
    • space-between: Öğeler arasında eşit boşluk bırakır
    • space-around: Öğelerin etrafında eşit boşluk bırakır
  • justify-content: flex-end; kullanıldığında kurbağa sağa hareket eder ve özellik değeri ile yerleşim sonucu hemen karşılaştırılabilir

Yapı ve ilgili öğrenme kaynakları

  • Oyun Level 1 of 24 olarak gösteriliyor; dil ayarlarında Türkçe dahil birçok dil var
  • CSS’yi daha fazla öğrenmek için ilgili oyunlar olarak Grid Garden ve Anchoreum bağlantıları bulunuyor

İlgili okumalar

1 yorum

 
GN⁺ 2023-10-01
Hacker News yorumları

  • CSS öğrenmek için başka iyi oyunlaştırılmış kaynaklar da var
    https://cssgridgarden.com/ — Grid için Froggy’ye yakın
    https://cssbattle.dev/ — çeşitli meydan okumaları çözdüğünüz bir platform; topluluğu da büyük
    https://flukeout.github.io/ — CSS seçicilerini öğretiyor
    https://css-animations.io/ — CSS animasyonlarını pratik ettiriyor

  • CSS ile yıllardır uğraşsam da align-content ve align-items gibi flex ile ilgili özellikler her seferinde kafamı karıştırıyor
    USB kablosunu hep ters takıyormuşum gibi bir his; align ve justify için de aynı şey geçerli
    CSS Grid de gerçekten harika. Artık o kadar çok iyi yerleşim seçeneğimiz var ki epey lüks içindeyiz sayılır

    • 90’ların ortasından beri HTML yazıyorum, 10 yıldır da web geliştiricisi olarak çalışıyorum; CSS Tricks’in flexbox rehberine ve grid rehberine sık sık bakıyorum
      İkisinin de özet tablolarını yazdırıp masamın üstüne koydum; gerçekten çok değerli kaynaklar
      [0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      [1] [https://css-tricks.com/snippets/css/complete-guide-grid/](https://css-tricks.com/snippets/css/complete-guide-grid/）
    • Kural şu: justify- ana eksene, align- ise çapraz eksene karşılık gelir
      -content, grid track’leri ya da flex-wrap container’ının satırları için; -items ise tek tek alt öğeler, yani satır veya grid hücresi içindeki öğeler için kullanılır
      Yine de isimler daha açık olsaydı iyi olurdu
    • Muhtemelen bunu genel olarak flex-direction için genelleştirmeye çalışmışlar. Bu yüzden flex-align gibi bir özellik, ebeveynin yönüne göre değişen bir yapıya dönüşüyor
      Pratikte yönü değiştirip bundan ciddi fayda sağladığınız durumlar çok nadir
      Tek sebep bu muydu bilmiyorum, o yüzden kötü bir tercihti diye kesin konuşmayacağım; ama hangi tarafın hangisi olduğunu hatırlayamamak bende de aynı
      Ekseni doğrudan gösteren daha iyi adlar olsaydı ya da özellikler ebeveyn yönünden bağımsız olsaydı iyi olurdu; o zamana kadar cheat sheet kullanmak gerekiyor
    • Flexbox ve Grid bütün ilgiyi topluyor ama columns’ın faydasını da unutmamak gerek: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
    • flex-basis, flex-grow, flex-shrink’i bir türlü kafama tam oturtamıyorum
      Gerçi bunlarla sık sık uğraşmam gerekmiyor; belki de bu yüzden akılda kalmıyor

  • Bu tür oyunlardan gerçekten çok şey öğrendim. Vim’i de https://vim-adventures.com/ ile öğrendim; şimdi neredeyse Vim’siz yaşayamam

  • Önceki HN gönderileri:
    https://news.ycombinator.com/item?id=30251054 2022, 317 puan, 31 yorum
    https://news.ycombinator.com/item?id=22629903 2020, 27 puan, 2 yorum
    https://news.ycombinator.com/item?id=21796926 2019, 2 puan, 0 yorum
    https://news.ycombinator.com/item?id=18752031 2018, 3 puan, 0 yorum
    https://news.ycombinator.com/item?id=18731852 2018, 6 puan, 1 yorum
    https://news.ycombinator.com/item?id=15605783 2017, 4 puan, 0 yorum
    https://news.ycombinator.com/item?id=14349739 2017, 3 puan, 0 yorum
    https://news.ycombinator.com/item?id=10652909 2015, 315 puan, 69 yorum

  • Harika. Eskiden flexbox öğrenirken bunu kullanmıştım
    Aynı yapımcının yaptığı https://codepip.com/games/grid-garden/ da var; aynı yaklaşımla CSS Grid öğrenmeyi sağlıyor

    • Oyunların CSS öğrenmek için gerçekten iyi bir yöntem olduğunu düşünüyorum
      Zaten öğrendikleriniz sayesinde kolay görünen problemleri giderek daha zor şekilde çözerken çok doğal bir öğrenme yolu oluşuyor gibi
      Eskiden CSS seçicilerini öğrenmek için bu oyunu keyifle oynamıştım: https://flukeout.github.io/

  • Guess CSS’te de bir Flexbox bölümü var, ama CSS yazmaktan çok okumaya odaklanıyor: https://www.guess-css.app/

    • CSS position konusunda gerçekten hiçbir şey anlamadığım kesin
      Diğer soruları sürekli doğru yapabiliyordum, ama position’da sürekli yanlış yaptım

  • Çok faydalı. Ben flexbox’ta dikey hizalamayı her zaman sonunda aratıyorum
    Acele anlarda flexbox bilgisini hızlıca tazelemeye yardımcı olması için, kurbağayı 3x3 bir ızgaraya sürükleyip bıraktığınızda buna uygun flexbox CSS kodunu çıkaran bir özellik olsa güzel olurdu
    Yine de çok özenle hazırlanmış bir eğitim
    Bunu söylememin nedeni, kişisel olarak yeni CSS özelliklerini takip etmeyi bırakmış olmam. IE7 döneminden beri CSS’i ara ara kullandım; vendor prefix’leri elle yazdığımız günleri ve Chrome Canary’nin dayattığı yeni özellikleri yaşadıktan sonra CSS püf noktalarını sürekli aklımda tutacak enerjim kalmadı

    • Artık pek püf noktası yok, takip edilecek şey de çok değil. Flexbox ve Grid fiilen son aşama
      Çoğu UI için yalnızca flexbox yeterli; temelde stack/group ya da vbox/hbox gibi öğeleri dikey ve yatay yerleştirmeye yarayan bir araç
      flexbox öğrenmek yeter. CSS layout’a gelen en faydalı şey ve gerçekten basit. Boşluk için gap, yerleşim için justify ve align; %99’u orada bitiyor

  • Flexbox Froggy’yi seviyorum. Bir nesil geliştiricinin tamamının bu siteyle flexbox öğrendiğini söylemek mümkün gibi. Ben de öyle öğrendim

    • Benim için flexbox kavramı Flexbox Froggy sayesinde sonunda kafamda tam yerine oturdu
      O sırada zaten 15 yıldır CSS kullanıyordum
      Harika bir eğitim aracı

  • Josh Comeau’nun flexbox interaktif rehberi de bakmaya değer: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

  • Güzel. Bir Tailwind sürümü de olsa iyi olurdu