Tutorial Membuat Landing Page Responsive dengan HTML & CSS (Step-by-Step Lengkap)

Februari 23, 2026 - Durasi membaca: 3 menit

Pendahuluan

Landing page adalah halaman khusus yang dibuat untuk tujuan tertentu, seperti promosi produk, jasa, atau mengumpulkan leads. Berbeda dengan homepage biasa, landing page fokus pada satu tujuan utama: membuat pengunjung melakukan aksi.

Di tutorial ini, kamu akan belajar membuat landing page modern dan responsive menggunakan HTML dan CSS tanpa framework. Semua dijelaskan step-by-step agar mudah dipahami pemula.

Apa Itu Landing Page?

Landing page adalah halaman yang dirancang khusus untuk:

Menjual produk
Mengumpulkan email
Mempromosikan aplikasi
Mengarahkan traffic iklan

Ciri landing page yang baik:

Judul kuat dan jelas
Deskripsi singkat dan menarik
Call To Action (CTA)
Desain clean dan fokus
Responsive di semua perangkat

Struktur Landing Page yang Akan Kita Buat

Header / Navbar
Hero Section
Features Section
Call To Action
Footer

Step 1 – Struktur HTML Dasar

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Landing Page Modern</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <nav class="navbar">
      <h2 class="logo">DarkIT</h2>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section class="hero">
    <h1>Belajar Coding Lebih Cepat</h1>
    <p>Platform terbaik untuk belajar web development modern</p>
    <button>Mulai Sekarang</button>
  </section>

  <section class="features">
    <div class="card">
      <h3>Materi Lengkap</h3>
      <p>Tutorial step-by-step dari dasar sampai mahir</p>
    </div>
    <div class="card">
      <h3>Praktik Nyata</h3>
      <p>Belajar dengan mini project langsung</p>
    </div>
    <div class="card">
      <h3>Update 2026</h3>
      <p>Materi mengikuti tren teknologi terbaru</p>
    </div>
  </section>

  <section class="cta">
    <h2>Siap Jadi Developer Profesional?</h2>
    <button>Gabung Sekarang</button>
  </section>

  <footer>
    <p>© 2026 DarkIT. All Rights Reserved.</p>
  </footer>

</body>
</html>

Step 2 – Styling Dasar CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #0f172a;
  color: white;
}

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 20px 50px;
  background: #111827;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.navbar a {
  text-decoration: none;
  color: white;
}

.hero {
  text-align: center;
  padding: 100px 20px;
}

.hero h1 {
  font-size: 48px;
}

.hero button {
  margin-top: 20px;
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  background: cyan;
  cursor: pointer;
}

.features {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 80px 20px;
}

.card {
  background: #1e293b;
  padding: 30px;
  border-radius: 12px;
  width: 250px;
  text-align: center;
}

.cta {
  text-align: center;
  padding: 80px 20px;
  background: #111827;
}

footer {
  text-align: center;
  padding: 20px;
  background: #0b1220;
}

Step 3 – Membuat Responsive (Mobile Friendly)

Tambahkan media query agar tampilan rapi di HP:

@media (max-width: 768px) {

  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .features {
    flex-direction: column;
    align-items: center;
  }

  .hero h1 {
    font-size: 32px;
  }

}

Sekarang landing page akan menyesuaikan ukuran layar.

Tips Desain Landing Page Profesional

Gunakan maksimal 2-3 warna utama
Gunakan font yang clean
Jangan terlalu banyak teks
Pastikan CTA jelas dan menonjol
Gunakan white space yang cukup

Optimasi Landing Page untuk Conversion

Gunakan headline yang kuat
Tambahkan social proof
Buat tombol CTA kontras
Pastikan loading cepat

Kesalahan Umum Pemula

Terlalu banyak animasi
Warna terlalu ramai
Tidak responsive
Tidak ada CTA jelas

Kesimpulan

Sekarang kamu sudah bisa membuat landing page responsive menggunakan HTML dan CSS tanpa framework. Ini adalah fondasi penting sebelum belajar framework seperti React atau Tailwind.

Latihan selanjutnya: tambahkan animasi sederhana atau buat versi dark/light mode.