Sanal bir bahçe oyunuyla CSS Grid öğrenmek

• Grid Garden, CSS kodu yazarak havuç bahçesini suladığınız oyunlaştırılmış bir öğrenme aracıdır; CSS Grid yerleşimini adım adım pratik etmeyi sağlar
• İlk adım, suyun yalnızca havuçların bulunduğu alana ulaşması için grid-column-start özelliğiyle başlangıç sütununu belirleme yöntemidir
• grid-column-start: 3;, sulanacak alanın soldan üçüncü dikey grid çizgisinden başlamasını sağlar
• Örnek bahçe, display: grid ile grid-template-columns ve grid-template-rows kullanılarak oluşturulan 5x5 griddir; her satır ve sütun %20'lik parçalara ayrılır
• Toplam 28 seviyeden oluşur; CSS'i daha fazla öğrenmek isterseniz Flexbox Froggy ve Anchoreum ile devam edebilirsiniz

---

CSS Grid'i oyun kurallarıyla öğrenme yöntemi

• Grid Garden, CSS kodu girerek havuç bahçesi büyüttüğünüz bir oyundur
• Oyuncu, suyun yalnızca havuçların bulunduğu alana gelmesi için CSS Grid özelliklerini ayarlar
• İlk seviyede grid-column-start ile suyun başladığı sütun konumu belirlenir

İlk seviye: grid-column-start ve 5x5 bahçe

• grid-column-start: 3;, sulanacak alanın grid'in solundan üçüncü dikey sınır çizgisinden başlamasını sağlar
• Örnek koddaki #garden, CSS Grid kapsayıcısı olarak ayarlanır
  • display: grid;
  • grid-template-columns: 20% 20% 20% 20% 20%;
  • grid-template-rows: 20% 20% 20% 20% 20%;
• Bu ayar, sütunların ve satırların her birinin %20'ye bölündüğü 5x5 grid oluşturur

Seviye yapısı ve devam edilebilecek oyunlar

• Ekranda 28 seviyeden 1. seviye gösterilir
• CSS'i daha fazla öğrenmeye yönelik oyunlar olarak Flexbox Froggy ve Anchoreum da önerilir

[GN⁺]

Hacker News yorumları

• Rachel Andrews’in bu serisini her zaman harika bir öğrenme kaynağı olarak görmüşümdür: https://www.smashingmagazine.com/2020/01/understanding-css-g...
  Backend tarafında çalışan biri olarak bile modern UI uygulamalarını hafif ve basit yapabilmek için sağlam bir temel sağladı.
  Bootstrap’a da Tailwind’e de ihtiyaç duymadım.

  • Bootstrap, CSS’yi iyi bilmeseniz de basit şeyleri idare edebilmeniz için CSS’yi soyutlar; Tailwind ise daha çok token’laştırılmış CSS’ye yakındır.
    CSS bilmeden Tailwind kullanamazsınız; kullanırken de CSS öğrenirsiniz.
    Bu yüzden bana aksine oldukça hafif ve basit geliyor.
  • Jen Simmons’ın Layout Land video serisini de öneririm: https://www.youtube.com/layoutland
  • Bootstrap en baştan CSS Grid veya Flexbox ile uğraşmak istemediğinizde kullanmaya daha yakın bir araç.
    Tailwind ise bu kısmı sizin yerinize yapmaz.
    Grid veya Flexbox bilmiyorsanız Tailwind de saf CSS kadar uğraştırıcı olabilir.

• Bu oyun oldukça iyi ve eğlenceli, ama “gerçekte nasıl çalışıyor”a odaklanmak yerine değerleri kurcalayarak sadece mevcut problemi çözmeye kapılmak çok kolay.
  Daha derin bir kavrayışa götürmesi için problem çözme özgürlüğünü daha fazla bırakıp 2-3 denemeden fazla yapıldığında küçük bir ceza vermek de mümkün görünüyor.

  • Frontend kodu yazan biri olarak, özellikle CSS zaten hep deneme yanılma ve dediğiniz gibi çoğu zaman brute force’a yakın.
    Benzer problemleri kurcalarken öğrendiklerinizi kullanmanız ve olana kadar ayarlamanız gereken anlar oluyor.
  • Öz disiplin sorununu oyuna yükleyemeyiz.

• Birkaç dağınık not:

  1. İyi tarafı: Cevabı mutlak konuma göre doğruluyor.
     Bu yüzden geçerli bir cevapsa grid dışı yöntemlerle bile seviyeyi geçebiliyorsunuz.
  2. Kötü tarafı: Her denemede Google Analytics gönderiyor.
  • 1. maddeyle ilgili olarak, ilk görevin sağlam çözümünün position: relative; left: 31.4em; olduğu konusunda herkes hemfikirdir sanırım.

• Önceden çalıştığım yerde ekiple her hafta yaklaşık 30 dakika show and tell yapardık; bir hafta bunu getirip kod yazmayan insanların cevap bulmasını sağladım.
  Ne kadar ilerleyebildiklerini görmek ilginçti; bazıları hemen kavradı, bazıları epey zorlandı.
  Genel olarak herkes sevdi ve hayatı boyunca kod yazması gerekmeyecek insanlara temel programlama sezgisi kazandırmanın iyi bir yolu olduğunu düşünüyorum.
  Yıllar sonra bile iş arkadaşlarım “Bütün gün yaptığın şey bu mu?” gibi laflarla bunu açardı; işimin en kolay kısmı olmasına rağmen beni sihirbaz gibi görmeleri komikti.
  Yine de biraz kendileri denedikleri için işe daha çok saygı duymaya başlamış olmaları hoşuma gitti.

• Flexbox’ın CSS’in seyrini değiştirdiğini düşünmüştüm; sonra Grid çıktı ve gerçekten şaşırtıcı ve öngörülebilir oldu.
  Artık CSS’te kalan acı, “kardeş öğelerin kullanmadığı kalan alanı hangi bileşen kaplayacak, onun çocuklarından biri de kendi kardeşlerinin kullanmadığı her şeyi kaplayacak, alan yetmezse scroll overflow olacak” gibi tuhaf durumlar.
  Flexbox ve Grid arasındaki tuhaf etkileşimlerin ve boyut hesaplama layout’unun önceliklerinin birbirine karıştığı birkaç örnek var; hâlâ tam anlamış değilim.
  Çoğu benim sorunum olabilir ama Flexbox veya Grid’in kendisinden farklı olarak hâlâ sezgisel gelmiyor.

• Bir an https://csszengarden.com/pages/about/ hakkında sanmıştım.
  Eskiden CSS öğrenmek ve tasarım ilhamı almak için inanılmaz bir kaynaktı.

  • O dönemi hâlâ web geliştirmenin altın çağı olarak görüyorum.
    Web standartları hareketinin meyveleri görülmeye başlamıştı.
    Ne yazık ki sonra React geldi ve güzel şeyler pencereden atıldı.
    Görünüşe göre tag soup da node_modules’un derinliklerine gömülünce yenebilir hale geliyor.

• Geçmişteki birkaç büyük tartışma:
  2019: https://news.ycombinator.com/item?id=21050501
  2018: https://news.ycombinator.com/item?id=18753358
  2017: https://news.ycombinator.com/item?id=14041367

• Bu oyun ve Flexbox Froggy, CSS layout’a eğlenceli bir giriş yapmak için iyi.

  • Web sitesi Flexbox Froggy’ye link veriyor ama hesap kaydı gerektiren bir bağlantıdan geçiriyor.
    Doğrudan erişmek için https://flexboxfroggy.com/ adresine gidebilirsiniz.

• Üzerinde çalıştığım küçük ve basit bir web frontend problemi için iyi bir çözüm bulmama yardımcı olmasını ummuştum.
  Ama ilk 10 seviyeyi yaptıktan sonra CSS’ten daha da nefret ettim.

• CSS Grid’den hoşlanmama nedenim, HTML’in anlamsal yapısını neredeyse elinden alması.
  Flexbox’ta en azından HTML ağacı sayfadaki bir tür yapıyla örtüşür; CSS Grid kullanınca ise şöyle görünmeye başlıyor:
  <-! random amount of divs without classnames -->
  O zaman sayfada ne olup bittiğini anlamak için bir anda CSS ile karşılaştırmanız gerekiyor.
  Çok etkili olsa da çirkin görünüyor.

  • Farklı bir konu ama HTML ile CSS arasındaki tüm ilişkileri anlamadan ve sembolleri elle eşleştirmeden görsel olarak düzenleme yapmanızı sağlayan bir IDE varsa bu çözülebilir.