Uji Kompetensi Flexbox and Grid Layout
Cek kesiapan kamu menyusun navbar, card grid, dan memilih Flexbox atau Grid dengan tepat.
Yang dicek
- Mengecek pemahaman Flexbox
- Mengecek kemampuan membuat navbar sederhana
- Mengecek pemahaman Grid
- Mengecek kemampuan membuat card grid
- Mengecek kemampuan memilih Flexbox atau Grid
- Mengarahkan learner membaca dokumentasi resmi CSS layout 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 merangkum Flexbox dan Grid Layout. Kamu akan mengecek Flexbox sebagai layout satu arah, Grid sebagai layout baris dan kolom, display: flex, display: grid, gap, justify-content, align-items, grid-template-columns, dan keputusan kapan memakai masing-masing.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Flexbox and Grid Layout
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
Kapan Flexbox biasanya paling cocok dipakai?
Coding practice
WajibDibuka di workspace khususMembuat section navbar dan card grid
Checkpoint praktik untuk membuat navbar dengan Flexbox dan card section dengan Grid.
Tujuan awal: Buat navbar sederhana dengan .nav dan .nav-list.
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 dokumentasi resmi ini untuk menguatkan pemahaman Flexbox dan Grid. Fokus pada konsep yang sudah kamu pakai di latihan.
MDN Web Docs
Basic concepts of flexbox
Fokus baca
- flex container
- flex item
- main axis dan cross axis secara ringan
Abaikan dulu
- advanced ordering
- nested flex patterns
MDN Web Docs
Aligning items in a flex container
Fokus baca
- justify-content
- align-items
- gap pada flex container
Abaikan dulu
- advanced alignment edge cases
- writing modes
MDN Web Docs
Basic concepts of grid layout
Fokus baca
- grid container
- grid item
- baris dan kolom
Abaikan dulu
- subgrid
- advanced grid placement
MDN Web Docs
grid-template-columns
Fokus baca
- membuat kolom
- repeat
- fr unit secara ringan
Abaikan dulu
- named lines
- complex track sizing
MDN Web Docs
gap
Fokus baca
- jarak antar item
- gap di Flexbox
- gap di Grid
Abaikan dulu
- animation
- advanced layout systems
Aksi setelah membaca
Kembali ke latihan kamu dan tunjukkan bagian mana yang memakai Flexbox, bagian mana yang memakai Grid, dan alasan memilih masing-masing.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Kamu membuktikan bahwa kamu memahami Flexbox untuk layout satu arah.
- Kamu membuktikan bahwa kamu memahami Grid untuk layout baris dan kolom.
- Kamu membuktikan bahwa kamu bisa memakai gap, justify-content, align-items, dan grid-template-columns.
- Jika checkpoint belum lulus, review lagi Flexbox, Grid, gap, justify-content, align-items, grid-template-columns, dan aturan memilih layout.
- Setelah memahami Flexbox dan Grid, berikutnya kamu akan belajar membuat tampilan yang lebih responsif dan konsisten di berbagai ukuran layar.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Apa yang dicek di checkpoint ini.