Pelajari Tata Letak Kotak CSS (Cara Menyenangkan) dengan Grid Garden

Sebagian besar pengembang web mengetahui game Flexbox Froggy itu mengajarkan Anda dasar-dasar flexbox dari awal. Gim gratis ini menjadi viral dan masih sangat berharga untuk mengajari orang cara membuat kode dengan flexbox.

Nah, pengembang yang sama yang membuat game itu memiliki game baru bernama Grid Garden.

Game ini bekerja dengan cara yang sama tetapi mengajarkan Anda cara kode kisi-kisi CSS. Ini adalah fitur yang relatif baru tetapi itu menangkap dengan cepat dan Grid Garden dengan mudah adalah cara terbaik untuk belajar.

Segala sesuatu di Grid Garden mengikuti a gaya mengajar yang serupa sebagai Flexbox Froggy. Itu dibuat oleh pengembang yang sama, Thomas Park, sehingga Anda dapat mengharapkan tingkat kesulitan dan kegunaan yang serupa.

Secara default, Anda mulai di level satu dengan a Sebanyak 28 level dari awal hingga selesai. Kamu selalu bisa lewati level jika Anda berpikir ada yang terlalu sulit, tetapi saya merasa selalu baik untuk bekerja melalui semua itu hanya sebagai penyegaran.

Jika Anda tidak tahu cara kerja properti yang berhubungan dengan kotak, Anda akan menemukan sendiri banyak kata di Google. Layout grid CSS adalah a modul yang sama sekali baru dengan sintaks dan fitur sendiri.

Saya sangat merekomendasikan bermain-main dengan Grid Garden setiap kali Anda mendapat kesempatan. Ini praktis a Taman bermain pengembang CSS untuk mempelajari dan mempelajari semua properti tata letak berbagai grid.

Saya tidak bisa mengatakan game ini akan membuat Anda ahli dalam kisi-kisi CSS. Hanya membangun proyek dan banyak berlatih dapat membawa Anda ke tingkat ahli. Namun, Grid Garden adalah cara yang menyenangkan untuk memulai tanpa semua tekanan yang biasa terjadi dalam mempelajari sesuatu yang baru.

Seluruh proyek ini sepenuhnya gratis dan bersumber terbuka di GitHub jika Anda ingin mengunduhnya secara lokal untuk dipelajari atau diperluas. Anda juga dapat membagikan pemikiran Anda dengan pembuatnya di Twitter @thomashpark.