Landing page adalah halaman pertama yang dibuka pengunjung: judul besar, satu tombol ajakan (CTA, call to action), lalu beberapa alasan untuk mampir. Di proyek ini kamu membangun satu landing page kecil dari HTML polos, langkah demi langkah, dengan class yang sudah kamu pelajari di track ini. Bayangin merakit lemari dari toko furnitur. Tiap papan dan baut sudah kamu kenal, sekarang tinggal urutannya: rangka dulu, baru rak, terakhir pintu dan pegangan. Di halaman juga begitu: struktur HTML dulu, lalu ukuran dan jarak, lalu tata letak, terakhir warna dan interaksi. Langkahnya sama persis dengan Lab di halaman ini.
🧪 Tebakan cepat: grid fitur memakai
grid grid-cols-1 md:grid-cols-3. Di HP selebar 375px, ada berapa kolom? Di laptop selebar 1.280px? Tebak dulu, jawabannya ada di bagian "Langkah 3: responsive, mulai dari HP".
Langkah 0: HTML dulu, tanpa class
<section id="hero">
<h1 id="headline">BelajarWeb.dev</h1>
<p id="tagline">Platform belajar web development interaktif</p>
<button id="cta">Mulai Belajar</button>
</section>
<section>
<div>
<div>
<h3>Materi singkat</h3>
<p>Satu konsep per materi, dengan contoh yang bisa dicoba.</p>
</div>
<!-- dua card lagi: "Lab interaktif" dan "Latihan dinilai" -->
</div>
</section>
Tanpa class, Preflight (reset bawaan Tailwind) membuat semuanya 16px, tanpa jarak, dan tombolnya kelihatan kayak teks biasa. Itu titik awalnya.
Langkah 1: hero
<section id="hero" class="text-center py-16 px-4">
<h1 id="headline" class="text-4xl font-bold">BelajarWeb.dev</h1>
<p id="tagline" class="mt-4 text-gray-500">Platform belajar web development interaktif</p>
<button id="cta" class="mt-6 bg-blue-500 text-white px-6 py-3 rounded-lg">Mulai Belajar</button>
</section>
text-center= text-align center. Cukup disection, semua isinya ikut rata tengah karena diwariskan.py-16 px-4= padding 64px atas-bawah dan 16px kiri-kanan.text-4xl font-bold= judul 36px dengan font-weight 700.mt-4 text-gray-500= jarak 16px di atas tagline, warnanya abu.mt-6 bg-blue-500 text-white px-6 py-3 rounded-lg= tombol biru bertulisan putih, padding 24px kiri-kanan (px-6) dan 12px atas-bawah (py-3), sudut 8px. Tingginya sekitar 48px, enak ditap jari.
Ini persis latihannya. Penilainya membaca gaya hasil hitungan browser: hero text-align center, judul font-weight 700, tombol border-radius 8px dan padding-left 24px.
Langkah 2: kerangka halaman dan fitur
<body class="min-h-screen">
<!-- hero dari langkah 1 -->
<section class="mx-auto max-w-7xl px-4 pb-16">
<div class="grid grid-cols-1 gap-6">
<div class="rounded-xl border border-gray-200 p-6 shadow-sm">
<h3 class="font-semibold">Materi singkat</h3>
<p class="mt-2 text-sm text-gray-500">Satu konsep per materi, dengan contoh yang bisa dicoba.</p>
</div>
<!-- dua card lagi, class-nya sama -->
</div>
</section>
</body>
min-h-screen= min-height 100vh: halaman minimal setinggi layar, boleh lebih panjang.max-w-7xl mx-auto= pola container: lebar maksimal 1.280px, dan margin kiri-kananautomenaruhnya di tengah.px-4menjaga teks gak nempel ke pinggir layar HP.grid grid-cols-1 gap-6= satu kolom dengan jarak 24px antar card.- Card: sudut 12px (
rounded-xl), garis abu muda, padding 24px, bayangan tipis (shadow-sm).
Langkah 3: responsive, mulai dari HP
Class tanpa awalan berlaku di semua lebar layar. Awalan md: baru aktif mulai lebar 768px. Jadi tulis tampilan HP dulu, lalu tambahkan yang berubah di layar besar:
<section id="hero" class="text-center py-16 px-4 md:py-24">
<h1 id="headline" class="text-4xl font-bold md:text-6xl">BelajarWeb.dev</h1>
...
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
| Lebar layar | Kolom fitur | Judul | Padding hero |
|---|---|---|---|
| 375px (HP) | 1 | 36px | 64px |
| 1.280px (laptop) | 3 | 60px | 96px |
Di HP satu kolom, di laptop tiga kolom. Itu jawaban tebakannya. grid-cols-1 berlaku dari lebar nol, lalu md:grid-cols-3 menimpanya mulai 768px.
Langkah 4: mode gelap dan interaksi
bg-white dark:bg-gray-900dibody,dark:text-whitedi judul,dark:text-gray-400di teks abu,dark:border-gray-700di card. Di Tailwind v4,dark:mengikuti setelan gelap di sistem operasi pengunjung.hover:bg-blue-600 transition-colorsdi tombol: sedikit lebih gelap saat di-hover, dengan perubahan yang halus.groupdi tiap card dangroup-hover:text-blue-600di judulnya: hover di mana saja di card, judulnya jadi biru.
Halaman setinggi layar
Dua pola yang sering tertukar:
- Landing page:
min-h-screen, minimal setinggi layar, dan halamannya boleh memanjang lalu di-scroll. - Layout aplikasi (header tetap, isinya saja yang di-scroll):
h-screen flex flex-coldi pembungkus, lalu bagian isinyaflex-1 overflow-y-auto.
<div class="h-screen flex flex-col">
<header class="p-4 border-b">Dashboard</header>
<main class="flex-1 overflow-y-auto p-4">Isi yang panjang...</main>
</div>
flex-col menyusun header dan main dari atas ke bawah, flex-1 membuat main mengisi sisa tinggi layar, dan overflow-y-auto memberi main scroll-nya sendiri.
⚠️ Jebakan yang sering ketemu
- Mulai dari desktop.
grid-cols-3 md:grid-cols-1kebalik: di HP malah tiga kolom sempit. Tanpa awalan untuk HP,md:untuk layar besar. max-w-7xltanpamx-auto. Lebarnya terbatas, tapi kontennya nempel di kiri.p-6di tombol. Padding-left-nya memang 24px, tapi atas-bawahnya ikut 24px dan tombolnya bengkak. Pakaipx-6 py-3.- Latar gelap tanpa pasangan teksnya.
dark:bg-gray-900tanpadark:text-whitebikin judul abu tua di atas latar gelap, susah dibaca. - Id latihan dihapus. Penilainya mencari
#hero,#headline, dan#cta. Tambahkan class, jangan ganti id-nya.
TL;DR: Bangun berurutan: HTML polos, hero, kerangka dan fitur, responsive, lalu mode gelap dan interaksi. Hero latihan: text-center py-16 px-4 di section, text-4xl font-bold di judul (weight 700), mt-4 text-gray-500 di tagline, mt-6 bg-blue-500 text-white px-6 py-3 rounded-lg di tombol (padding-left 24px, sudut 8px). Container di tengah: max-w-7xl mx-auto. Halaman minimal setinggi layar: min-h-screen. Layout aplikasi dengan isi yang di-scroll: h-screen flex flex-col plus flex-1 overflow-y-auto. Mobile-first: class tanpa awalan untuk HP, md: mulai 768px, jadi grid-cols-1 md:grid-cols-3 = satu kolom di HP, tiga di laptop.
