Pertemuan 8

Cover

Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.

Gallery

Why Responsive?

📱 Mengapa Responsive Design?

70% orang access website via smartphone
Website harus terlihat baik di semua ukuran (mobile, tablet, desktop)
Responsive = adaptif layout mengikuti screen size
Better UX = lebih banyak visitors!

Pro Tip: Mobile-first design: design untuk mobile dulu, kemudian expand ke desktop

Media Query

🔍 Media Query

Technique untuk apply different CSS berdasarkan screen size:

                    
                      @media (max-width: 768px)
                    
                    {
                    
                      .gallery
                    
                    {
                    
                      grid-template-columns
                    
                    :
                    
                      repeat(2, 1fr)
                    
                    ;
                    
                      }
                    
                    }

Artinya:"Jika layar ≤768px (tablet/mobile), ubah gallery jadi 2 kolom"

Breakpoints

📊 Standard Breakpoints

📱 Mobile: <768px
Phones seperti iPhone, Android → 1 atau 2 kolom gallery

📲 Tablet: 768px - 1024px
iPad, Samsung Tab → 2 atau 3 kolom gallery

🖥️ Desktop: >1024px
Laptop, desktop → full 3-4 kolom gallery

💡 Tip: Set 2-3 media queries untuk cover semua cases

Test It

🧪 Test Responsiveness

Buka website di browser
Tekan F12 untuk buka Developer Tools
Klik device toolbar icon (atau Ctrl+Shift+M)
Pilih device (iPhone, iPad, atau drag resize)
Lihat perubahan layout sesuai media query

Pro Tip: Resize window secara perlahan untuk lihat smooth transition antar breakpoints

Activity

🎯 Your Activity

Tambah 2 media queries

Untuk tablet (768px) dan mobile (<768px)
Adjust gallery columns

Desktop: 3-4 kolom | Tablet: 2 kolom | Mobile: 1-2 kolom
Test semua ukuran

Gunakan DevTools → toggle device toolbar
Ensure readability

Text harus readable di semua ukuran, tidak ada overflow
Test on real phone!

Kalau bisa, test di actual smartphone/tablet