Proyek Responsif: Membuat Landing Page yang Mobile-Friendly
Bayangkan warga Surabaya sedang membuka portal berita SatuMedia atau mengakses layanan Kolak Pisang melalui smartphone mereka saat sedang bersantai di warkop. Jika halaman utama (landing page) lambat, teksnya terlalu kecil, atau tombolnya sulit ditekan, mereka akan langsung menutup website tersebut.
Landing page adalah ujung tombak proyek Anda. Dalam tutorial proyek mikro ini, kita akan menggabungkan semua teori yang telah kita bahas—mulai dari Flexbox, Grid, hingga Mobile-First Design—untuk membangun halaman utama yang cepat, modern, dan 100% responsif menggunakan Tailwind CSS.
1. Anatomi Landing Page Modern
Sebuah landing page standar biasanya terdiri dari tiga bagian utama:
-
Header/Navbar: Navigasi ringkas (sering kali disembunyikan dalam menu hamburger di HP).
-
Hero Section: Area paling atas yang berisi headline besar, teks ajakan (Call to Action/CTA), dan ilustrasi utama.
-
Features/Layanan: Penjelasan fitur yang biasanya menggunakan kartu (grid).
2. Strategi Kode (Mobile-First Tailwind)
Kita akan menulis kode untuk layar HP (layar terkecil) terlebih dahulu sebagai gaya bawaan (tanpa prefix). Setelah itu, kita akan menggunakan prefix md: (Tablet / ≥768px) dan lg: (Desktop / ≥1024px) untuk mengubah tata letaknya saat layar membesar.
3. Tutorial: Menulis Kode HTML & Tailwind
Berikut adalah kerangka landing page lengkap. Anda bisa menyalin kode ini dan menyimpannya sebagai file .html. (Untuk kemudahan pengujian, contoh ini menggunakan Tailwind via CDN, namun untuk produksi pastikan menggunakan Node.js seperti tutorial sebelumnya).
<!DOCTYPE html>
<html lang="id">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SatuMedia - Portal Digital</title> <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 text-slate-800 font-sans antialiased"> <header class="bg-white shadow-sm p-4"> <div class="max-w-6xl mx-auto flex justify-between items-center"> <div class="text-2xl font-bold text-blue-600">SatuMedia.</div> <nav class="hidden md:flex gap-6 font-medium text-slate-600"> <a href="#" class="hover:text-blue-600">Berita</a> <a href="#" class="hover:text-blue-600">Opini</a> <a href="#" class="hover:text-blue-600">Kontak</a> </nav> <button class="md:hidden text-slate-600"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> </button> </div> </header> <section class="max-w-6xl mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center gap-10"> <div class="flex-1 text-center md:text-left"> <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight text-slate-900 mb-6"> Informasi Cepat, <br class="hidden md:block"> Tepat, dan Terkini. </h1> <p class="text-lg text-slate-600 mb-8 max-w-xl mx-auto md:mx-0"> Platform berita digital generasi baru yang didukung oleh kecerdasan buatan untuk menyajikan berita paling relevan bagi Anda. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start"> <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-full shadow-lg transition-transform transform hover:-translate-y-1"> Mulai Membaca </button> <button class="bg-white border-2 border-slate-200 hover:border-blue-600 text-slate-700 font-semibold py-3 px-8 rounded-full transition-colors"> Pelajari Lebih Lanjut </button> </div> </div> <div class="flex-1 w-full max-w-md mx-auto"> <img src="https://via.placeholder.com/600x400/cbd5e1/475569?text=Ilustrasi+Hero" alt="Ilustrasi" class="rounded-2xl shadow-2xl w-full object-cover"> </div> </section> <section class="bg-white py-16"> <div class="max-w-6xl mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Fitur Unggulan</h2> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="p-6 bg-slate-50 rounded-xl border border-slate-100 hover:shadow-xl transition-shadow"> <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-4 text-xl font-bold">1</div> <h3 class="text-xl font-bold mb-2">Cepat & Ringan</h3> <p class="text-slate-600">Akses secepat kilat meski di jaringan seluler lambat.</p> </div> <div class="p-6 bg-slate-50 rounded-xl border border-slate-100 hover:shadow-xl transition-shadow"> <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-4 text-xl font-bold">2</div> <h3 class="text-xl font-bold mb-2">Kurasi AI</h3> <p class="text-slate-600">Berita disesuaikan dengan preferensi bacaan Anda secara otomatis.</p> </div> <div class="p-6 bg-slate-50 rounded-xl border border-slate-100 hover:shadow-xl transition-shadow"> <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-4 text-xl font-bold">3</div> <h3 class="text-xl font-bold mb-2">Tanpa Iklan Mengganggu</h3> <p class="text-slate-600">Desain bersih yang mengutamakan kenyamanan membaca.</p> </div> </div> </div> </section> </body>
</html>
4. Analisis Kode: Mengapa Ini Mobile-Friendly?
-
Menu Responsif: Di layar HP, tautan menu navigasi disembunyikan (
hidden) dan digantikan dengan ikon Hamburger. Saat masuk ke ukuran tablet (md:flex), tautan akan muncul. -
Perubahan Sumbu Flexbox: Pada bagian Hero, kita menggunakan
flex-colagar gambar jatuh ke bawah teks di HP. Saat di desktop, kita gunakanmd:flex-rowagar gambar dan teks berjajar manis ke samping. -
Penyelarasan Teks: Di HP, teks rata tengah (
text-center). Di desktop, teks kembali rata kiri (md:text-left) yang lebih ideal untuk ruang lebar. -
Grid Multi-Tahap: Bagian fitur menggunakan Grid. Dari
grid-cols-1(HP), menjadism:grid-cols-2(Tablet besar), dan akhirnyalg:grid-cols-3(Desktop). Ini memastikan kartu tidak pernah terlihat terlalu sempit atau terlalu melar.
Eksplorasi Interaktif: Simulator Landing Page Responsif
Untuk melihat secara persis bagaimana kode di atas bekerja, gunakan simulator di bawah ini. Geser slider lebar layar ke kiri (menyimulasikan HP) dan ke kanan (menyimulasikan Desktop) untuk melihat bagaimana Flexbox dan Grid Tailwind menata ulang elemen secara otomatis tanpa memotong konten!
