Ajarkan diri anda CSS Flexbox dengan Flexbox Froggy Game

Pada masa lalu kita telah glossed over flexbox dan asas bagaimana ia berfungsi. Tetapi sebenarnya memohon flexbox ke aliran kerja anda boleh mencabar kerana ia adalah tambahan yang rumit kepada spec CSS.

Dengan Frogbox Froggy anda boleh belajar semua asas flexbox dengan webgame yang menyeronokkan yang melibatkan katak dan lilypads. Saya tahu kedengarannya gila tetapi ini adalah serius webapp yang hebat.

Anda bermula pada tahap 1 dan perlahan-lahan bekerja dengan cara anda melalui 24 peringkat yang berbeza mengajar banyak aspek orientasi flexbox. Tahap awal mula mudah dengan meminta anda menyelaraskan satu atau dua katak sepanjang satu bekas. Pelajaran awal juga termasuk petua dan cadangan untuk membantu anda dalam perjalanan.

Tetapi apabila anda melepasi pelajaran 10 perkara benar-benar panas. Anda perlu belajar bagaimana untuk kembali-sediakan item dalam bekas, bagaimana untuk menyusun kandungan menegak, dan bagaimana untuk mencipta jarak yang sama antara baris berbeza kandungan yang berbeza.

Katak kecil yang comel boleh memikat anda, tetapi yakinlah ini adalah permainan yang sukar.

Walau bagaimanapun, dari orang baru yang lengkap kepada pemaju web yang lebih berpengalaman, permainan dibuat untuk semua peringkat. Pelajaran awal adalah mudah dan pengajaran yang lebih lama boleh membiarkan anda membongkok di atas skrin dengan gumpalan rambut di sisi anda.

Kod sumber permainan penuh boleh didapati secara percuma di GitHub supaya anda boleh memuat turun dan memainkannya secara tempatan jika anda mahu.

Plus webapp adalah berbilang bahasa menawarkan 20 bahasa termasuk bahasa Inggeris, Perancis, Jerman, Itali, Cina, Jepun, dan Rusia (termasuk ramai lagi).

Saya akan mengakui itu menyusun katak tidak akan segera membuat anda menjadi tuan daripada flexbox. Tetapi pelajaran ini dimaksudkan untuk maklumkan kepada anda dengan sintaks fleksibel jadi anda boleh berasa lebih selesa bekerja dalam senario dunia sebenar.

Jika anda seorang pemaju web mana-mana tahap kemahiran anda pasti perlu menyemak Flexbox Froggy. Ia benar-benar percuma, cukup menyeronokkan untuk bermain dan menghairankan pendidikan.