Sanal Bahçe Oyunu ile CSS Grid Öğrenin

(cssgridgarden.com)

5 puan yazan GN⁺ 2024-06-04 | 1 yorum | WhatsApp'ta paylaş

Grid Garden'a Giriş

Grid Garden, CSS grid düzenini öğrenmek için hazırlanmış bir oyundur.
Kullanıcı, grid-column-start özelliğini kullanarak havuçların bulunduğu alanı sulayarak oyunda ilerler.

grid-column-start: 3;, gridin üçüncü dikey çizgisinden başlayan alanın sulanması anlamına gelir.
Gridin her sütunu ve satırı %20 yer kaplayacak şekilde ayarlanmıştır.

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {}

Eğitsel değer: Grid Garden, oyun yoluyla CSS grid düzenini eğlenceli biçimde öğrenmeyi sağlayan iyi bir araçtır.
Pratiğin önemi: Bu tür etkileşimli öğrenme araçları, teoriden ziyade pratik yaparak daha etkili öğrenmeye yardımcı olur.
Teknolojinin kapsamı: CSS Grid ve Flexbox, modern web tasarımında önemli teknolojilerdir; bu yüzden bunları iyi anlamak önemlidir.
Diğer araç önerileri: CSS Grid dışında CSS Diner gibi başka öğrenme araçlarını da denemeniz önerilir.
Dikkat edilmesi gereken nokta: Oyunla temel kavramları öğrendikten sonra, bunların gerçek projelerde nasıl uygulanacağını öğrenmek de önemlidir.

GN⁺ 2024-06-04

Rachel Andrews'ün serisi, backend geliştiricilerin bile modern UI uygulamaları oluşturmasına çok yardımcı oluyor.
Ekiple birlikte 30 dakikalık bir show-and-tell yaptık; geliştirici olmayanlar da katıldı ve temel programlama becerileri geliştirmek açısından faydalı oldu.
Oyun eğlenceli, ancak insanı sadece problemi çözmeye odaklayıp daha derin bir anlayışı engelleyebiliyor. Çözüm olarak deneme sayısına ceza verilmesi öneriliyor.
Oyunun iyi yanı, mutlak konumu kontrol ederek cevabı doğrulayabilmeniz; kötü yanı ise her denemede Google Analytics'e veri göndermesi.
CSS Zen Garden geçmişte CSS öğrenmek ve tasarım ilhamı almak için harika bir kaynaktı.
Bu oyun ve Flexbox Froggy, CSS düzenini eğlenceli şekilde öğrenmek için iyi araçlar.
İlk 10 seviyeyi oynadıktan sonra CSS'e yönelik memnuniyetsizliğim arttı.
Önceki büyük tartışmanın bağlantısı paylaşılıyor.
Flexbox Froggy, Grid Garden'dan daha faydalı oldu. CSS Grid bana pek anlaşılır gelmiyor.
Yakın zamanda Subgrid'in eklenip eklenmediği merak ediliyordu.