Pelajari CSS dengan Game: Flexbox Froggy dan Grid Garden

Mulailah dengan Flexbox Froggy untuk berlatih perataan sepanjang sumbu, lalu gunakan Grid Garden untuk berlatih menempatkan item di antara garis kisi. Setelah setiap latihan permainan, reproduksi ide tersebut dalam halaman kecil Anda sendiri. Hasil yang bermanfaat adalah mampu menjelaskan mengapa deklarasi berfungsi ketika tata letak berubah, daripada mengingat jawaban level tertentu.

Cara belajar CSS dengan permainan, lalu menerapkannya

Rute ini menggabungkan dua permainan dengan tiga latihan orisinal. Ini cocok untuk seseorang yang dapat membaca aturan CSS sederhana dan menginginkan umpan balik yang terlihat. Ini bukan kursus pengembangan web lengkap: antarmuka nyata juga membutuhkan konten yang mudah dibaca, perilaku responsif, akses keyboard, dan pengujian dengan jumlah teks yang berbeda.

Pilih latihan yang tepat untuk pertanyaan Anda

Permainan ini dibuat oleh Codepip. Cozcade menghubungkan setiap permainan yang dihosting ke panduan yang sesuai: Flexbox Froggy dan panduannya; Grid Garden dan panduannya. Halaman Froggy dan Grid Garden asli menyediakan versi penulis sendiri. Gunakan keyboard saat mengikuti latihan kode di sini.

Pertama, beri nama sumbu sebelum memilih properti

Flexbox memiliki sumbu utama dan sumbu silang. flex-direction mengatur arah utama; justify-content memposisikan item di sepanjang sumbu utama tersebut, sedangkan align-items berkaitan dengan sumbu silang. Dalam baris kiri-ke-kanan normal, sumbu utama adalah horizontal. Ubah arah menjadi kolom dan sumbu utama menjadi vertikal. Definisi ini dibahas dalam pengantar Flexbox MDN.

Sebelum mencoba deklarasi di Froggy, tentukan arah pergerakan item yang Anda inginkan. Kemudian beri nama arah tersebut dalam kaitannya dengan sumbu utama saat ini. Ini mengubah jawaban yang salah menjadi pertanyaan spesifik: apakah Anda memilih properti yang salah, nilai yang salah, atau sumbu yang salah?

Latihan 1: pindahkan sebuah kelompok ke ujung

Buat tiga benda kecil di dalam sebuah wadah. Ini adalah latihan asli, bukan salinan level permainan atau kunci jawaban.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Tujuan Anda adalah memindahkan ketiga benda tersebut bersama-sama ke arah tepi kanan tanpa mengubah urutannya atau memberikan margin terpisah pada setiap benda. Prediksi hasilnya, lalu tambahkan justify-content: flex-end ke dalam wadah.

Sekarang bandingkan dengan justify-content: space-between. Pilihan pertama memindahkan kelompok; pilihan kedua mendistribusikan ruang yang tersedia di antara benda-benda tersebut. Cobalah wadah yang sempit dan lebar. Jelaskan versi mana yang akan Anda pilih untuk tiga tombol yang harus tetap berdekatan. Hasil yang terlihat lebih penting daripada mengingat satu nilai.

Latihan 2: pertahankan instruksi yang sama, ubah sumbu

Gunakan kembali kontainer tersebut, tambahkan flex-direction: column, atur height: 12rem, dan pertahankan justify-content: flex-end. Item-item tersebut sekarang berkumpul ke arah bawah. Deklarasi Anda tidak menjadi perintah "pindah ke kanan": deklarasi tersebut masih berfungsi di sepanjang sumbu utama, yang telah Anda ubah.

Selanjutnya, tambahkan align-items: flex-start. Bandingkan susunan sebelum dan sesudah penambahan tersebut. Dengan arah kiri-ke-kanan yang ditentukan, item-item tersebut sejajar ke kiri pada sumbu silang. Hapus deklarasi dan amati kembali perilaku peregangan default.

Tulis penjelasan singkat tentang kedua perubahan tersebut tanpa menggunakan "itu sudah berfungsi". Misalnya, identifikasi sumbu, ruang kosong, dan grup yang diposisikan. Jika Anda tidak dapat menjelaskan hasilnya, kurangi contoh menjadi dua item dan ubah hanya satu deklarasi pada satu waktu. Ini adalah kebiasaan yang perlu diterapkan kembali dalam permainan.

Selanjutnya, bedakan jalur grid dari batasnya

Penempatan grid menggunakan garis yang mengelilingi baris dan kolom. Lima kolom eksplisit memiliki enam garis batas. Item yang ditempatkan dari garis kolom 3 ke garis 5 mencakup dua kolom, bukan tiga. Lihat Pengantar Grid MDN untuk perbedaan antara jalur, sel, dan garis.

Di Grid Garden, baca batas awal dan akhir sebelum mencoba posisi. Di halaman Anda sendiri, gambar atau beri label batas jika menghitung spasi membingungkan.

Latihan 3: Letakkan kartu di antara dua baris

Buat papan lima kolom dan berikan satu kartu:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Prediksi di mana kartu akan muncul sebelum membuka halaman. Kemudian buat kartu tersebut membentang di seluruh papan dengan hanya mengubah penempatan kolomnya. Dengan lima kolom eksplisit di atas, grid-column: 1 / 6 mencapai dari batas pertama hingga batas terakhir.

Terakhir, ubah teks menjadi kalimat yang jauh lebih panjang dan persempit browser. Aturan penempatan dapat tetap benar sementara presentasi kartu dengan tinggi tetap menjadi tidak sesuai untuk kontennya. Menyelesaikan latihan permainan mengajarkan satu bagian dari tata letak; membangun halaman yang dapat digunakan juga memerlukan pengecekan konten.

Gunakan kemajuan permainan sebagai umpan balik, bukan sebagai bukti penguasaan

Setelah latihan berhasil, ubah satu asumsi: arah, jumlah item, lebar yang tersedia, atau panjang teks. Prediksi hasilnya sebelum melihat. Jika Anda dapat mengadaptasi ide dan menjelaskan perubahannya, Anda telah mempelajari lebih dari sekadar jawaban level.

Saat kembali ke permainan, periksa apakah Anda membuka versi dan lingkungan browser yang sama. Favorit akun Cozcade mengidentifikasi permainan yang ingin Anda kunjungi kembali; ini bukan jaminan bahwa kemajuan pelajaran internal permainan akan berpindah antar perangkat. Hindari menghapus data situs yang tersimpan saat menyelidiki kemajuan, dan gunakan fitur ekspor eksplisit hanya jika permainan tertentu menyediakannya.

Lanjutkan dengan panduan pencocokan

Gunakan Panduan Froggy untuk latihan sumbu dan penyelarasan dan Panduan Grid Garden untuk pertanyaan penempatan. Jika Anda menginginkan jenis latihan lain setelahnya, telusuri permainan pembelajaran.

Latihan di atas ditulis untuk artikel ini. Halaman referensi diperiksa pada 11 Oktober 2026. Pemeriksaan gameplay yang kami rekam mencakup sejumlah kecil interaksi desktop, bukan penyelesaian semua level atau kursus seluler lengkap. Artikel ini mengajarkan urutan latihan; artikel ini tidak memberikan kualifikasi atau menggantikan pengujian antarmuka Anda sendiri.

Permainan yang dapat Anda mainkan di Cozcade

Flexbox FroggyGrid Garden