praktikum

Praktikum Modul 5: Desain Responsif dan Navigasi Interaktif

Asisten Praktikum: Zanuar Rizka Aditiya

Praktikum Modul 5: Desain Web Responsif (RWD), Media Queries, dan Tata Letak Fleksibel

Sesi praktikum laboratorium kelima yang mendalami teknik perancangan antarmuka responsif (Responsive Web Design / RWD) sehingga halaman web dapat beradaptasi secara dinamis di berbagai resolusi layar gawai (smartphone, tablet, dan desktop).

1. Prinsip Desain Responsif Modern

  • Konfigurasi tag meta viewport wajib: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
  • Penggunaan unit ukuran relatif (%, vw, vh, rem, em) menggantikan ukuran piksel statis (px).
  • Sintaks CSS Media Queries untuk menentukan breakpoint resolusi:
css 
/* Mobile-First Baseline Styles */
.container { width: 100%; padding: 1rem; }

/* Tablet Breakpoint (>= 768px) */
@media (min-width: 768px) {
  .container { max-width: 720px; margin: 0 auto; }
}

/* Desktop Breakpoint (>= 1024px) */
@media (min-width: 1024px) {
  .container { max-width: 960px; display: grid; grid-template-columns: 2fr 1fr; }
}

2. Tata Letak Flexbox dan Grid System

Praktikum ini melatih mahasiswa membangun navigasi yang dapat berubah menjadi menu hamburger pada tampilan mobile dan layout kartu artikel yang menyesuaikan jumlah kolom secara otomatis sesuai lebar layar.

3. Berkas Dokumentasi Laboratorium

  • Laporan Praktikum (TPP 5): Berkas 24-085_Moch. Zamroni Fahreza_TPP5.pdf yang memuat dokumentasi desain responsif multi-perangkat.
  • Buku Panduan Praktikum: Berkas rujukan laboratorium prak dpw.pdf.

Attachments

Back to Academics