Flexbox Froggy Oyunu ile kendinize CSS Flexbox'ı öğretin

Geçmişte flexbox ve nasıl çalıştığının temellerini açıkladık. Ancak aslında iş akışınıza flexbox uygulamak zor olabilir, çünkü CSS özelliklerine çok karışık bir ek.

Flexbox Froggy ile yapabilecekleriniz Flexbox'ın tüm temellerini kurbağalar ve lilypadler içeren eğlenceli bir web oyunu ile öğrenin. Kulağa çılgınca geldiğini biliyorum ama bu gerçekten harika bir webapp..

Seviye 1'den başlarsın ve 24 farklı seviye boyunca yavaşça yoluna devam et Flexbox oryantasyonunun birçok yönünü öğretmek. Erken seviye sizden rica ederek kolay başlar bir ya da iki kurbağayı tek bir kap boyunca hizalayın. Erken dersler aynı zamanda size yardımcı olacak ipuçları ve öneriler içerir..

Ancak bir kez dersi aştığınızda 10 şey gerçekten ısınır. Nasıl yapılacağını öğrenmen gerekecek-öğeleri bir kap içinde düzenlemek, nasıl düzenlemek içerik dikine, ve nasıl oluşturulur eşit aralık farklı içeriklerin farklı satırları arasında.

Sevimli küçük kurbağalar sizi cezbedebilir, ancak bunun zor bir oyun olduğundan emin olun.

ancak, Acemilerden daha deneyimli web geliştiricilerine, Oyun her seviye için yapılır. İlk dersler bir esintidir ve sonraki dersler yanınızda saç tutamlarıyla ekrana sıkıştırabilir.

Oyun kaynak kodunun tamamı GitHub'da ücretsiz olarak bulunmaktadır, böylece isterseniz yerel olarak indirebilir ve oynatabilirsiniz.

Ayrıca webapp çok dillidir 20 dil sunmak İngilizce, Fransızca, Almanca, İtalyanca, Çince, Japonca ve Rusça dahil (artı diğerleri).

İtiraf edeceğim kurbağaların yeniden düzenlenmesi sizi hemen efendi yapmaz Flexbox Ancak bu dersler kastedilmektedir. Flexbox sözdizimini tanıyın böylece gerçek dünya senaryolarında çalışmaktan daha rahat hissedebilirsiniz.

Eğer bir Herhangi bir beceri seviyesine sahip web geliştiricisi Flexbox Froggy'yi kesinlikle kontrol etmelisiniz. Tamamen ücretsiz, oynamak için oldukça eğlenceli ve şaşırtıcı derecede eğitici.