Belajar CSS Grid lewat game berkebun virtual

Pengenalan Grid Garden

Apa itu Grid Garden?

• Grid Garden adalah game untuk mempelajari layout CSS Grid.
• Pengguna memainkan game dengan menggunakan properti grid-column-start untuk menyiram area tempat wortel berada.

Penjelasan kode contoh

• grid-column-start: 3; berarti menyiram area yang dimulai dari garis vertikal ketiga pada grid.
• Setiap kolom dan baris pada grid diatur agar masing-masing menempati 20%.

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {}

Materi pembelajaran tambahan

• Anda dapat mempelajari CSS Flexbox melalui Flexbox Froggy.

Pendapat GN⁺

• Nilai edukatif: Grid Garden adalah alat yang baik untuk mempelajari layout CSS Grid dengan cara yang menyenangkan melalui game.
• Pentingnya praktik: Alat pembelajaran interaktif seperti ini memungkinkan pembelajaran yang lebih efektif melalui praktik daripada sekadar teori.
• Ekstensibilitas teknologi: CSS Grid dan Flexbox adalah teknologi penting dalam desain web modern, sehingga penting untuk memahaminya dengan baik.
• Rekomendasi alat lain: Selain CSS Grid, disarankan juga untuk memanfaatkan alat pembelajaran lain seperti CSS Diner.
• Hal yang perlu diperhatikan: Setelah memahami konsep dasar melalui game, penting juga untuk mempelajari cara menerapkannya dalam proyek nyata.

[GN⁺]

Komentar Hacker News

• Seri Rachel Andrews sangat membantu bahkan bagi pengembang backend untuk membangun aplikasi UI modern.
• Pernah ada sesi show-and-tell selama 30 menit bersama tim, dan ikut sertanya orang non-pengembang bermanfaat untuk mengembangkan keterampilan pemrograman dasar.
• Gim ini menyenangkan, tetapi bisa membuat orang hanya fokus menyelesaikan masalah sehingga menghambat pemahaman yang mendalam. Sebagai solusi, disarankan ada penalti untuk jumlah percobaan.
• Kelebihan gim ini adalah bisa memeriksa posisi absolut untuk memverifikasi jawaban, dan kekurangannya adalah mengirim Google Analytics setiap kali mencoba.
• CSS Zen Garden dulu merupakan sumber yang sangat bagus untuk mempelajari CSS dan mendapatkan inspirasi desain.
• Gim ini dan Flexbox Froggy bagus untuk belajar layout CSS dengan cara yang menyenangkan.
• Setelah memainkan 10 level pertama, rasa frustrasi terhadap CSS malah makin besar.
• Membagikan tautan ke diskusi besar sebelumnya.
• Flexbox Froggy terasa lebih membantu daripada Grid Garden. CSS Grid masih terasa sulit dipahami.
• Ada yang penasaran apakah Subgrid sudah ditambahkan baru-baru ini.