Level 7
Pertemuan 7

Responsive Design untuk Game Website

Membuat game website yang responsive di mobile, tablet, dan desktop.

HP 80 Gold 120
Mobile Game Homepage

Tujuan Pembelajaran

Memahami media query dan mobile-first approach.
Membuat game homepage responsive.
Testing di mobile, tablet, dan desktop.

Mobile-first Approach

Mulai dari layout kecil yang sederhana, lalu tambahkan aturan untuk layar lebih besar. 

              
                .hero-layout { display: grid; gap: 16px; } @media (min-width: 768px) { .hero-layout { grid-template-columns: 1fr 1fr; } }

Media Query

Mobile

Satu kolom, tombol besar, teks ringkas.

Tablet

Dua kolom sederhana, jarak antar elemen lebih longgar.

Desktop

Layout lebih luas, grid atau sidebar dapat ditampilkan.

Game Homepage Responsive

Homepage game perlu tetap jelas: judul, CTA, preview karakter, dan status penting tidak boleh saling menumpuk.

responsive-home.html
Game Title + Start Button
Hero
Story
Leaderboard

Testing di Banyak Ukuran

  1. Cek mobile view.
  2. Cek tablet view.
  3. Cek desktop view.
  4. Pastikan tombol mudah disentuh.
  5. Pastikan teks tidak keluar dari card.

Mini Challenge

Ubah homepage game kalian agar responsive: satu kolom di mobile, dua kolom di tablet, dan layout lebih luas di desktop.

Mini Quiz

Aturan CSS untuk kondisi ukuran layar tertentu disebut...

Penutup

Output pertemuan: fully responsive game website.