Oyunlarla CSS Öğrenin: Flexbox Froggy ve Grid Garden

Eksen boyunca hizalama pratiği yapmak için Flexbox Froggy ile başlayın, ardından bir öğeyi ızgara çizgileri arasına yerleştirme pratiği yapmak için Grid Garden'yi kullanın. Her oyun alıştırmasından sonra, fikri kendi küçük sayfanızda yeniden oluşturun. Faydalı bir sonuç, belirli bir seviyenin cevabını hatırlamak yerine, düzen değiştiğinde bir bildirimin neden çalıştığını açıklayabilmektir.

Oyunlarla CSS nasıl öğrenilir ve uygulanır

Bu yol, iki oyunu üç orijinal alıştırmayla birleştirir. Basit bir CSS kuralını okuyabilen ve görünür geri bildirim isteyen biri için uygundur. Tam bir web geliştirme kursu değildir: gerçek arayüzler ayrıca okunabilir içerik, duyarlı davranış, klavye erişimi ve farklı metin miktarlarıyla test etme gerektirir.

Sorunuz için doğru alıştırmayı seçin

Oyunlar Codepip tarafından hazırlanmıştır. Cozcade, her bir barındırılan oyunu eşleşen kılavuzuna bağlar: Flexbox Froggy ve kılavuzu; Grid Garden ve kılavuzu. Orijinal Froggy ve Grid Garden sayfaları, yazarların kendi sürümlerini sunar. Buradaki kod alıştırmalarını yaparken klavye kullanın.

Öncelikle, bir özellik seçmeden önce ekseni adlandırın.

Flexbox'ın bir ana ekseni ve bir çapraz ekseni vardır. flex-direction ana yönü ayarlar; justify-content öğeleri bu ana eksen boyunca konumlandırırken, align-items çapraz eksenle ilgilidir. Normal soldan sağa bir satırda, ana eksen yataydır. Yönü bir sütuna değiştirirseniz dikey olur. Bu tanımlar MDN'nin Flexbox tanıtımında ele alınmıştır.

Froggy'de bildirimleri denemeden önce, öğelerin hangi yönde hareket etmesini istediğinizi belirtin. Ardından, bu yönü mevcut ana eksene göre adlandırın. Bu, yanlış bir cevabı belirli bir soruya dönüştürür: yanlış özelliği mi, yanlış değeri mi yoksa yanlış ekseni mi seçtiniz?

Alıştırma 1: Bir grubu sona taşı

Bir kabın içine üç küçük öğe oluşturun. Bu orijinal bir alıştırmadır, kopyalanmış bir oyun seviyesi veya cevap anahtarı değildir.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Amacınız, üç öğeyi sıralarını değiştirmeden veya her öğeye ayrı bir kenar boşluğu vermeden sağ kenara doğru birlikte taşımaktır. Sonucu tahmin edin, ardından justify-content: flex-end'yi kaba ekleyin.

Şimdi bunu justify-content: space-between ile karşılaştırın. İlk seçenek grubu hareket ettirir; ikincisi mevcut alanı öğeler arasında dağıtır. Dar ve geniş bir kap deneyin. Birbirine yakın kalması gereken üç düğme için hangi sürümü seçeceğinizi açıklayın. Görünür sonuç, tek bir değeri hatırlamaktan daha önemlidir.

Alıştırma 2: Aynı komutu koruyun, ekseni değiştirin

O konteyneri yeniden kullanın, flex-direction: column ekleyin, height: 12rem'yi ayarlayın ve justify-content: flex-end'yi koruyun. Öğeler artık alta doğru toplanıyor. Bildiriminiz "sağa taşı" komutu haline gelmedi: hala değiştirdiğiniz ana eksen boyunca çalışıyor.

Ardından, align-items: flex-start'yi ekleyin. Bu eklemeden önceki ve sonraki düzenlemeyi karşılaştırın. Belirtilen soldan sağa yönde, öğeler çapraz eksende sola doğru hizalanır. Bildirimi kaldırın ve varsayılan germe davranışını tekrar gözlemleyin.

"Sadece çalışıyor" ifadesini kullanmadan her iki değişikliğin de kısa bir açıklamasını yazın. Örneğin, ekseni, boş alanı ve konumlandırılan grubu tanımlayın. Bir sonucu açıklayamıyorsanız, örneği iki öğeye indirin ve her seferinde yalnızca bir bildirimi değiştirin. Bu, oyuna geri getirmeniz gereken alışkanlıktır.

Sonra, bir ızgara izini sınırından ayırt edin

Izgara yerleşimi, satırları ve sütunları çevreleyen çizgiler kullanır. Beş açık sütunun altı sınır çizgisi vardır. 3. sütun satırından 5. satıra yerleştirilen bir öğe, üç değil, iki sütunu kapsar. İzler, hücreler ve çizgiler arasındaki ayrım için MDN'nin Izgara tanıtımına bakın.

Grid Garden'de, bir konum denemeden önce başlangıç ​​ve bitiş sınırlarını okuyun. Kendi sayfanızda, boşlukları saymak kafa karıştırıcıysa, sınırları çizin veya etiketleyin.

Alıştırma 3: İki çizgi arasına bir kart yerleştirin

Beş sütunlu bir tahta oluşturun ve üzerine bir kart yerleştirin:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Sayfayı açmadan önce kartın nerede görüneceğini tahmin edin. Ardından, yalnızca sütun yerleşimini değiştirerek kartın tüm tahtayı kaplamasını sağlayın. Yukarıdaki beş açık sütunla, grid-column: 1 / 6 ilk sınırdan son sınıra kadar uzanır.

Son olarak, metni çok daha uzun bir cümleye değiştirin ve tarayıcıyı daraltın. Yerleştirme kuralı doğru kalabilirken, kartın sabit yükseklikteki sunumu içeriği için uygunsuz hale gelebilir. Bir oyun alıştırmasını çözmek, düzenin bir bölümünü öğretir; kullanılabilir bir sayfa oluşturmak, içeriği de kontrol etmeyi gerektirir.

Oyun ilerlemesini, ustalık kanıtı olarak değil, geri bildirim olarak kullanın.

Başarılı bir alıştırmadan sonra, bir varsayımı değiştirin: yön, öğe sayısı, mevcut genişlik veya metin uzunluğu. Sonucu bakmadan önce tahmin edin. Fikri uyarlayabilir ve değişikliği açıklayabilirseniz, bir seviye cevabından daha fazlasını öğrenmişsiniz demektir.

Bir oyuna geri dönerken, aynı sürümü ve tarayıcı ortamını açtığınızdan emin olun. Cozcade Hesap favorileri, tekrar ziyaret etmek istediğiniz oyunları tanımlar; bunlar, bir oyunun dahili ders ilerlemesinin cihazlar arasında aktarılacağının garantisi değildir. İlerlemeyi araştırırken depolanan site verilerini silmekten kaçının ve yalnızca söz konusu oyun böyle bir özellik sağlıyorsa açık bir dışa aktarma özelliğini kullanın.

Eşleştirme kılavuzuna devam edin

Eksen ve hizalama alıştırmaları için Kurbağa kılavuzunu ve yerleştirme soruları için Grid Garden kılavuzunu kullanın. Daha sonra başka bir alıştırma türü istiyorsanız, öğrenme oyunlarına göz atın.

Yukarıdaki alıştırmalar bu makale için yazılmıştır. Referans sayfaları 11 Ekim 2026 tarihinde kontrol edilmiştir. Kaydedilen oyun kontrollerimiz, tüm seviyelerin tamamlanmasını veya tam bir mobil kursu değil, az sayıda masaüstü etkileşimini kapsamaktadır. Bu makale bir alıştırma dizisi öğretir; bir yeterlilik kazandırmaz veya kendi arayüzlerinizi test etmenin yerini almaz.

Cozcade'de oynayabileceğiniz oyunlar

Flexbox FroggyGrid Garden