🎨 CSS Lanjutan (Flexbox, Grid, Animasi)

Level: Intermediate

CSS Lanjutan memungkinkan kita membuat layout modern dan interaktif. Flexbox dan Grid memudahkan pengaturan tata letak, sedangkan animasi membuat web lebih hidup. Bayangkan Flexbox sebagai rak buku fleksibel, Grid sebagai papan catur, dan Animasi sebagai efek panggung yang membuat pertunjukan menarik.

📖 Konsep Utama

Flexbox: tata letak 1 dimensi (baris/kolom). Properti penting: display: flex, justify-content, align-items, flex.
Grid: tata letak 2 dimensi (baris & kolom). Properti penting: display: grid, grid-template-columns, grid-template-rows, gap.
Animasi: gunakan @keyframes untuk membuat efek bergerak, berubah warna, atau transisi.

🛠️ Praktik Kecil

Flexbox

Box 1

Box 2

Box 3

Grid

Animasi

👉 Coba jalankan kode ini di browser. Flexbox akan menata box secara fleksibel, Grid membuat layout kotak, dan lingkaran akan bergerak dengan animasi.

🎮 Mini Challenge

Buat halaman dengan:

Header dan footer menggunakan Flexbox (logo di kiri, menu di kanan).
Konten utama berupa galeri gambar menggunakan Grid (3 kolom di desktop, 1 kolom di HP).
Tambahkan animasi hover pada gambar (misalnya zoom in atau efek bayangan).

Tugas tambahan: Buat animasi loading sederhana (misalnya lingkaran berputar) menggunakan @keyframes.