Belajar CSS Grid Sambil Bermain dengan CSS Garden
Bagus Aji Santoso 11 Oktober 2018
CSS Grid adalah sebuah teknologi baru yang memungkinkan kita melakukan layouting halaman web dengan CSS sebagai alternatif layouting menggunakan tabel, float, atau flexbox. Teknologi ini menggunakan sistem 2 dimensi dimana kita mendapatkan kebebasan untuk mengatur posisi kolom dan baris sesuai kebutuhan dengan lebih mudah dibandingkan menggunakan sistem lain dan tanpa menggunakan framework CSS.
Untuk membantu developer web yang ingin mempelajari bagaimana sistem CSS Grid bekerja, Codepip mengembangkan sebuah permainan bernama Grid Garden. Halaman Grid Garden terdiri dari dua bagian. Bagian kiri yang menampilkan instruksi dan kolom untuk menulis kode serta bagian kanan yang menampilkan kotak-kotak kosong (tanah) dan kotak-kotak yang berisi wortel untuk disirami dengan air. Tugas kita adalah menyirami wortel-wortel (dan sayuran lain) dengan menuliskan kode-kode CSS Grid.
Grid Garden sangat cocok untuk developer yang lebih suka cara belajar yang lansung praktek. Di sini kita dapat bereksperimen dengan langsung menuliskan kode CSS Grid untuk menyelesaikan setiap level yang ada. Setelah melewati 28 level yang tersedia, kita akan mendapatkan pemahaman CSS Grid yang mencukupi untuk kebutuhan sehari-hari.
Jika kamu tertarik untuk mencobanya kunjungi cssgridgarden.com.