Uji Kompetensi Box Model and Spacing
Cek kesiapan kamu mengatur content, padding, border, margin, width, height, box-sizing, dan spacing dasar.
Yang dicek
- Mengecek pemahaman content, padding, border, dan margin
- Mengecek pemahaman width, height, max-width, dan box-sizing
- Mengecek kemampuan membedakan padding dan margin
- Mengecek kemampuan memperbaiki spacing sederhana
- Mengarahkan learner membaca dokumentasi resmi CSS dengan fokus
Isi lesson
5 blok- 1.Apa yang dicek di checkpoint iniBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Baca MDN secara terarahBelum selesaiOpsional
- 5.RingkasanBelum selesaiWajib
Apa yang dicek di checkpoint ini
WajibCheckpoint ini mengecek apakah kamu sudah memahami box model dan spacing dasar. Kamu akan membedakan content, padding, border, dan margin; membaca width, height, max-width, dan box-sizing; lalu memperbaiki spacing pada card sederhana. Fokusnya bukan membuat desain sempurna, tetapi membuktikan bahwa kamu bisa membuat box lebih rapi dan mudah dibaca.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Box Model and Spacing
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 10
Target lulus: 70
Dalam box model, bagian mana yang berisi teks atau gambar utama dari elemen?
Coding practice
WajibDibuka di workspace khususMemperbaiki spacing card sederhana
Checkpoint praktik untuk memperbaiki box model dan spacing pada card sederhana.
Tujuan awal: Perbaiki card agar spacing-nya lebih rapi.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Documentation Bridge
OpsionalBaca MDN secara terarah
Gunakan bagian ini sebagai latihan membaca dokumentasi CSS resmi, bukan tugas menghafal. Fokus pada bagian yang sudah kamu pakai di latihan.
MDN Web Docs
The box model
Fokus baca
- content
- padding
- border
- margin
Abaikan dulu
- margin collapsing details
- complex sizing behavior
- advanced layout
MDN Web Docs
Sizing items in CSS
Fokus baca
- width
- height
- max-width
- cara ukuran elemen memengaruhi layout
Abaikan dulu
- advanced intrinsic sizing
- complex layout systems
MDN Web Docs
box-sizing
Fokus baca
- box-sizing: border-box
- hubungan ukuran elemen dengan padding dan border
- kenapa ukuran box lebih mudah diprediksi
Abaikan dulu
- CSS reset debates
- advanced browser defaults
Aksi setelah membaca
Kembali ke latihan spacing card kamu dan tunjukkan: satu padding, satu margin, satu border, satu max-width, dan satu alasan kenapa box-sizing: border-box membantu ukuran card lebih mudah diprediksi.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Kamu membuktikan bahwa kamu memahami content, padding, border, dan margin.
- Kamu membuktikan bahwa kamu bisa membedakan padding sebagai jarak dalam dan margin sebagai jarak luar.
- Kamu membuktikan bahwa kamu bisa memakai max-width dan box-sizing untuk membuat card lebih mudah dikontrol.
- Jika checkpoint belum lulus, review lagi box model, padding vs margin, border, max-width, dan box-sizing.
- Setelah box model dan spacing dasar mulai aman, berikutnya kamu akan membawa HTML dan CSS ke workflow project lokal.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Apa yang dicek di checkpoint ini.