MoreLesson 187Preview gratis
Cards
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas card, yaitu wadah konten berbentuk kotak yang menyatukan gambar, judul, deskripsi, dan aksi. Card umum digunakan pada blog, katalog produk, dan dashboard. Dengan CSS Grid atau Flexbox, kumpulan card dapat tersusun rapi, memiliki tinggi seragam, dan tetap responsif di berbagai ukuran layar.
Poin kunci
- Gunakan elemen semantik seperti article untuk setiap card
- Terapkan border-radius, box-shadow, dan padding untuk memisahkan card dari latar
- Atur gambar dengan width: 100% dan object-fit: cover agar tidak terdistorsi
- Gunakan CSS Grid repeat(auto-fit, minmax(...)) agar card responsif tanpa banyak media query
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.