Belajar CSS Grid lewat game kebun virtual

• Grid Garden adalah alat belajar berbentuk game tempat pengguna menulis kode CSS untuk menyiram kebun wortel, sehingga dapat berlatih tata letak CSS Grid secara bertahap
• Tahap pertama dimulai dengan menentukan kolom awal menggunakan properti grid-column-start agar air hanya mencapai area yang berisi wortel
• grid-column-start: 3; membuat area penyiraman dimulai dari garis grid vertikal ketiga dari kiri
• Kebun contoh berupa grid 5x5 yang disusun dengan display: grid, grid-template-columns, dan grid-template-rows, dengan tiap baris dan kolom dibagi masing-masing 20%
• Secara keseluruhan ada 28 level, dan jika ingin belajar CSS lebih lanjut, pengguna dapat melanjutkan ke Flexbox Froggy dan Anchoreum

---

Cara mempelajari CSS Grid lewat aturan game

• Grid Garden adalah game untuk menumbuhkan kebun wortel dengan memasukkan kode CSS
• Pemain menyesuaikan properti CSS Grid agar air hanya menyiram area yang berisi wortel
• Pada level pertama, posisi kolom tempat air mulai ditentukan dengan grid-column-start

Level pertama: grid-column-start dan kebun 5x5

• grid-column-start: 3; membuat area penyiraman dimulai dari garis batas vertikal ketiga dari sisi kiri grid
• #garden pada kode contoh diatur sebagai container CSS Grid
  • display: grid;
  • grid-template-columns: 20% 20% 20% 20% 20%;
  • grid-template-rows: 20% 20% 20% 20% 20%;
• Pengaturan ini membuat grid 5x5 dengan kolom dan baris yang masing-masing terbagi 20%

Susunan level dan game lanjutan yang bisa dicoba

• Layar menampilkan level 1 dari total 28 level
• Sebagai game untuk belajar CSS lebih lanjut, Flexbox Froggy dan Anchoreum juga diperkenalkan

[GN⁺]

Komentar Hacker News

• Saya selalu merasa seri dari Rachel Andrews ini adalah materi belajar yang luar biasa: https://www.smashingmagazine.com/2020/01/understanding-css-g...
  Bahkan dari sudut pandang orang backend, seri ini memberi fondasi yang kokoh untuk membuat aplikasi UI modern yang ringan dan sederhana
  Tidak perlu Bootstrap maupun Tailwind

  • Bootstrap mengabstraksikan CSS agar hal-hal sederhana masih bisa ditangani meski tidak terlalu paham CSS, sedangkan Tailwind lebih mirip CSS yang ditokenisasi
    Tanpa memahami CSS, Anda tidak bisa memakai Tailwind, dan dalam proses memakainya Anda akan belajar CSS
    Karena itu justru terasa cukup ringan dan sederhana
  • Saya juga merekomendasikan seri video Layout Land dari Jen Simmons: https://www.youtube.com/layoutland
  • Bootstrap pada dasarnya lebih ditujukan untuk saat Anda tidak ingin memikirkan CSS Grid atau Flexbox
    Sebaliknya, Tailwind tidak menggantikan bagian itu
    Jika tidak memahami Grid atau Flexbox, Tailwind bisa sama merepotkannya dengan CSS murni

• Game ini cukup bagus dan menyenangkan, tetapi godaan untuk mengutak-atik nilai demi menyelesaikan masalah saat ini saja lebih besar daripada berfokus pada “bagaimana sebenarnya ini bekerja”
  Agar mengarah ke pemahaman yang lebih mendalam, sepertinya bisa diberi lebih banyak kebebasan dalam menyelesaikan soal, tetapi dengan penalti kecil setelah lebih dari 2–3 kali percobaan

  • Dari sudut pandang orang yang menulis kode frontend, terutama CSS memang selalu berupa trial and error dan sering kali mendekati brute force seperti yang dikatakan
    Ada saatnya kita harus memanfaatkan apa yang dipelajari dari mengutak-atik masalah serupa, lalu terus menyetel sampai berhasil
  • Masalah pengendalian diri tidak bisa disalahkan pada game

• Beberapa catatan acak:

  1. Yang bagus: jawaban diverifikasi berdasarkan posisi absolut
     Jadi selama jawabannya valid, level bisa dilewati bahkan dengan cara yang bukan grid
  2. Yang kurang bagus: setiap percobaan mengirim Google Analytics
  • Untuk poin pertama, sepertinya semua orang akan sepakat bahwa solusi kokoh untuk tantangan pertama adalah position: relative; left: 31.4em;

• Di tempat kerja lama, kami biasa melakukan show and tell bersama tim sekitar 30 menit setiap minggu, dan suatu minggu saya membawa ini lalu meminta orang-orang yang tidak coding untuk mencoba mencari jawabannya
  Menarik melihat sejauh mana mereka bisa melaju; ada yang langsung paham, ada juga yang cukup kesulitan
  Secara umum semua menyukainya, dan menurut saya ini cara yang baik untuk menumbuhkan naluri pemrograman dasar pada orang-orang yang kemungkinan tidak akan pernah coding seumur hidup
  Bahkan beberapa tahun kemudian, rekan kerja kadang masih menyinggungnya dengan gaya “jadi begini yang kamu lakukan seharian?”; lucu karena mereka melihatnya seperti pesulap, padahal itu bagian paling mudah dari pekerjaan saya
  Tapi saya senang karena setelah mencoba sedikit sendiri, mereka tampaknya jadi lebih menghargai pekerjaan itu

• Saya sempat berpikir Flexbox telah mengubah lanskap CSS, lalu kemudian Grid muncul dan benar-benar mengagumkan sekaligus dapat diprediksi
  Sekarang penderitaan yang tersisa di CSS adalah kasus-kasus aneh seperti “suatu komponen harus mengambil sisa ruang yang tidak dipakai elemen-elemen saudaranya, dan salah satu anaknya juga harus mengambil semua ruang yang tidak dipakai saudara-saudaranya, lalu jika ruang tidak cukup harus menjadi overflow yang bisa di-scroll”
  Ada beberapa kasus ketika interaksi aneh antara Flexbox dan Grid, serta prioritas layout dalam penentuan ukuran, saling berkaitan; saya masih belum sepenuhnya memahaminya
  Mungkin sebagian besar ini masalah saya sendiri, tetapi berbeda dari Flexbox atau Grid itu sendiri, bagian ini masih terasa tidak intuitif

• Sekilas saya kira ini tentang https://csszengarden.com/pages/about/
  Dulu itu adalah sumber yang luar biasa untuk belajar CSS dan mendapatkan inspirasi desain

  • Saya masih menganggap masa itu sebagai zaman keemasan pengembangan web
    Itu masa ketika hasil dari gerakan standar web mulai terlihat
    Sayangnya setelah itu React datang dan hal-hal baik dilempar ke luar jendela
    Rupanya tag soup pun jadi cukup enak dimakan kalau terkubur jauh di dalam node_modules

• Beberapa diskusi besar sebelumnya:
  2019: https://news.ycombinator.com/item?id=21050501
  2018: https://news.ycombinator.com/item?id=18753358
  2017: https://news.ycombinator.com/item?id=14041367

• Game ini dan Flexbox Froggy cocok sebagai pengantar yang menyenangkan ke layout CSS

  • Situs webnya memang menautkan ke Flexbox Froggy, tetapi lewat tautan yang mengharuskan pendaftaran akun
    Jika ingin langsung mengaksesnya, buka https://flexboxfroggy.com/

• Saya berharap ini membantu menemukan solusi yang baik untuk masalah frontend web kecil dan sederhana yang sedang saya kerjakan
  Tetapi setelah menyelesaikan 10 level pertama, saya malah makin membenci CSS

• Alasan saya tidak suka CSS Grid adalah karena ia hampir merampas struktur semantik HTML
  Dengan Flexbox, setidaknya pohon HTML masih berpadanan dengan suatu struktur di halaman, tetapi memakai CSS Grid membuatnya terlihat seperti ini
  <-! random amount of divs without classnames -->
  Lalu untuk memahami apa yang terjadi di halaman, tiba-tiba harus mencocokkannya dengan CSS
  Sangat efektif, tetapi tidak enak dilihat

  • Ini memang topik lain, tetapi masalah itu bisa teratasi jika ada IDE yang memungkinkan kita memanipulasi secara visual semua hubungan antara HTML dan CSS tanpa harus memahami semuanya dan mencocokkan simbol secara manual