Identifikasi sumbu sebelum memilih properti CSS
Baca target lily pad level dan periksa susunan katak saat ini. Dalam arah baris default, justify-content bekerja sepanjang sumbu utama horizontal dan align-items sepanjang sumbu silang vertikal. Sebelum mengetikkan nilai, nyatakan sumbu mana yang ingin Anda ubah. Kebiasaan ini mencegah kesalahan umum: memilih nilai yang tepat untuk properti yang mengontrol arah berbeda.
Ketika flex-direction berubah menjadi kolom, sumbu utama dan sumbu silang ikut berubah. Evaluasi kembali properti tersebut daripada berasumsi bahwa justify-content selalu berarti pergerakan horizontal. Masukkan satu perubahan CSS di editor dan bandingkan posisi yang dihasilkan dengan target. Katak diposisikan oleh CSS Anda, bukan diseret ke tempatnya. Gunakan petunjuk level dan properti yang diizinkan agar eksperimen tetap terikat dengan tugas yang sebenarnya ditampilkan.
Jelaskan perubahan yang gagal sebelum mencoba perubahan lainnya
Setelah perubahan meleset dari target, tanyakan apakah properti mempengaruhi sumbu yang salah, nilai yang dipilih mengatur item berbeda dari harapan Anda, atau arah saat ini mengubah arti tata letak. Pertahankan bagian dari aturan yang Anda pahami dan revisi satu hal. Mengganti beberapa properti sekaligus dapat mencapai target sekaligus membuat Anda tidak yakin perubahan mana yang menyelesaikan masalah.
Untuk latihan peninjauan, jelaskan aturan sukses dengan kata-kata sebelum melanjutkan: sumbu mana yang digunakan dan bagaimana posisi katak relatif terhadap daun teratai. Level selanjutnya bisa menggabungkan ide, jadi penjelasan ini lebih berguna daripada menghafal satu baris tanpa konteksnya. Panduan ini tidak memberikan daftar jawaban lengkap yang dibuat-buat atau mengklaim bahwa menyelesaikan permainan mensertifikasi keterampilan profesional CSS. Halaman putar yang tertaut memberikan kontrol editor dan penyusunan tugas yang tepat; pusat ini mendukung pemahaman dan praktik di seluruh tingkatan yang sebenarnya Anda temui.
Misalnya, jika aturan mengubah katak secara vertikal saat Anda menginginkan pergerakan horizontal, periksa flex-direction dan identifikasi sumbu utama saat ini sebelum memilih nilai lainnya. Ucapkan relasinya dengan lantang: properti ini mengubah distribusi sepanjang sumbu utama, dan sumbu utama saat ini berjalan ke arah ini. Kemudian lakukan satu edit dan periksa hasilnya. Setelah berhasil, uji penjelasan Anda dengan bunga lili yang terlihat. Ini mengubah tebakan yang gagal menjadi ide tata letak yang dapat digunakan kembali, bukan perintah yang Anda ingat hanya untuk satu layar.
Tips dan strategi Flexbox Froggy
Centang tips yang ingin dilatih pada permainan berikutnya. Daftar ini tidak mengubah permainan atau menyimpan progres.
Pertanyaan dan jawaban Flexbox Froggy
Apakah saya perlu menginstal alat pemrograman?
Tidak. Editor CSS ada di dalam game berbasis browser.
Apakah ini kursus pengembangan web yang lengkap?
Ini adalah permainan latihan interaktif untuk konsep tata letak flexbox. Permainan ini tidak menggantikan kursus HTML dan CSS yang lebih komprehensif.
Siapa yang membuat proyek ini?
Thomas Park menciptakan Flexbox Froggy. Kode sumbernya berlisensi MIT dan karya seni yang direkam menggunakan CC BY 3.0; tautan atribusi ada di bawah.
Mengapa flex-end berganti sisi setelah arah dibalik?
Awal dan akhir mengikuti sumbu utama, bukan tepi kiri dan kanan tetap. Dengan row-reverse, sumbu dimulai di kanan, jadi justify-content: flex-end menempatkan elemen di kiri. Periksa flex-direction dahulu. align-items mengatur sumbu silang dan menyelesaikan masalah posisi berbeda.