Uji Kompetensi Responsive Visual System
Cek kesiapan kamu memakai mobile-first CSS, breakpoint, fluid spacing, typography, CSS variables, dan dark mode dasar.
Yang dicek
- Mengecek pemahaman mobile-first CSS
- Mengecek penggunaan breakpoint dasar
- Mengecek pemahaman responsive spacing dan typography
- Mengecek penggunaan CSS variables
- Mengecek pemahaman dark mode dasar
- Mengarahkan learner membaca dokumentasi resmi 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 responsive visual system dasar. Kamu akan membuktikan bahwa kamu memahami mobile-first CSS, breakpoint, media query, max-width, line-height, clamp secara ringan, CSS variables, dan pola dark mode dasar.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Responsive Visual System
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
Apa arti pendekatan mobile-first dalam CSS?
Coding practice
WajibDibuka di workspace khususMembangun responsive visual section
Checkpoint praktik untuk menggabungkan mobile-first CSS, readability, card grid, dan nilai visual yang konsisten.
Tujuan awal: Style .page dengan background dan color.
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 responsive visual system. Fokus pada konsep yang sudah kamu pakai di latihan.
MDN Web Docs
Responsive design
Fokus baca
- mobile-first responsive thinking
- layout yang menyesuaikan layar
- media query secara umum
Abaikan dulu
- complex responsive patterns
- advanced layout systems
MDN Web Docs
Media queries
Fokus baca
- min-width
- menambahkan aturan untuk layar lebih besar
- kapan media query dipakai
Abaikan dulu
- container queries
- complex media features
MDN Web Docs
Using CSS custom properties
Fokus baca
- custom properties
- var()
- nilai visual reusable
Abaikan dulu
- advanced theming
- CSS architecture
MDN Web Docs
clamp()
Fokus baca
- nilai minimum
- nilai fleksibel
- nilai maksimum
Abaikan dulu
- complex formulas
- animation systems
MDN Web Docs
prefers-color-scheme
Fokus baca
- dark mode preference basics
- light dan dark values
- readable contrast
Abaikan dulu
- complex theme switching
- system integration details
Aksi setelah membaca
Kembali ke latihan kamu dan tunjukkan bagian mana yang membuat layout responsive, bagian mana yang menjaga teks readable, dan nilai visual apa yang bisa dijadikan CSS variable.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Kamu membuktikan bahwa kamu memahami mobile-first CSS dan breakpoint dasar.
- Kamu membuktikan bahwa kamu bisa memakai max-width dan line-height untuk readability.
- Kamu membuktikan bahwa kamu memahami CSS variables sebagai nilai visual reusable.
- Jika checkpoint belum lulus, review lagi mobile-first CSS, breakpoints, max-width, line-height, clamp basics, CSS variables, dan dark mode value swapping.
- Setelah memahami CSS visual system dasar, berikutnya kamu akan mulai masuk ke JavaScript Fundamentals.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Apa yang dicek di checkpoint ini.