Proyek Akhir: Landing Page Responsif
Menggabungkan semua materi: styling halaman landing page lengkap dengan variabel, flexbox navbar, grid fitur responsif, hero bergradient, tombol dengan transisi, dan media query.
Proyek penutup
Selamat sudah sampai di sini! Sekarang saatnya menggabungkan semuanya. Kamu diberi HTML sebuah landing page toko kopi KopiKita yang masih polos, dan tugasmu mendandaninya dengan CSS. Tidak ada materi baru: semua yang dibutuhkan sudah kamu pelajari.
Struktur HTML yang tersedia
header.navbar
a.navbar__logo
nav.navbar__menu (3 tautan)
section.hero
h1.hero__judul
p.hero__teks
a.tombol
section.fitur
h2.fitur__judul
div.fitur__daftar
article.fitur__item (3 kartu)
footer.kakiRancangan tampilan yang diminta
| Bagian | Yang harus dibuat |
|---|---|
| Dasar | box-sizing: border-box global, variabel --warna-utama: #3c5a44, --warna-aksen: #cf9d3d, --warna-teks: #1b1f1a; body tanpa margin, font system-ui, sans-serif |
| Navbar | Flex; logo di kiri, menu di kanan (space-between), rata tengah vertikal; latar --warna-utama, teks putih; padding 16px 24px |
| Menu | Flex dengan gap: 20px; tautan putih tanpa garis bawah |
| Hero | Latar linear-gradient dari --warna-utama ke warna lebih gelap, teks putih rata tengah, padding atas-bawah 64px |
| Tombol | Latar --warna-aksen, padding 12px 28px, radius 999px, transisi latar; hover berubah warna |
| Fitur | Grid satu kolom (gap: 20px) di ponsel, tiga kolom di layar ≥ 700px lewat media query; tiap kartu berlatar putih, radius 12px, bayangan halus, padding 20px |
| Footer | Rata tengah, padding 24px, latar --warna-teks, teks putih |
Langkah kerja yang disarankan
- Tulis reset dan variabel dulu; pastikan variabelnya terpakai.
- Kerjakan dari atas ke bawah: navbar, hero, fitur, footer.
- Jalankan setelah tiap bagian dan lihat hasilnya di pratinjau.
- Terakhir tambahkan media query tiga kolom untuk fitur.
Tantangan tambahan: tambahkan efek :hover pada kartu fitur (naik 4px dengan transform dan transisi), animasi @keyframes untuk memunculkan hero, dan mode gelap lewat prefers-color-scheme. Setelah itu, selamat: kamu sudah bisa membuat website yang tampil cantik!
Langkah berikutnya
Kamu sudah menguasai HTML dan CSS. Lanjutkan ke JavaScript untuk membuat halamanmu interaktif, lalu pelajari framework seperti React atau Vue, atau jalan terarah lewat menu Roadmap Belajar.