Landing page adalah halaman web utama yang dirancang untuk mengarahkan perhatian pengunjung pada satu tujuan tertentu—biasanya untuk mendorong aksi seperti mendaftar, membeli, mengunduh, atau menghubungi. Banyak developer mengira bahwa membuat landing page yang modern, responsive, dan elegan membutuhkan framework seperti Bootstrap, Tailwind CSS, atau library UI lainnya.
Padahal, kenyataannya kita bisa membuat landing page responsive hanya dengan CSS murni tanpa framework. Dengan teknik yang tepat, hasilnya bisa sangat cepat, ringan, dan tetap modern seperti website profesional.
Artikel ini menjadi tutorial membuat landing page responsive, mulai dari:
- Menyusun struktur HTML
- Mendesain layout hero, fitur, sampai footer
- Membuat responsive layout CSS
- Membuat desain modern tanpa framework
- Mengoptimalkan tampilan mobile & tablet
- Tips membuat landing page yang konversi tinggi
Akan ada banyak contoh kode menggunakan indentasi 4 spasi sesuai permintaan.
Ayo mulai dari konsep dasar dulu.
Daftar isi
Baca juga: Belajar CSS untuk UI/UX Designer: Prinsip Visual dan Konsistensi
Mengapa Membuat Landing Page Hanya dengan CSS?
Banyak developer pemula sering mengandalkan framework karena alasan:
- Menghemat waktu
- Tidak perlu menulis CSS banyak
- Sudah siap responsive
Namun, framework CSS mengorbankan beberapa hal:
- Meski cepat, ukuran file besar
- Banyak class tidak terpakai
- Tidak cocok untuk project kecil atau landing page statis
- Kebanyakan fitur tidak digunakan
Menggunakan CSS murni memiliki berbagai kelebihan:
Lebih ringan
File CSS hanya berisi apa yang kita tulis sendiri.Lebih cepat diproses browser
Karena tidak ada utility class berlebihan.Desain bisa dibuat sangat spesifik
Framework membatasi fleksibilitas; CSS murni bebas sesuai kreasi.SEO lebih optimal
CSS yang kecil mempercepat loading, meningkatkan skor PageSpeed.Cocok untuk landing page
Landing page biasanya simple — CSS murni lebih efisien.
Struktur Landing Page yang Akan Kita Buat
Landing page ini menggunakan gaya:
Clean Minimalist Tech
- Background putih
- Warna biru
#2563ebsebagai aksen - Typography besar seperti website startup tech
- Tombol modern dengan shadow lembut
Struktur utama:
- Header – logo + navigasi
- Hero Section – headline & CTA
- Feature Section – 3 fitur
- About/Benefit Section
- CTA Section
- Footer
Semua ditulis dengan CSS dasar + responsive layout.
Struktur HTML Dasar
Gunakan struktur minimalis berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Landing Page Responsive CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">BrandTech</div>
<nav class="nav">
<a href="#fitur">Fitur</a>
<a href="#about">Tentang</a>
<a href="#contact">Kontak</a>
</nav>
</div>
</header>
<section class="hero">
<div class="container hero-content">
<h1>Bangun Landing Page Modern dengan CSS Murni</h1>
<p>Pelajari cara membuat landing page responsive tanpa framework. Cepat, ringan, dan mudah dipelajari!</p>
<a href="#mulai" class="btn-primary">Mulai Sekarang</a>
</div>
</section>
<section class="features" id="fitur">
<div class="container">
<h2>Fitur Utama</h2>
<div class="feature-grid">
<div class="feature-item">
<h3>Responsive Design</h3>
<p>Tampilan otomatis menyesuaikan layar mobile, tablet, dan desktop.</p>
</div>
<div class="feature-item">
<h3>Clean & Modern</h3>
<p>Desain minimalist ala startup tech terkini.</p>
</div>
<div class="feature-item">
<h3>Tanpa Framework</h3>
<p>Hanya menggunakan CSS murni untuk hasil lebih ringan.</p>
</div>
</div>
</div>
</section>
<section class="cta" id="mulai">
<div class="container">
<h2>Buat Landing Page Kamu Sekarang</h2>
<a href="#" class="btn-primary">Mulai Gratis</a>
</div>
</section>
<footer class="footer">
<p>© 2025 BrandTech. All rights reserved.</p>
</footer>
</body>
</html>Code language: HTML, XML (xml)CSS Lengkap (Responsive + Modern)
Berikut file style.css yang clean, ringan, modern:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
color: #1f2937;
background: #ffffff;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
/* Header */
.header {
padding: 20px 0;
border-bottom: 1px solid #e5e7eb;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #2563eb;
}
.nav {
display: flex;
align-items: center;
}
.nav a {
margin-left: 20px;
text-decoration: none;
color: #374151;
font-weight: 500;
}
.nav a:hover {
color: #2563eb;
}
/* Hero Section */
.hero {
padding: 100px 0;
text-align: center;
background: #f8fafc;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 20px;
margin-bottom: 30px;
}
.btn-primary {
display: inline-block;
padding: 14px 32px;
background: #2563eb;
color: white;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover {
background: #1e40af;
}
/* Features */
.features {
padding: 80px 0;
}
.features h2 {
text-align: center;
margin-bottom: 50px;
font-size: 32px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.feature-item {
background: #f9fafb;
padding: 40px;
border-radius: 12px;
border: 1px solid #e5e7eb;
}
/* CTA */
.cta {
padding: 100px 0;
text-align: center;
background: #e0f2fe;
}
.cta h2 {
font-size: 32px;
margin-bottom: 20px;
}
/* Footer */
.footer {
padding: 30px;
text-align: center;
background: #f3f4f6;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 32px;
}
.feature-grid {
grid-template-columns: 1fr;
}
}Code language: CSS (css)Tampilan Visual Contoh Landing Page
Berikut ini adalah tampilan visual contoh landing page yang telah dibuat dengan menggunakan kode HTML dan CSS diatas.
Dan jika kamu ingin melihat versi live dari landing page ini, kamu bisa mengakses link berikut:
https://codepen.io/bahasaweb/full/wBGMLJM
Teknik Responsive yang Digunakan
1. Grid Layout
Menggunakan display: grid untuk 3 kolom fitur. Pada layar kecil, otomatis menjadi 1 kolom.
2. Fluid Container
width: 90% membuat layout fleksibel di segala ukuran device.
3 Typography Scaling
Heading hero diperkecil pada viewport mobile.
4. Mobile Navigation Simplified
Karena ini landing page sederhana, kita tidak membuat menu hamburger. Cocok untuk project kecil.
Best Practice Landing Page CSS (Lengkap)
Gunakan spacing yang konsisten
Margin dan padding minimal 20–40px.Gunakan warna aksen yang kuat
Misalnya biru untuk CTA.Gunakan heading besar pada hero
Untuk fokus user.Kombinasi background lembut
Seperti#f8fafcuntuk hero.Desain mobile-first
Mulai dari CSS untuk mobile lalu scale-up (opsional).
Kesimpulan
Membuat landing page responsive tidak harus menggunakan framework besar. Dengan CSS murni, kita bisa membuat:
- Desain modern
- Layout responsive
- File ringan
- Loading cepat
- SEO lebih baik
Tutorial ini membuktikan bahwa menguasai CSS dasar sudah cukup untuk membuat landing page profesional.
Jika kamu ingin versi dark mode, gradient, atau versi lengkap dengan animasi, cukup bilang saja — akan aku buatkan.
