Cara Membuat Website dengan HTML dan CSS (Landing Page Responsive untuk Pemula)
Oleh
Ratna Patria
Website pertama kebanyakan orang dibuat pakai WordPress atau website builder. Drag sana, klik sini, jadi. Tapi begitu mau ubah sesuatu di luar template, pindah posisi elemen, ganti font di satu section tertentu, bikin layout yang sedikit beda, langsung mentok. Harus upgrade plan, pasang plugin tambahan, atau pasang tema baru yang juga tidak sepenuhnya bisa dikontrol.
Cara membuat website dengan HTML dan CSS menyelesaikan masalah itu. Bukan karena lebih mudah, tapi karena tidak ada lapisan di antara kamu dan kode yang berjalan.
Di tutorial ini kamu akan bangun satu landing page dari nol: navbar, hero section, cards fitur, CTA, dan footer. Responsive, tampil rapi di HP, tablet, dan desktop. Dua file saja: index.html dan style.css.
Apa yang Akan Kamu Buat?
Sebelum mulai menulis kode, ada baiknya tahu dulu mau bikin apa.
Output akhir dari tutorial cara membuat website dengan HTML dan CSS ini satu halaman landing page dengan lima blok utama: navbar di bagian atas, hero section dengan dua kolom (teks di kiri, ilustrasi di kanan), deretan cards fitur, satu CTA section, dan footer. Semua blok itu nantinya menyusun ulang dirinya sendiri di layar kecil, navbar jadi satu kolom, hero stack ke bawah, cards yang tadinya tiga berjejer jadi satu per baris.
Tidak ada JavaScript. Tidak ada library eksternal. Interaksi sederhana seperti hover pada tombol dan transisi warna ditangani CSS saja.
Skill yang dipraktikkan sepanjang tutorial ini: struktur HTML semantik, layout dua kolom dengan Flexbox, susunan cards dengan CSS Grid, dan media query untuk tampilan responsive.
Tools yang Dibutuhkan
VS Code untuk nulis kode, Chrome atau Firefox untuk melihat hasilnya. Sudah cukup.
Satu ekstensi yang worth dipasang: Live Server. Setiap file disimpan, browser langsung refresh sendiri. Tanpa Live Server pun tidak masalah, refresh manual juga jalan, cuma sedikit lebih lambat ritmenya.
Mengenal HTML dan CSS
HTML dan CSS dua hal yang berbeda, tapi selalu dipakai bersamaan.
HTML mengatur struktur, mana yang jadi judul, mana paragraf, mana gambar, mana tombol. CSS mengatur tampilannya: warna, ukuran font, jarak antar elemen, dan bagaimana semuanya tersusun di layar. Tanpa CSS, halaman HTML tampil polos seperti dokumen teks biasa. Tanpa HTML, CSS tidak punya apa-apa untuk distyling.
Sebelum masuk ke cara membuat website dengan HTML dan CSS secara praktikal, dua konsep ini perlu dipahami dulu, bukan teorinya yang panjang, cukup yang benar-benar dipakai nanti.
HTML Singkat: Elemen, Tag, dan Atribut
Setiap konten di halaman web dibungkus tag. Tag pembuka <p> memulai paragraf, tag penutup </p> mengakhirinya. Semua konten di antaranya adalah isi paragraf itu.
Beberapa tag yang paling sering dipakai:
<h1>sampai<h6>— heading, dari paling besar ke paling kecil<p>— paragraf teks<a href="...">— link ke halaman lain<img src="...">— gambar<section>,<header>,<footer>— penanda blok konten, biasa disebut tag semantik
HTML bukan bahasa pemrograman, tidak ada logika, tidak ada kondisi, tidak ada kalkulasi. Dia hanya mendeskripsikan konten. Agar perbedaannya lebih jelas, artikel programming adalah membahas konsep pemrograman dan bagaimana ia berbeda dari markup.
Untuk memahami struktur elemen seperti heading, paragraf, link, dan gambar lebih dalam, lanjutkan dengan panduan belajar HTML.
CSS Singkat: Selector, Class, dan Cara Menyambungkan CSS
CSS bekerja dengan memilih elemen HTML lalu memberi aturan tampilan ke elemen itu. Cara memilihnya disebut selector.
Tiga selector paling dasar:
- Tag selector —
p { color: red; }berlaku ke semua tag<p> - Class selector —
.tombol { background: blue; }berlaku ke elemen yang punyaclass="tombol" - ID selector —
#header { height: 80px; }berlaku ke satu elemen spesifik
Untuk artikel ini akan pakai class selector hampir sepenuhnya. ID lebih cocok untuk anchor atau JavaScript dan di sini tidak butuh keduanya.
Cara menyambungkan file CSS ke HTML cukup satu baris di bagian <head>:
|
1 |
<link rel="stylesheet" href="style.css"> |
Penjelasan lebih lengkap mengenai fungsi dan konsep dasarnya tersedia di artikel CSS adalah.
Siapkan Struktur Folder Project
Struktur folder yang berantakan di awal biasanya berujung pada file CSS yang tidak terbaca, gambar yang tidak muncul, dan debugging yang membuang waktu. Buat foldernya dulu sebelum menulis kode.
Struktur yang dipakai di tutorial cara membuat website dengan HTML dan CSS ini:
|
1 2 3 4 5 |
project-landing/ ├── index.html ├── style.css └── images/ └── hero.png |
index.html adalah file utama, nama ini konvensi, bukan preferensi. Browser dan server web secara default mencari file bernama ini saat membuka sebuah domain. style.css menyimpan semua aturan tampilan, dan folder images/ untuk aset gambar supaya tidak campur aduk dengan file kode.
Satu hal yang sering diabaikan: penamaan class. Pakai kebab-case, huruf kecil semua, kata dipisah tanda hubung. Jadi .hero-section, bukan .HeroSection atau .heroSection. Konvensi ini yang paling umum di CSS dan paling mudah dibaca.
Buat Boilerplate HTML + Meta Viewport (Wajib untuk Responsive)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Landing Page</title> </head> <body> </body> </html> |
Satu baris yang paling sering dilupakan: meta name="viewport". Tanpa ini, browser mobile merender halaman seolah layarnya selebar desktop lalu zoom out, teks kecil, layout rusak, dan semua media query tidak bekerja. lang="id" di tag <html> juga bukan hiasan, ini memberitahu browser dan screen reader bahwa konten halaman berbahasa Indonesia.
Struktur Layout Website (Section yang Umum Dipakai)
Landing page bukan satu blok konten panjang. Dia terdiri dari beberapa blok yang masing-masing punya fungsi berbeda dan cara membuat website dengan HTML dan CSS yang rapi dimulai dari memahami pembagian blok ini sebelum menulis satu tag pun.
Lima blok yang dipakai di tutorial ini:
- Header/Navbar — navigasi utama, selalu terlihat di atas
- Hero — bagian pertama yang dilihat pengunjung, berisi pesan utama
- Features — deretan cards yang menjelaskan isi atau keunggulan
- CTA Section — ajakan singkat dengan satu tombol
- Footer — penutup, biasanya copyright dan link tambahan
Urutan ini bukan aturan baku, tapi pola yang sudah sangat umum di landing page produk, portofolio, maupun landing page jasa.
Konsep Container dan Spacing
Satu pola yang akan terus muncul sepanjang tutorial ini: .container.
Tanpa container, konten akan melebar sampai ujung layar, di monitor besar hasilnya tidak nyaman dibaca karena baris teks terlalu panjang. Container membatasi lebar maksimal konten dan memposisikannya di tengah halaman.
|
1 2 3 4 5 |
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } |
max-width: 1100px berarti konten tidak akan lebih lebar dari 1100px meski layarnya lebih besar. margin: 0 auto yang memusatkan container di tengah. padding: 0 24px memberi jarak di kiri dan kanan, penting di mobile supaya konten tidak menempel ke tepi layar.
Untuk spacing vertikal antar section, pakai padding di masing-masing section, bukan margin. Nilai yang konsisten membantu, pilih satu angka dan pakai di semua section:
|
1 2 3 |
.section { padding: 64px 0; } |
Angka 64px bukan magic number. Bisa 56px, bisa 80px. Yang penting konsisten, bukan campur-campur tiap section.
Mulai Coding — HTML untuk Landing Page
Pada tahap ini, fokus utama cukup pada HTML dan CSS. Contoh pendekatan halaman statis tanpa kode interaktif dibahas di artikel buat website tanpa JavaScript.
Satu kebiasaan buruk yang sering muncul di kode pemula: pakai <div> untuk segalanya. Div untuk navbar, div untuk footer, div untuk artikel. Secara teknis jalan, tapi browser, search engine, dan screen reader tidak bisa membedakan mana navigasi, mana konten utama, mana penutup. Tag semantik seperti <header>, <nav>, <section>, dan <footer> ada justru untuk itu.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<header class="header"> <div class="container"> <nav class="navbar"> <a href="#" class="logo">NamaLogo</a> <ul class="nav-menu"> <li><a href="#features">Fitur</a></li> <li><a href="#cta">Mulai</a></li> <li><a href="#footer">Kontak</a></li> </ul> </nav> </div> </header> |
<header> dan <div class="header"> tampak sama di browser, tapi maknanya beda. <nav> di dalamnya memberitahu screen reader bahwa ini blok navigasi, bukan konten biasa. <ul> dan <li> untuk daftar menu karena memang itulah yang dibuat: daftar. Stylingnya menyusul di section CSS nanti.
Hero Section (Judul, Deskripsi, Tombol, Gambar)
Pengunjung memutuskan scroll atau tutup tab dalam 3–5 detik pertama. Hero section yang lemah, judul vague, deskripsi panjang, tombol tidak jelas, biasanya jadi alasannya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<section class="hero section" id="hero"> <div class="container"> <div class="hero-inner"> <div class="hero-text"> <h1 class="hero-title">Judul Utama yang Langsung ke Poin</h1> <p class="hero-desc">Deskripsi singkat — dua sampai tiga kalimat cukup. Jelaskan apa yang ditawarkan, bukan sejarah panjang produknya.</p> <a href="#cta" class="btn btn-primary">Mulai Sekarang</a> </div> <div class="hero-image"> <img src="images/hero.png" alt="Ilustrasi hero"> </div> </div> </div> </section> |
Beberapa hal yang perlu diperhatikan di blok ini.
<h1> hanya boleh muncul sekali per halaman. Banyak pemula pakai <h1> di navbar untuk logo, lalu pakai lagi di hero, itu salah. Logo pakai <a> atau <div>, heading utama halaman ada di hero.
alt di tag <img> bukan formalitas. Kalau gambar gagal dimuat, teks alt yang muncul. Screen reader juga membacanya. Isi dengan deskripsi yang memang menggambarkan gambarnya, bukan “gambar1” atau dikosongkan.
Dua div di dalam .hero-inner, .hero-text dan .hero-image, ini yang nanti jadi dua kolom dengan Flexbox. Di mobile, keduanya akan stack ke bawah lewat media query.
Features Section (Card)
Tiga cards berjejer di desktop, susun ke bawah di mobile. Strukturnya sederhana, yang penting konsisten antar card.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<section class="features section" id="features"> <div class="container"> <h2 class="section-title">Apa yang Kamu Dapat</h2> <div class="features-grid"> <div class="card"> <div class="card-icon">🛠️</div> <h3 class="card-title">Judul Fitur Satu</h3> <p class="card-desc">Deskripsi singkat fitur ini. Dua kalimat cukup, jangan sampai cardnya lebih panjang dari hero.</p> </div> <div class="card"> <div class="card-icon">📐</div> <h3 class="card-title">Judul Fitur Dua</h3> <p class="card-desc">Deskripsi singkat fitur ini. Dua kalimat cukup, jangan sampai cardnya lebih panjang dari hero.</p> </div> <div class="card"> <div class="card-icon">📱</div> <h3 class="card-title">Judul Fitur Tiga</h3> <p class="card-desc">Deskripsi singkat fitur ini. Dua kalimat cukup, jangan sampai cardnya lebih panjang dari hero.</p> </div> </div> </div> </section> |
.features-grid adalah container yang nanti diatur dengan CSS Grid. Tiga div.card di dalamnya adalah item gridnya, masing-masing berdiri sendiri, tidak saling bergantung strukturnya.
Satu yang sering jadi masalah: tinggi card yang tidak rata kalau isi teksnya berbeda panjang. Ini diselesaikan di CSS nanti, bukan di HTML, jadi untuk sekarang biarkan dulu.
CTA section strukturnya paling sederhana dari semua blok, satu judul, satu kalimat pendukung, satu tombol. Jangan lebih dari itu.
|
1 2 3 4 5 6 7 |
<section class="cta section" id="cta"> <div class="container"> <h2 class="cta-title">Siap Buat Website Pertamamu?</h2> <p class="cta-desc">Mulai dari file kosong, selesai dengan halaman yang bisa dibuka di browser.</p> <a href="https://www.domainesia.com/hosting/?utm_source=blog-frost&utm_medium=button" class="btn btn-primary">Pilih Hosting untuk Website HTML CSS</a> </div> </section> |
Footer tidak butuh banyak. Copyright, selesai.
|
1 2 3 4 5 |
<footer class="footer" id="footer"> <div class="container"> <p class="footer-text">© 2026 NamaSitusmu. All rights reserved.</p> </div> </footer> |
Dua hal yang sering salah di footer: pakai <div> padahal ada <footer>, dan lupa © untuk simbol ©. Kecil, tapi detail seperti ini yang membedakan kode yang ditulis dengan sadar dari kode yang asal jalan.
Mulai Styling — CSS Dasar (Fondasi yang Benar)
Kode HTML yang sudah ditulis tadi kalau dibuka di browser sekarang tampilannya polos, teks hitam, background putih, tidak ada jarak, tidak ada warna. Normal. HTML memang tidak mengatur tampilan.
Bagian cara membuat website dengan HTML dan CSS ini yang paling banyak mempengaruhi hasil akhir secara visual. Tapi sebelum styling spesifik per section, ada dua hal yang perlu ditulis lebih dulu: CSS reset dan base typography. Tanpa keduanya, hasil di Chrome bisa beda dengan Firefox, dan spacingnya tidak konsisten.
CSS Reset Ringan + Typography
Browser punya default style masing-masing. <h1> di Chrome ukurannya beda sedikit dengan di Firefox. <ul> punya padding default yang tidak selalu kamu inginkan. Reset ringan di bawah ini menghapus ketidakkonsistenan itu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: #1a1a1a; background-color: #ffffff; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } |
box-sizing: border-box adalah yang paling berpengaruh di sini. Defaultnya (content-box) membuat padding dan border dihitung di luar lebar elemen, jadi kalau kamu set .card { width: 300px; padding: 24px; }, lebar aktual nya jadi 348px, bukan 300px. Dengan border-box, padding masuk ke dalam hitungan lebar. Lebih predictable, lebih jarang bikin layout rusak.
img { max-width: 100%; height: auto; } memastikan gambar tidak pernah lebih lebar dari containernya. Satu aturan ini mencegah scroll horizontal yang tidak disengaja di mobile.
Container, Section, dan Utility Sederhana
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .section { padding: 64px 0; } .btn { display: inline-block; padding: 12px 28px; border-radius: 6px; font-size: 16px; cursor: pointer; transition: opacity 0.2s ease; } .btn-primary { background-color: #2563eb; color: #ffffff; } .btn-primary:hover { opacity: 0.85; } |
.btn dan .btn-primary dipisah bukan tanpa alasan. .btn menyimpan styling yang berlaku ke semua tombol, ukuran, padding, cursor. .btn-primary hanya menyimpan warna. Kalau nanti perlu tombol secondary atau outline, tinggal tambah .btn-secondary tanpa mengulang padding dan border-radius dari nol.
Pola seperti ini, utility class yang bisa dikombinasikan, yang membuat CSS tidak cepat berantakan saat halaman berkembang.
CSS punya beberapa cara untuk mengatur layout. Flexbox adalah yang paling cocok untuk satu dimensi, baris atau kolom, tapi tidak keduanya sekaligus. Navbar (elemen berjajar horizontal) dan hero (dua kolom berdampingan) keduanya masuk kategori ini.
Di bagian cara membuat website dengan HTML dan CSS ini, Flexbox dipakai di dua tempat: navbar dan hero section. Grid menyusul di section berikutnya untuk cards.
Navbar butuh dua hal: logo di kiri, menu di kanan. Flexbox menyelesaikan itu dengan tiga properti.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .nav-menu { display: flex; gap: 32px; list-style: none; } .nav-menu a { font-size: 15px; color: #1a1a1a; font-weight: 500; } .nav-menu a:hover { color: #2563eb; } |
justify-content: space-between mendorong logo sejauh mungkin ke kiri dan menu sejauh mungkin ke kanan. align-items: center memastikan keduanya rata secara vertikal, tanpa ini, logo dan menu bisa tidak sejajar kalau tingginya berbeda.
gap: 32px di .nav-menu memberi jarak antar item menu tanpa perlu margin manual ke tiap <li>. Lebih bersih, lebih mudah diubah kalau nanti jarak menunya mau disesuaikan.
Layout Hero 2 Kolom dengan Flexbox
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.hero { background-color: #f8fafc; } .hero-inner { display: flex; align-items: center; gap: 48px; } .hero-text { flex: 1; } .hero-image { flex: 1; } .hero-title { font-size: 42px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: #1a1a1a; } .hero-desc { font-size: 18px; color: #4b5563; margin-bottom: 32px; } |
flex: 1 di kedua div berarti keduanya berbagi ruang yang tersedia secara merata, masing-masing dapat 50%. Kalau mau teks dapat ruang lebih besar dari gambar, ganti ke flex: 1.5 di .hero-text dan biarkan .hero-image tetap flex: 1.
gap: 48px mengatur jarak antara kolom teks dan gambar. Angka ini bisa disesuaikan, tapi hindari di bawah 24px karena di layar medium kedua kolom akan terasa terlalu rapat.
Bahas Layout: CSS Grid untuk Card/Features
Flexbox bagus untuk satu dimensi. Tapi untuk cards yang harus berjajar rapi dalam baris dan kolom sekaligus, tingginya rata, jaraknya konsisten, otomatis wrap ke baris baru kalau tidak cukup ruang, Grid lebih tepat.
Ini bukan soal mana yang lebih baik. Flexbox dan Grid menyelesaikan masalah yang berbeda. Di bagian cara membuat website dengan HTML dan CSS ini, Grid dipakai khusus untuk features section karena itulah kasusnya: layout dua dimensi.
Grid untuk Features
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.features { background-color: #ffffff; } .section-title { font-size: 32px; font-weight: 700; text-align: center; margin-bottom: 48px; color: #1a1a1a; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .card { background-color: #f8fafc; border-radius: 10px; padding: 32px 24px; display: flex; flex-direction: column; gap: 12px; } .card-icon { font-size: 32px; } .card-title { font-size: 18px; font-weight: 600; color: #1a1a1a; } .card-desc { font-size: 15px; color: #4b5563; line-height: 1.6; } |
grid-template-columns: repeat(3, 1fr) membuat tiga kolom dengan lebar yang sama. 1fr artinya satu bagian dari ruang yang tersedia, kalau total ruangnya 1000px dan ada tiga kolom, masing-masing dapat sekitar 333px setelah gap diperhitungkan.
.card sendiri pakai Flexbox dengan flex-direction: column, ini yang menyelesaikan masalah tinggi card tidak rata yang disebutkan di section HTML tadi. Karena card adalah flex container, kontennya tersusun vertikal dan tingginya mengikuti item terpanjang di baris yang sama lewat Grid.
Pola Grid Auto-Responsive
Ada satu shortcut yang worth diketahui sebelum masuk ke media query:
|
1 2 3 4 5 |
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } |
auto-fit dengan minmax(220px, 1fr) membuat kolom otomatis menyesuaikan jumlahnya berdasarkan ruang yang tersedia. Di layar lebar dapat tiga kolom, di tablet dapat dua, di mobile dapat satu, tanpa satu baris media query pun.
Kenapa tidak selalu pakai ini? Karena kontrolnya kurang presisi. Kalau ada empat card, di layar tertentu bisa muncul 2+2 atau 3+1, susunan yang tidak selalu kamu inginkan. Untuk kasus tiga card yang jumlahnya tetap, repeat(3, 1fr) dengan media query eksplisit lebih predictable.
Membuat Website Responsive (Mobile-First + Media Query)
Sebagian besar tutorial HTML CSS mengajarkan desktop dulu, mobile belakangan. Pendekatan itu tidak salah secara teknis, tapi hasilnya sering berantakan karena kamu menulis ulang layout yang sudah ada, bukan memperluas yang sudah bekerja.
Mobile-first membalikkan urutannya: tulis CSS default untuk layar kecil, lalu tambahkan media query untuk layar yang lebih besar. Di cara membuat website dengan HTML dan CSS ini, pakai dua breakpoint, 768px untuk tablet dan 1024px untuk desktop. Cukup untuk pemula, tidak perlu lebih dari itu dulu.
Media Query untuk Mengubah Hero Jadi 1 Kolom di Mobile
Default hero di mobile: satu kolom, teks di atas, gambar di bawah. Di tablet ke atas, baru jadi dua kolom.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* Default: mobile — hero 1 kolom */ .hero-inner { display: flex; flex-direction: column; gap: 32px; } .hero-title { font-size: 28px; } /* Tablet ke atas */ @media (min-width: 768px) { .hero-inner { flex-direction: row; align-items: center; gap: 48px; } .hero-title { font-size: 36px; } } /* Desktop */ @media (min-width: 1024px) { .hero-title { font-size: 42px; } } |
flex-direction: column di default membuat teks dan gambar susun ke bawah. Begitu layar mencapai 768px, flex-direction: row mengubahnya jadi dua kolom berdampingan. Tidak perlu menulis ulang properti lain, hanya yang berubah yang perlu ditulis di dalam media query.
Media Query untuk Grid Features (1 → 2 → 3 Kolom)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Default: mobile — 1 kolom */ .features-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } /* Tablet — 2 kolom */ @media (min-width: 768px) { .features-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } } /* Desktop — 3 kolom */ @media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } } |
Satu kolom di mobile, dua di tablet, tiga di desktop. Gapnya juga naik bertahap, bukan karena ada aturan baku, tapi karena layar lebih besar punya ruang lebih untuk napas antar elemen.
Responsive Typography & Spacing
Font size yang fixed di semua ukuran layar terasa terlalu besar di HP atau terlalu kecil di monitor besar. Dua pendekatan:
Cara mudah, atur per breakpoint:
|
1 2 3 4 5 6 7 8 9 |
h1 { font-size: 28px; } @media (min-width: 768px) { h1 { font-size: 36px; } } @media (min-width: 1024px) { h1 { font-size: 42px; } } |
Cara modern, pakai clamp():
|
1 2 3 |
h1 { font-size: clamp(28px, 5vw, 42px); } |
clamp(28px, 5vw, 42px) artinya: minimal 28px, maksimal 42px, dan di antaranya mengikuti 5% dari lebar viewport. Font otomatis naik turun sesuai ukuran layar tanpa satu media query pun.
Untuk pemula, cara per breakpoint lebih mudah dipahami dulu. clamp() bisa dipelajari setelah konsep dasar media query sudah nyaman.
Membuat Gambar dan Elemen Media Ikut Responsive
Layout sudah responsive. Tapi ada satu kasus yang sering lolos dari perhatian saat cara membuat website dengan HTML dan CSS: gambar dengan lebar fixed yang melebihi container. Di desktop tidak kelihatan masalahnya, tapi buka di HP, ada scroll horizontal yang tidak diinginkan. Halaman terasa rusak padahal kodenya “sudah benar.”
Satu aturan yang wajib ada di setiap project:
|
1 2 3 4 5 |
img { max-width: 100%; height: auto; display: block; } |
Aturan ini sudah ditulis di bagian CSS reset sebelumnya, tapi penting untuk dipahami kenapa, bukan sekadar di copy. max-width: 100% memastikan gambar tidak pernah lebih lebar dari containernya. height: auto menjaga rasio gambar tetap proporsional saat lebarnya berubah. display: block menghilangkan celah kecil di bawah gambar yang muncul karena default inline behavior, celah yang sering bikin bingung pemula karena tidak kelihatan di inspector tapi terasa di layout.
Troubleshooting: Kenapa Ada Scroll Horizontal di HP?
Scroll horizontal di mobile hampir selalu disebabkan satu dari empat hal ini:
- Elemen dengan
widthfixed yang lebih besar dari lebar layar paddingataumarginyang mendorong elemen keluar container- Gambar tanpa
max-width: 100% - Elemen yang pakai
leftatautransformtanpa memperhitungkan lebar layar
Cara cek paling cepat: buka DevTools di Chrome, klik ikon mobile di pojok kiri atas, set lebar ke 360px. Kalau ada elemen yang keluar dari batas layar, border merah akan kelihatan di luar area putih.
Cara cek lewat CSS juga bisa, tambahkan sementara:
|
1 2 3 |
* { outline: 1px solid red; } |
Semua elemen langsung kelihatan batasnya. Elemen yang mencuat keluar container langsung ketahuan. Hapus setelah selesai debugging, jangan sampai ikut ke production.
Di mobile, navbar dengan lima item menu yang berjejer horizontal tidak akan muat. Solusi umumnya hamburger menu, ikon tiga garis yang kalau diklik membuka daftar menu. Biasanya butuh JavaScript untuk togglenya.
Tapi ada satu trik CSS murni yang bisa menyelesaikan ini tanpa satu baris JavaScript pun: checkbox hack. Cara membuat website dengan HTML dan CSS yang benar-benar static, tanpa dependensi apapun.
Implementasi Checkbox Hack (Ringkas)
Idenya sederhana: checkbox HTML punya dua state, checked dan unchecked. CSS bisa membaca state itu lewat pseudo-class :checked dan menyembunyikan atau menampilkan elemen berdasarkan state tersebut.
|
1 2 3 4 5 6 7 |
<!-- Tambahkan di dalam <header>, sebelum <nav> --> <input type="checkbox" id="nav-toggle" class="nav-toggle"> <label for="nav-toggle" class="nav-hamburger"> <span></span> <span></span> <span></span> </label> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* Sembunyikan checkbox aslinya */ .nav-toggle { display: none; } /* Hamburger icon — tiga garis */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; } .nav-hamburger span { display: block; width: 24px; height: 2px; background-color: #1a1a1a; } /* Di mobile, tampilkan hamburger dan sembunyikan menu */ @media (max-width: 767px) { .nav-hamburger { display: flex; } .nav-menu { display: none; flex-direction: column; gap: 16px; padding: 24px 0; } /* Kalau checkbox dicheck, tampilkan menu */ .nav-toggle:checked ~ nav .nav-menu { display: flex; } } |
~ adalah general sibling combinator, memilih elemen yang ada di level yang sama dan muncul setelahnya. Jadi .nav-toggle:checked ~ nav .nav-menu artinya: kalau checkbox dalam kondisi checked, cari nav yang selevel dengannya, lalu tampilkan .nav-menu di dalamnya.
Satu catatan jujur: checkbox hack punya keterbatasan. Tidak ada animasi transisi yang mulus tanpa workaround tambahan, dan aksesibilitasnya tidak sebaik hamburger menu berbasis JavaScript yang proper. Untuk portfolio pribadi atau landing page sederhana, ini cukup. Untuk produk yang dipakai banyak orang, pertimbangkan JavaScript.
File Final (Template) + Cara Menjalankan
Semua kode yang ditulis sepanjang tutorial cara membuat website dengan HTML dan CSS ini sekarang bisa digabung jadi dua file. Daripada scroll panjang di artikel, langsung unduh saja templatenya:
Struktur File yang Didownload
|
1 2 3 4 5 |
project-landing/ ├── index.html ← struktur halaman ├── style.css ← semua styling dan media query └── images/ └── hero.png ← ganti dengan gambar milikmu |
Cara Menjalankan
Dua cara, pilih yang paling mudah.
Cara pertama: buka file index.html langsung di browser, klik kanan filenya, pilih Open with, lalu pilih Chrome atau Firefox. Halaman langsung muncul, tidak butuh server.
Cara kedua: kalau sudah pasang ekstensi Live Server di VS Code, klik kanan index.html di sidebar lalu pilih Open with Live Server. Setiap perubahan yang disimpan langsung kelihatan di browser tanpa refresh manual.
Checklist Sebelum Publish / Hosting
Landing page sudah jadi. Sebelum dihosting, ada beberapa hal yang worth di cek dulu, bukan karena wajib, tapi karena masalah kecil yang tidak ketahuan sebelum publish biasanya baru ketahuan setelah ada orang lain yang buka.
Cara membuat website dengan HTML dan CSS yang rapi tidak berhenti di kode yang jalan di laptop sendiri. Cek ini di tiga ukuran layar: 360px (HP entry-level), 768px (tablet), dan 1024px (desktop kecil).
Layout dan tampilan:
- Tidak ada scroll horizontal di mobile
- Teks tidak terpotong atau menumpuk di layar kecil
- Gambar tampil dan tidak pecah
- Tombol CTA kelihatan dan bisa diklik di semua ukuran
Fungsionalitas:
- Semua link di navbar mengarah ke section yang benar
- Hamburger menu membuka dan menutup dengan benar di mobile
- Tidak ada gambar yang broken (cek tag
altnya juga)
Kode:
- Tidak ada class yang dipanggil tapi tidak didefinisikan di CSS
- Tidak ada
outline: 1px solid reddebug yang tertinggal - File
style.csssudah ter link dengan benar di<head>
Langkah Hosting Singkat
Website statis seperti ini, murni HTML dan CSS tanpa backend, bisa langsung dihosting tanpa konfigurasi server yang rumit. Dua opsi gratis yang umum dipakai: GitHub Pages untuk yang sudah familiar dengan Git, dan hosting shared untuk yang mau domain sendiri dengan setup lebih mudah.
Untuk langkah hosting lengkapnya, termasuk cara upload file dan setting domain, baca panduannya di sini. Saat website sudah online, akses halaman terjadi melalui protokol web, pembahasan tentang HTTP adalah bisa membantu memahami alur permintaan dan respons di browser.
Satu hal yang perlu disiapkan sebelum website bisa diakses orang lain: hosting. File HTML dan CSS kamu butuh tempat “tinggal” di server supaya bisa dibuka lewat browser siapapun, kapanpun, dari manapun. Tanpa hosting, website hanya bisa dibuka di laptop kamu sendiri.
Pilih Hosting untuk Website HTML CSS
Dua File. Satu Halaman. Tidak Ada Alasan untuk Tidak Mulai.
Semua yang dibahas di tutorial ini, struktur HTML, Flexbox, Grid, media query, tidak akan masuk sepenuhnya sampai kamu nulis sendiri, rusak sendiri, dan debug sendiri. Membaca tutorial sampai habis itu bagus. Tapi tab baru yang berisi index.html kosong adalah tempat belajar yang sebenarnya.
Ganti warna, ubah font, tambah section baru. Setiap perubahan kecil mengajarkan sesuatu yang tidak bisa didapat dari sekadar membaca.
Setelah dasar CSS dikuasai, framework seperti Bootstrap atau Tailwind bisa mempercepat proses styling, pembahasannya ada di artikel framework CSS. Untuk interaksi seperti menu mobile yang lebih proper atau validasi form, mulai dari artikel JavaScript adalah.
Website sudah jadi di lokal. Satu langkah lagi supaya bisa dibuka siapa saja.
Ratna Patria
Hi! Ratna is my name. I have been actively writing about light and fun things since college. I am an introverted, inquiring person, who loves reading. How about you?
