HTML Responsive Web Design

Bagian ini membahas dasar-dasar membuat halaman web yang responsif di berbagai ukuran layar.

Web responsif berarti tampilan halaman menyesuaikan diri secara otomatis dengan ukuran layar perangkat pengguna (desktop, tablet, maupun ponsel).

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tag meta viewport di atas wajib ada agar browser mobile menampilkan halaman sesuai lebar layar perangkat, bukan lebar desktop. Selanjutnya, layout responsif umumnya dibangun dengan CSS menggunakan unit relatif (%, vw, vh) dan media query.

Latihan (Submateri)

Kerjakan latihan berikut pada folder terpisah: