Latihan 1: Structural vs Interactive Color — UI/UX

Latihan 1 dari materi Structural vs Interactive Color di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya <div class="card"> berisi judul, paragraf, sebuah <button>Mulai</button>, dan link <a href="#">Pelajari lebih lanjut</a>, dengan tag <style> yang masih kosong. Biarkan markup-nya. Di <style>, beri kartu warna struktural dan tombol serta link warna interaktif biru:

.card dengan background-color: #F9FAFB
button dengan background-color: #2563EB dan color: white
a dengan color: #2563EB

Tambahkan juga border: 1px solid #E5E7EB di .card supaya permukaannya punya tepi. Garis ini gak dicek.

Hint

Kartu adalah permukaan yang gak bisa ditekan, jadi warnanya struktural: abu-abu sangat terang. Tombol dan link bisa ditekan, jadi keduanya memakai warna aksi yang sama.
Tulis tiga aturan di <style>: .card untuk latar kartu, button untuk latar dan teks tombol, a untuk warna link.
.card { background-color: #F9FAFB; border: 1px solid #E5E7EB; } button { background-color: #2563EB; color: white; } a { color: #2563EB; }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Structural vs Interactive Color — UI/UX

Hint

Memperbarui Aplikasi