Pertemuan 5

Cover

Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.

Gallery

Flexbox Intro

🎯 Apa itu Flexbox?

Flexbox = CSS layout system yang powerful
Membuat item arrange automatically dalam row/column
Perfect untuk membuat responsive gallery
Kontrol alignment, spacing, dan wrapping

💡 Keuntungan: No need for float, positioning jadi lebih mudah, responsive by default

Flexbox Properties

🔧 Key Flexbox Properties

display: flex; — Aktifkan flexbox container

flex-direction: row (default) | column — arah items

justify-content: flex-start | center | space-between — horizontal alignment

align-items: flex-start | center | flex-end — vertical alignment

flex-wrap: wrap — items go to next line jika overflow

gap: 20px — spacing antar items

Visual Example

📊 Visual Comparison

❌ Before (No Flexbox):
Images stack vertically or overflow, sulit di-arrange

✅ After (With Flexbox):
Images arranged in beautiful grid, responsive, properly spaced

Flexbox automatically handles sizing & wrapping — code jadi lebih simple!

Code

💻 Flexbox Code Example

                    
                      .gallery
                    
                    {
                    
                      display
                    
                    :
                    
                      flex
                    
                    ;
                    
                      flex-wrap
                    
                    :
                    
                      wrap
                    
                    ;
                    
                      gap
                    
                    :
                    
                      20px
                    
                    ;
                    
                      justify-content
                    
                    :
                    
                      center
                    
                    ;
                    
                    }
                    
                      .artwork
                    
                    {
                    
                      width
                    
                    :
                    
                      200px
                    
                    ;
                    
                      border-radius
                    
                    :
                    
                      8px
                    
                    ;
                    
                      box-shadow
                    
                    :
                    
                      0 4px 6px rgba(0,0,0,0.1)
                    
                    ;
                    
                    }

Hasilnya: Items automatically arrange dalam grid, responsive di semua ukuran!

Demo Gallery Layout

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Contoh visual layout menggunakan Flexbox — gunakan ini sebagai referensi.

Customization

🎨 Customize Your Gallery

Gap Spacing: gap: 10px (tight) → 30px (spacious) → 50px (very wide)

Item Width: width: 150px (small) → 200px (medium) → 250px (large)

Alignment: justify-content: flex-start | center | space-around

Borders & Shadows: border-radius, box-shadow untuk visual polish

Pro Tip: Eksperimen & lihat real-time perubahan di browser!

Activity

🎯 Your Activity

Add CSS .gallery

Copy flexbox CSS dari slide sebelumnya ke styles.css
Eksperimen dengan nilai

Ubah gap, width, alignment → lihat perubahan di browser
Polish dengan styling

Add border-radius, box-shadow, hover effects
Test responsiveness

Open DevTools (F12) → Toggle device toolbar → Check di mobile
Take screenshot!

Save hasil gallery yang sudah di-style