Latihan 1: Design Tokens & Variables — UI/UX

Latihan 1 dari materi Design Tokens & Variables di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya <div class="card"> dengan judul dan paragraf, dan <style> dengan :root dan .card yang masih kosong. HTML-nya biarkan.

Di dalam :root, definisikan empat token: --color-primary: #2563EB;, --color-text: #111827;, --space-4: 1rem;, dan --radius-md: 0.5rem;.
Di dalam .card, pakai tokennya lewat var(): padding: var(--space-4); dan border-radius: var(--radius-md);. Jangan tulis 16px atau 8px langsung.
Kalau mau, tambahkan color: var(--color-text); di .card (gak dicek).

Yang dicek: .card dan <style> ada, kodenya memuat --color-primary dan pemanggilan var(--, padding atas kartu terbaca 16px, dan border-radius-nya 8px.

Hint

Token adalah nilai yang diberi nama sekali, lalu dipanggil namanya di mana pun dipakai. Mengganti nilainya di satu tempat mengubah semua yang memakainya.
Deklarasinya ditulis di :root dengan dua tanda minus di depan nama, misalnya --nama: nilai;. Di .card, panggil dengan var(--nama). Ingat 1rem = 16px dan 0.5rem = 8px.
:root { --color-primary: #2563EB; --color-text: #111827; --space-4: 1rem; --radius-md: 0.5rem; } .card { padding: var(--space-4); border-radius: var(--radius-md); }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Design Tokens & Variables — UI/UX

Hint

Memperbarui Aplikasi