HTML

CSS

JS

Mobile

Tablet

Desktop

Kelas 10 · Semester 1 · Bab 8

RESPONSIVE WEB DESIGN

Belajar membuat website yang tampil sempurna di HP, tablet, maupun layar besar — tanpa Bootstrap, murni HTML & CSS.

27 Slide Interaktif Kode + Demo Langsung + 3 Latihan

Gunakan tombol NEXT atau panah → untuk mulai

Peta Materi

Apa yang akan kita pelajari?

8 pemberhentian dalam perjalanan kita memahami desain web responsif. Klik tiap node untuk melihat efeknya.

Mobile FirstDesain dari kecil

ViewportBingkai layar

Media Query@media breakpoint

LayoutFlexbox & Grid

ImageGambar elastis

NavbarMenu hamburger

CardKartu reflow

Mini ProjectCompany Profile

Tujuan Pembelajaran

Setelah bab ini, kamu mampu…

Menjelaskan konsep Mobile First Design dengan analogi nyata.
Menggunakan <meta name="viewport"> dengan benar.
Menulis media query @media untuk breakpoint umum.
Membuat layout responsif tanpa Bootstrap (Flexbox & Grid).
Membuat image, navbar, & card yang responsif.
Menyelesaikan Mini Project Responsive Company Profile + 3 latihan.

Konsep Dasar

Apa itu Responsive Web Design?

📺📱💻

Analogi: Satu Acara, Banyak Layar

Bayangkan satu acara TV yang sama. Saat kamu tonton di TV besar, gambarnya lebar. Saat pindah ke HP, gambar otomatis menyesuaikan agar tetap enak ditonton — tidak terpotong, tidak perlu geser-geser. Website responsif bekerja persis seperti itu!

Responsive Web Design (RWD) adalah teknik membuat satu website yang otomatis menyesuaikan tampilan dengan ukuran layar perangkat penggunanya.

Satu kode untuk semua perangkat — tidak perlu bikin situs terpisah untuk HP.
Tata letak, gambar, dan teks berubah ukuran & posisi mengikuti lebar layar.
Tujuan akhir: nyaman dibaca tanpa zoom & tanpa scroll horizontal.

0–767px : Mobile 768–1023px : Tablet ≥1024px : Desktop

Mobile First Design

Mulai dari yang terkecil

👶➡️🧑

Analogi: Baju dari Bayi ke Dewasa

Lebih mudah membuat baju bayi lalu melebarkannya saat anak tumbuh, daripada memaksakan baju dewasa ke tubuh bayi. Mobile First = desain dulu untuk layar kecil, lalu tambah elemen saat layar makin lebar.

Mobile First

Tulis CSS dasar untuk HP lebih dulu.
Gunakan @media (min-width: …) untuk memperbesar.
Lebih ringan & cepat di HP — perangkat terbanyak.

Desktop First

Mulai dari layar besar, lalu dikecilkan.
Pakai @media (max-width: …).
Sering berat di HP & lebih rumit diperbaiki.

Mobile First · Kode

Menulis CSS Mobile First

Perhatikan: gaya dasar tanpa media query = untuk HP. Lalu kita pakai min-width untuk menambah kolom saat layar membesar.

style.css

/* 1. Gaya DASAR = untuk HP (mobile) */
.galeri {
  display: grid;
  grid-template-columns: 1fr;   /* 1 kolom */
  gap: 12px;
}

/* 2. Tablet ke atas: jadi 2 kolom */
@media (min-width: 768px) {
  .galeri { grid-template-columns: repeat(2, 1fr); }
}

/* 3. Desktop ke atas: jadi 3 kolom */
@media (min-width: 1024px) {
  .galeri { grid-template-columns: repeat(3, 1fr); }
}

Lihat bagaimana 1 → 2 → 3 kolom muncul seiring layar membesar:

📱 1 kolom

📲 2 kolom

💻 3 kolom

Viewport

Apa itu Viewport?

🪟

Analogi: Jendela Rumah

Viewport itu seperti jendela rumah. Pemandangan di luar (isi website) tetap sama, tapi seberapa banyak yang terlihat tergantung ukuran jendelanya. HP punya jendela kecil, monitor punya jendela lebar.

Viewport = area layar perangkat yang menampilkan halaman web.
HP punya viewport sempit (≈360–430px), monitor lebar (≥1280px).
Tanpa pengaturan, HP "berpura-pura" jadi layar lebar ±980px lalu mengecilkan halaman → teks jadi mungil.
Maka kita perlu memberi tahu browser ukuran jendela sebenarnya lewat meta viewport (slide berikutnya).

Meta Viewport · Kode

Tag Wajib: <meta viewport>

Letakkan satu baris ini di dalam <head>. Inilah kunci agar website terlihat benar di HP.

index.html

<head>
  <meta charset="UTF-8">
  <!-- ⬇️ Baris paling penting untuk RWD -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
</head>

width=device-width → lebar halaman = lebar layar asli perangkat.
initial-scale=1.0 → tingkat zoom awal 100% (tidak diperkecil).

TANPA meta viewport

Teks kecil, harus zoom & geser ke samping → tidak nyaman.

DENGAN meta viewport

Teks pas, rapi, langsung terbaca tanpa zoom. 👍

Media Query

Logika @media

Media query adalah cara CSS "bertanya" tentang ukuran layar, lalu menerapkan gaya yang sesuai. Ibarat satpam pintu yang mengecek lebar layar.

Cek lebar layar (browser)

Lebar < 768px ?

YA

Pakai gaya MOBILE

TIDAK

Pakai gaya DESKTOP

Breakpoint

Ukuran S / M / L / XL

👕

Analogi: Ukuran Baju

Toko baju menyediakan ukuran S, M, L, XL agar pas di berbagai tubuh. Breakpoint adalah "ukuran baju" untuk layar — titik di mana tata letak berganti agar tetap pas.

Perangkat	Lebar Umum	Breakpoint	Ukuran "Baju"
📱 HP kecil	320–479px	`≤ 480px`	S
📱 HP besar	480–767px	`≥ 480px`	M
📲 Tablet	768–1023px	`≥ 768px`	L
💻 Laptop	1024–1199px	`≥ 1024px`	XL
🖥️ Desktop	≥ 1200px	`≥ 1200px`	XXL

Yang paling sering dipakai: 768px (tablet) dan 1024px (desktop).

Media Query · Kode + Demo

Tulis & Coba Sendiri

style.css

.banner {
  background: #7c3aed;
  font-size: 14px;
}
@media (min-width:768px){
  .banner{ background:#c9a84c; font-size:22px; }
}
@media (min-width:1024px){
  .banner{ background:#3fb950; font-size:30px; }
}

Demo Live Resize — geser slider!

Lebar layar simulasi: 500px → 📱 Mobile

Layout · Flexbox

Flexbox yang Fleksibel

📚

Analogi: Rak Buku Elastis

Bayangkan rak buku yang bisa otomatis menurunkan buku ke baris baru saat raknya menyempit. flex-wrap: wrap membuat item "turun" ke baris berikutnya ketika tidak muat — tidak ada yang terpotong.

flex.css

.rak {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.rak > div {
  flex: 1 1 150px;
  /* tumbuh, menyusut, dasar 150px */
}

Hasil: item membungkus otomatis

1

2

3

4

Perkecil jendela browser → item otomatis turun baris. ✨

Layout · CSS Grid

Grid yang Runtuh Rapi

Trik andalan tanpa media query: auto-fit + minmax(). Grid otomatis menyesuaikan jumlah kolom dengan ruang yang ada.

grid.css

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

A

B

C

💻 Desktop: 3 kolom

Responsive Image

Gambar yang Tahu Diri

🖼️

Analogi: Foto Dicetak Berbagai Kertas

Satu foto bisa dicetak di kertas kecil (dompet) atau besar (poster) tanpa berubah isinya — hanya ukurannya menyesuaikan bingkai. Gambar responsif tidak boleh melebihi lebar wadahnya.

max-width:100% → gambar tidak pernah lebih lebar dari wadahnya (penyebab utama overflow!).
height:auto → tinggi mengikuti agar gambar tidak gepeng.
srcset / <picture> → kirim gambar beda ukuran/versi sesuai layar (hemat data).

Responsive Image · Kode

3 Cara Gambar Responsif

image.html / css

/* Cara 1 — paling umum & wajib */
img { max-width:100%; height:auto; display:block; }

<!-- Cara 2 — srcset: pilih file sesuai lebar layar -->
<img src="kecil.jpg"
     srcset="kecil.jpg 480w, besar.jpg 1024w"
     alt="Pemandangan">

<!-- Cara 3 — picture: ganti gambar di breakpoint -->
<picture>
  <source media="(min-width:768px)" srcset="lebar.jpg">
  <img src="potret.jpg" alt="Banner">
</picture>

"Gambar" (CSS art) selalu pas di dalam bingkai berapa pun lebarnya:

max-width:100%

Responsive Navbar

Menu yang Bisa Dilipat

🍔

Analogi: Menu Restoran yang Dilipat

Di meja besar, daftar menu dibentang penuh. Di meja kecil, menu dilipat jadi satu buku tipis yang dibuka saat perlu. Itulah hamburger menu 🍔 — menyembunyikan link di layar sempit, muncul saat tombol ditekan.

Layar lebar: semua link tampil mendatar.
Layar sempit: link disembunyikan, muncul tombol ☰ (hamburger).
Tombol ditekan → menu turun (butuh sedikit JavaScript untuk toggle).

Navbar · Kode + Demo

Hamburger Beraksi

navbar

<nav>
  <b>LogoKu</b>
  <button onclick="menu.classList.toggle('on')">☰</button>
  <ul id="menu">
    <li>Home</li><li>About</li>
  </ul>
</nav>

#menu{ max-height:0; overflow:hidden; }
#menu.on{ max-height:200px; }
@media(min-width:768px){
  button{display:none;} /* sembunyikan ☰ */
  #menu{max-height:none;display:flex;}
}

Coba klik tombol ☰

LogoKu

Home
About
Services
Contact

Di layar lebar, link otomatis tampil mendatar tanpa tombol.

Responsive Card

Kartu yang Menata Diri

💳

Analogi: Kartu Nama di Dompet

Beberapa kartu nama bisa berjajar di dompet lebar, tapi di dompet kecil mereka menumpuk ke bawah agar tetap muat. Kartu/card responsif berpindah dari banyak kolom menjadi satu kolom saat layar menyempit.

Card biasanya disusun dengan Grid + auto-fit minmax().
Layar lebar → 3–4 kolom. Layar HP → 1 kolom menumpuk.
Gunakan gap untuk jarak antar card yang konsisten.

Card · Kode + Demo

Grid Card Responsif

cards.css

.cards{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.card{ background:#fff; border-radius:14px; padding:20px; }

Kecilkan jendela browser → card otomatis menumpuk:

Cepat

Loading kilat

Aman

Terlindungi

Responsif

Semua layar

Disukai

User happy

Mini Project

Responsive Company Profile

Saatnya menggabungkan semua! Kita akan membangun satu halaman profil perusahaan yang rapi di HP, tablet, dan desktop.

Preview tampilan di 3 perangkat

📱 Mobile

📲 Tablet

💻 Desktop

Navbar Hero About Services (card) Footer

Mini Project · Langkah 1

Struktur HTML

Rangka semantik dulu, baru dipercantik. Ikuti alur dari atas ke bawah:

<header> — Navbar + Logo

<section class="hero"> — Judul besar

<section class="about"> — Tentang

<section class="services"> — Card grid

<footer> — Kontak

index.html

<header> <!-- navbar --> </header>
<section class="hero">...</section>
<section class="about">...</section>
<section class="services">
  <div class="card">...</div>
</section>
<footer>...</footer>

Mini Project · Langkah 2

CSS Responsif

Mobile First: gaya dasar untuk HP, lalu tambah kolom di layar besar.

style.css

/* dasar: mobile */
*{ box-sizing:border-box; margin:0; }
img{ max-width:100%; height:auto; }
.hero{ padding:40px 16px; text-align:center; }
.services{
  display:grid; gap:16px;
  grid-template-columns:1fr;   /* 1 kolom di HP */
}
nav ul{ display:none; } /* sembunyikan di HP */

/* tablet & atas */
@media(min-width:768px){
  .services{ grid-template-columns:repeat(3,1fr); }
  nav ul{ display:flex; gap:20px; }
  .burger{ display:none; }
}

Mini Project · Hasil

Dari Mobile ke Desktop

Tekan tombol untuk menyaksikan halaman beradaptasi dari satu kolom (HP) menjadi tiga kolom (desktop).

PT Maju Jaya ☰

Solusi Digital Terbaik

Cepat

Aman

Support

💻 Desktop — 3 kolom, menu mendatar

Rangkuman

Semua dalam Satu Layar

Mobile First

Desain dari kecil → besar pakai min-width.

Viewport

Wajib <meta name="viewport"> di head.

Media Query

@media(min-width:768px) ubah gaya per breakpoint.

Layout

Flexbox wrap & Grid auto-fit minmax().

Image

max-width:100%; height:auto; wajib.

Navbar & Card

Hamburger (JS toggle) + card grid reflow.

Satu kode, semua layar. Itulah inti Responsive Web Design.

01

Latihan 1 · Media Query

Tulis 3 Breakpoint

Instruksi

Buat sebuah .kotak yang berganti warna latar sesuai lebar layar:

HP (< 768px): warna ungu #7c3aed
Tablet (≥ 768px): warna emas #c9a84c
Desktop (≥ 1024px): warna hijau #3fb950

Kriteria Penilaian

Gaya dasar = mobile (30%)
2 media query min-width benar (40%)
Warna sesuai & berfungsi saat di-resize (30%)

Output yang Diharapkan

Resize jendela browser → kotak berubah ungu → emas → hijau secara otomatis tanpa reload.

petunjuk.css

.kotak{ background:#7c3aed; }
@media(min-width:768px){ .kotak{ background:/* ??? */; } }
/* tambahkan breakpoint 1024px sendiri */

02

Latihan 2 · Responsive Navbar

Bikin Hamburger Menu

Instruksi

Buat navbar dengan logo + 4 link (Home, About, Services, Contact) yang:

Di layar ≥ 768px: link tampil mendatar, tombol ☰ disembunyikan.
Di layar < 768px: link disembunyikan, muncul tombol ☰.
Klik ☰ → menu muncul/hilang (pakai JS classList.toggle).

Kriteria Penilaian

HTML navbar semantik (25%)
Media query menyembunyikan/menampilkan elemen (35%)
Toggle JS berfungsi (40%)

Output yang Diharapkan

Di HP, klik ☰ membuka daftar menu ke bawah. Di desktop, semua link langsung terlihat mendatar.

petunjuk.js

const btn = document.querySelector('.burger');
const menu = document.querySelector('#menu');
btn.addEventListener('click', () => menu.classList.toggle('on'));

03

Latihan 3 · Project Mandiri

Responsive Portfolio

Instruksi

Buat satu halaman portfolio pribadi responsif (1 file HTML + CSS) berisi:

Navbar responsif dengan hamburger.
Hero: foto/avatar + nama + tagline (gambar max-width:100%).
Galeri proyek: minimal 4 card grid (1 kolom HP → 3 kolom desktop).
Footer dengan kontak/sosial media.
Wajib pakai <meta viewport> + minimal 2 breakpoint.

Struktur (20%)

HTML semantik & rapi

Responsif (50%)

Pas di HP, tablet, desktop tanpa scroll horizontal

Kreativitas (30%)

Warna, font, & tata letak menarik

Selamat! Kamu telah menyelesaikan BAB 8 — Responsive Web Design. 🎉

Mulai dari tampilan HP (Mobile First) lalu lebarkan.
Gunakan grid auto-fit minmax() untuk galeri agar otomatis reflow.
Tes dengan DevTools (F12 → ikon HP) di lebar 375px, 768px, 1440px.