Latihan 1 dari materi Text Hierarchy di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya kartu pesan Kamar Teras: nama kamar di <h1>, totalnya di <h2>, catatan batal di <p>, dan tag <style> yang masih kosong. Bikin hierarki 3 level dengan menulis aturan CSS di dalam <style>:
h1 (primary): font-size: 2.25rem dan color: #111827. Tebal 700 sudah bawaan browser untuk h1.
h2 (secondary): font-size: 1.25rem, font-weight: 600, dan color: #374151.
p (tertiary): color: #6B7280 dan line-height: 1.6. Ukuran 1rem dan tebal 400 sudah bawaan browser untuk p.
Nilai bawaan boleh kamu tulis supaya niatmu jelas, tapi gak dicek. Tulis warnanya lengkap enam digit seperti di atas. Tiga elemen HTML dan teksnya biarkan seperti di kode awal.
Hint
Hierarki dibentuk dari beberapa pembeda sekaligus: makin penting, makin besar, makin tebal, dan makin gelap. Body text dapat baris yang longgar.
Tulis tiga aturan di dalam <style>: h1 butuh font-size dan color; h2 butuh font-size, font-weight, dan color; p butuh color dan line-height tanpa satuan.