📱 Responsive Design
Level: Intermediate
Responsive Design adalah teknik membuat website agar tampil baik di berbagai ukuran layar (desktop, tablet, HP).
Bayangkan seperti air dalam wadah: bentuknya menyesuaikan wadah, tapi tetap fungsional.
📖 Konsep Dasar
- Fluid Layout: gunakan persentase (%) atau unit fleksibel (em, rem, vw, vh) daripada px.
- Media Queries: aturan CSS khusus untuk ukuran layar tertentu.
- Flexible Images: gambar otomatis menyesuaikan ukuran container (
max-width: 100%).
- Mobile First: desain dimulai dari layar kecil, lalu diperluas ke layar besar.
🛠️ Praktik Kecil
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
👉 Coba ubah ukuran browser. Grid akan berubah dari 3 kolom → 2 kolom → 1 kolom sesuai lebar layar.
🎮 Mini Challenge
Buat halaman portofolio sederhana dengan:
- Header dengan judul dan menu navigasi.
- Bagian galeri berisi beberapa gambar dalam grid.
- Gunakan media query agar galeri tampil 3 kolom di desktop, 2 kolom di tablet, dan 1 kolom di HP.
- Pastikan gambar bersifat fleksibel (tidak meluber keluar layar).
Tugas tambahan: Terapkan pendekatan mobile-first dengan menulis CSS untuk layar kecil terlebih dahulu.