Hitung garis kisi, bukan sel yang terisi
Baca target penyiraman level tersebut, lalu identifikasi garis-garis yang membatasi area yang dituju. Penempatan grid dijelaskan dengan batas dan jalur; nomor baris bukan sekadar nomor sel berwarna. Sebelum memasukkan CSS, arahkan ke batas awal dan akhir yang Anda inginkan. Perbedaan kecil ini memudahkan untuk memprediksi area yang akan dicakup oleh suatu aturan daripada menemukannya hanya setelah air bergerak.
Saat tugas menggunakan rentang, pikirkan berapa banyak trek yang harus dicakup oleh area tersebut. Jangan menerjemahkannya secara langsung ke dalam jarak piksel atau menggunakan kembali aturan penyelarasan flexbox hanya karena kedua game tersebut melibatkan CSS. Masukkan satu perubahan di editor, amati area yang diairi dan bandingkan dengan wortel atau target lain yang ditentukan oleh level. Tugas saat ini menentukan apa yang dianggap sukses; area yang luas secara visual tidak serta-merta merupakan solusi yang diharapkan.
Gunakan bentuk hasil untuk mendiagnosis aturan
Jika wilayah yang diairi dimulai di tempat yang salah, periksa batas awal yang dipilih. Jika dimulai dengan benar tetapi berakhir terlalu dini atau terlambat, periksa ujung atau bentangnya. Jika berubah ke arah yang salah, periksa properti baris atau kolom mana yang Anda gunakan. Memberi nama kesalahan geometrik memberi Anda pengeditan selanjutnya yang tepat dan membantu menghindari penggantian beberapa bagian aturan yang benar sekaligus.
Setelah upaya berhasil, jelaskan garis mana yang melingkupi target dan bagaimana aturan memilihnya. Penjelasan tersebut berjalan lebih baik daripada rangkaian jawaban yang tidak terhubung karena level selanjutnya dapat menggunakan kisi yang berbeda atau menggabungkan batasan. Pusat ini mendukung taman interaktif CSS yang sebenarnya dan instruksi levelnya. Itu tidak menjanjikan tutorial tata letak berbasis piksel, sertifikasi eksternal, atau lembar jawaban lengkap yang diuji pada setiap versi. Gunakan halaman putar untuk kontrol editor, lalu kembali ke sini bila Anda menginginkan cara terfokus untuk meninjau kesalahan penentuan posisi.
Misalnya, jika air menutupi satu lintasan terlalu banyak, tandai batas akhir yang diinginkan dan bandingkan dengan nilai atau rentang yang Anda masukkan. Jaga agar awal yang benar tidak berubah sambil merevisi bagian akhir. Jika hasilnya berpindah ke baris lain, periksa aturan baris secara terpisah dari aturan kolom. Ketika target tercapai dengan benar, jelaskan batasan dan jalurnya dengan kata-kata. Latihannya adalah menghubungkan penempatan CSS dengan grid yang terlihat, yang berguna pada susunan baru dimana string jawaban sebelumnya tidak lagi memilih area yang diinginkan.
Tips dan strategi Grid Garden
Centang tips yang ingin dilatih pada permainan berikutnya. Daftar ini tidak mengubah permainan atau menyimpan progres.
Pertanyaan dan jawaban Grid Garden
Apa topik yang diajarkan oleh Grid Garden?
Ini menyediakan latihan interaktif dengan grid CSS melalui teka-teki tata letak taman.
Apakah saya mengendalikan karakter yang bergerak?
Tidak. Interaksi utamanya adalah memasukkan CSS yang mengubah penempatan grid.
Apa sumber aslinya?
Thomas Park dari Grid Garden menyediakan kode sumber berlisensi MIT dan CC BY 3.0 menyediakan karya seni yang digunakan dalam edisi yang diulas ini.
Apakah garis awal 2 dan garis akhir 4 mencakup empat sel?
Tidak. grid-column-start: 2 dan grid-column-end: 4 memilih ruang antara garis 2 dan 4: dua jalur kolom. Garis akhir adalah batas, bukan sel tambahan yang disiram. Hitung sela atau gunakan span 2, lalu periksa sorotan sebelum mengubah posisi baris juga.