Tujuan Pembelajaran
Mahasiswa mampu membuat web responsif menggunakan media queries, serta menerapkan Bootstrap untuk layout cepat dan konsisten di berbagai device.
Web Responsif: Konsep dan Pentingnya
Web responsif menyesuaikan layout dengan ukuran layar (desktop, tablet, mobile). Tanpa ini, web tampil buruk di HP. Responsivitas meningkatkan UX dan SEO, karena Google prioritas mobile-friendly.
Analoginya: Pakaian yang pas di semua ukuran tubuh.
Media Queries
Aturan CSS yang berlaku berdasarkan kondisi device, seperti max-width. Contoh: @media (max-width: 768px) { body { font-size: 14px; } }.
Breakpoint umum: 768px (tablet), 480px (mobile).
Bootstrap Framework
Framework CSS untuk responsivitas cepat. Punya grid system (container, row, col), komponen (button, navbar), dan utility classes. Download atau link CDN, lalu gunakan class seperti col-md-6 untuk kolom.
Keuntungan: Cepat prototyping, konsisten, komunitas besar.
Contoh Kode
/* Media Query */
@media (max-width: 768px) {
.container { padding: 10px; }
h1 { font-size: 1.5em; }
}
/* Bootstrap (link di head: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">) */
<div class="container">
<div class="row">
<div class="col-md-6">Kolom Kiri</div>
<div class="col-md-6">Kolom Kanan</div>
</div>
</div>
Tips Praktis
- Test responsivitas dengan dev tools (toggle device).
- Gunakan Bootstrap untuk proyek cepat, custom CSS untuk unik.
- Prioritas mobile-first: Design untuk mobile dulu.
Ringkasan
Media queries buat custom responsivitas, Bootstrap percepat development. Kombinasi ini buat web universal.
Latihan
1. Buat halaman responsif dengan media queries. 2. Implementasi Bootstrap grid untuk layout 2 kolom. 3. Test di HP dan desktop.