Minggu 06 — UI/UX dan Frontend Development
HTML, CSS, JavaScript, desain responsif, komponen, state, dan kualitas UI.
Tiga lapisan frontend
| Teknologi | Peran |
|---|---|
| HTML | Struktur: judul, paragraf, form, tombol |
| CSS | Tampilan: warna, jarak, tata letak |
| JavaScript / TypeScript | Perilaku: klik, validasi, ambil data |
<button id="daftar" class="btn">Daftar</button>
<script>
document.getElementById('daftar').addEventListener('click', () => alert('Terima kasih!'));
</script>Responsive design
Halaman harus nyaman di HP, tablet, dan laptop. Prinsipnya: rancang untuk layar kecil dulu (mobile first), lalu perbesar dengan @media (min-width: 768px). Gunakan flex atau grid, ukuran relatif (%, rem), dan jangan membuat halaman bisa digeser ke samping.
Design system
Tetapkan sekali, pakai di mana-mana: palet warna, ukuran huruf, jarak (8, 16, 24 px), radius sudut, gaya tombol. Simpan sebagai variabel CSS (--warna-utama) dan minta AI selalu memakainya agar tampilan konsisten.
Komponen, state, form
- Komponen reusable: potongan UI yang dipakai ulang (kartu kursus, tombol, modal).
- State: data yang mengubah tampilan (daftar kursus, isi form, sedang loading).
- Validasi form: beri tahu pengguna apa yang salah, di kolom mana, dengan bahasa jelas.
Empat keadaan yang sering terlupa
| State | Tampilan yang baik |
|---|---|
| Loading | Indikator "Memuat…" atau kerangka (skeleton) |
| Empty | "Belum ada kursus. Tambah yang pertama." |
| Error | Pesan jelas + tombol "Coba lagi" |
| Sukses | Konfirmasi bahwa aksi berhasil |
Accessibility dan review UI
- Kontras warna cukup, ukuran huruf minimal 16px.
- Semua gambar punya
alt, setiap input punyalabel. - Bisa dipakai hanya dengan keyboard (Tab/Enter).
- Saat mereview hasil AI: coba di lebar 375px, perkecil/perbesar, kosongkan data, dan buat error sengaja.
Praktik minggu ini
Buat landing page premium untuk platform pembelajaran KelasIT.com. Target: frontend responsif dengan navigasi, halaman produk, dan form.