Cara Membuat Website dengan HTML dan CSS Responsive

Website pertama banyak orang dibuat menggunakan WordPress atau website builder. Tinggal memilih template, mengatur elemen, lalu website bisa langsung digunakan.

Namun, ketika ingin mengubah sesuatu di luar kemampuan template, misalnya memindahkan elemen secara lebih fleksibel, membuat layout berbeda, atau mengatur desain hingga detail terkecil, kamu bisa mulai menemukan keterbatasannya.

Belajar cara membuat website dengan HTML dan CSS memberikan kontrol yang lebih besar karena kamu bekerja langsung dengan struktur dan tampilan halaman.

Dalam tutorial ini, kamu akan membuat satu landing page dari nol yang terdiri dari navbar, hero section, cards fitur, CTA, dan footer. Website juga dibuat responsive agar tetap nyaman dibuka melalui HP, tablet, maupun desktop.

Kita hanya membutuhkan dua file utama:

• index.html
• style.css

Tidak ada framework dan tidak ada JavaScript untuk fungsi utamanya.

Apa yang Akan Kamu Buat?

Sebelum menulis kode, tentukan terlebih dahulu bentuk halaman yang akan dibuat.

Output akhir tutorial ini adalah landing page satu halaman dengan lima bagian utama:

1. Navbar di bagian atas
2. Hero section dengan teks dan gambar
3. Deretan cards untuk fitur
4. CTA section
5. Footer

Ketika dibuka melalui layar kecil, struktur tersebut akan menyesuaikan secara otomatis. Hero yang sebelumnya terdiri dari dua kolom akan tersusun vertikal, sedangkan tiga card yang berjajar di desktop akan berubah menjadi satu card per baris di mobile.

Tidak ada JavaScript yang dibutuhkan. Interaksi sederhana seperti hover tombol dan transisi warna dapat ditangani langsung menggunakan CSS.

Beberapa kemampuan yang akan dipraktikkan dalam tutorial ini antara lain:

• Struktur HTML semantik
• Layout menggunakan Flexbox
• Susunan card menggunakan CSS Grid
• Media query untuk tampilan responsive

Tools yang Dibutuhkan

Untuk mengikuti tutorial ini, kamu cukup menyiapkan:

• VS Code untuk menulis kode
• Chrome atau Firefox untuk melihat hasilnya

Kamu juga bisa memasang ekstensi Live Server di VS Code. Dengan ekstensi ini, perubahan pada file dapat langsung terlihat di browser setelah disimpan.

Tanpa Live Server pun tidak masalah. File HTML tetap dapat dibuka langsung melalui browser.

Mengenal HTML dan CSS

HTML dan CSS memiliki fungsi berbeda, tetapi hampir selalu digunakan bersama ketika membuat halaman website.

HTML menentukan struktur halaman, misalnya mana yang menjadi heading, paragraf, link, gambar, navigasi, atau footer.

CSS bertugas mengatur tampilannya, mulai dari warna, ukuran font, spacing, hingga posisi setiap elemen di layar.

Tanpa CSS, halaman HTML akan terlihat seperti dokumen sederhana. Sebaliknya, CSS membutuhkan struktur HTML sebagai elemen yang akan diberi style.

Sebelum mulai membuat website, kamu cukup memahami konsep HTML dan CSS yang memang akan digunakan dalam project ini.

HTML Singkat: Elemen, Tag, dan Atribut

Konten pada halaman HTML ditulis menggunakan elemen.

Sebagai contoh:

<p>Ini adalah sebuah paragraf.</p>

Tag <p> membuka elemen paragraf, sedangkan </p> menutupnya.

Beberapa tag yang akan sering digunakan adalah:

• <h1> sampai <h6> untuk heading
• <p> untuk paragraf
• <a href=”…”> untuk link
• <img src=”…”> untuk gambar
• <section> untuk bagian halaman
• <header> untuk bagian header
• <footer> untuk footer

HTML merupakan markup language yang mendeskripsikan struktur dan konten halaman, bukan bahasa pemrograman yang menjalankan logika seperti kondisi atau perhitungan.

Jika ingin memahami perbedaannya lebih jauh, kamu bisa membaca artikel programming adalah.

Untuk mempelajari elemen, atribut, heading, paragraf, link, dan struktur HTML secara lebih lengkap, lanjutkan dengan panduan belajar HTML.

CSS Singkat: Selector, Class, dan Menghubungkan CSS

CSS bekerja dengan memilih elemen HTML, kemudian memberikan aturan tampilan pada elemen tersebut. Mekanisme pemilihannya disebut selector.

Tiga selector dasar yang perlu kamu kenal adalah:

Tag selector

Aturan tersebut berlaku untuk semua elemen <p>.

Class selector

Aturan berlaku untuk elemen dengan class=”tombol”.

ID selector

ID digunakan untuk elemen tertentu yang memiliki identifier unik.

Dalam tutorial ini, kita akan lebih banyak menggunakan class agar styling lebih fleksibel dan dapat digunakan ulang.

File CSS kemudian dihubungkan ke HTML melalui bagian <head>:

<link rel="stylesheet" href="style.css">

Jika ingin mempelajari konsep CSS lebih lanjut, baca juga artikel CSS adalah.

Siapkan Struktur Folder Project

Struktur folder yang rapi membuat file lebih mudah dikelola dan mengurangi kemungkinan salah menulis path CSS atau gambar.

Buat struktur seperti berikut:

index.html menjadi dokumen utama halaman. Nama tersebut juga umum digunakan sebagai default document oleh banyak web server, meskipun konfigurasi server dapat berbeda.

style.css menyimpan semua aturan tampilan, sedangkan folder images/ digunakan untuk menyimpan aset gambar.

Untuk penamaan class, gunakan format yang konsisten. Salah satu konvensi yang umum digunakan dalam CSS adalah kebab-case:

.hero-section

Daripada:

.HeroSection

.heroSection

Tujuannya sederhana: kode menjadi lebih konsisten dan mudah dibaca.

Buat Boilerplate HTML dan Meta Viewport

Buka index.html, kemudian tambahkan struktur dasar berikut:

Perhatikan bagian berikut:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta viewport membantu browser mobile menyesuaikan viewport dengan lebar perangkat sehingga layout responsive dapat ditampilkan sebagaimana mestinya.

Sementara itu:

<html lang="id">

memberikan informasi bahwa bahasa utama halaman adalah Bahasa Indonesia. Informasi ini juga membantu browser dan teknologi asistif seperti screen reader.

Struktur Layout Website yang Akan Digunakan

Landing page umumnya tidak terdiri dari satu blok panjang. Halaman dibagi menjadi beberapa section yang memiliki fungsi berbeda.

Dalam project ini, kita menggunakan lima bagian:

• Header/Navbar — navigasi utama
• Hero — pesan utama yang pertama dilihat pengunjung
• Features — cards yang menjelaskan fitur atau informasi utama
• CTA Section — ajakan melakukan tindakan
• Footer — bagian penutup halaman

Struktur tersebut bukan aturan wajib, tetapi cukup umum digunakan pada landing page produk, portfolio, maupun website jasa.

Konsep Container dan Spacing

Salah satu class yang akan sering digunakan adalah .container.

Tanpa container, konten dapat melebar sampai ke sisi layar sehingga kurang nyaman dibaca pada monitor besar.

Gunakan:

max-width membatasi lebar konten.

margin: 0 auto membuat container berada di tengah.

Sedangkan:

padding: 0 24px;

memberikan ruang di sisi kiri dan kanan agar konten tidak menempel ke tepi layar.

Untuk jarak vertikal antar-section, kita juga dapat membuat utility sederhana:

Nilai 64px bukan angka wajib. Kamu dapat menggunakan 56px, 72px, atau nilai lain sesuai desain. Hal yang lebih penting adalah menjaga konsistensinya.

Mulai Coding HTML untuk Landing Page

Pada tahap ini, fokus kita masih pada struktur HTML.

Jika ingin melihat pendekatan lain untuk membuat halaman statis tanpa banyak interaksi, kamu juga bisa membaca artikel buat website tanpa JavaScript.

Hindari menggunakan <div> untuk setiap bagian halaman jika tersedia elemen HTML semantik yang lebih sesuai.

Tag seperti:

<header>

<nav>

<section>

<footer>

membantu struktur dokumen menjadi lebih jelas bagi developer, browser, mesin pencari, dan teknologi asistif.

Header dan Navbar

Tambahkan:

<header> menandai area header halaman, sedangkan <nav> menunjukkan bahwa bagian tersebut berisi navigasi.

Menu menggunakan <ul> dan <li> karena secara semantik memang merupakan daftar navigasi.

Styling akan kita tambahkan melalui CSS pada tahap berikutnya.

Hero Section

Sekarang buat hero:

Gunakan <h1> sebagai heading utama halaman. Untuk landing page sederhana seperti project ini, cukup gunakan satu heading utama yang mewakili topik halaman, lalu gunakan <h2> dan <h3> untuk hierarki berikutnya.

Perhatikan juga atribut alt pada gambar:

alt="Ilustrasi hero"

Isi alt dengan deskripsi yang sesuai fungsi atau isi gambar. Hindari nilai generik seperti gambar1.

Di dalam .hero-inner terdapat dua bagian:

• .hero-text
• .hero-image

Keduanya nanti akan dibuat menjadi layout dua kolom menggunakan Flexbox.

Features Section

Selanjutnya buat tiga card:

.features-grid akan menjadi grid container, sedangkan setiap .card menjadi grid item.

CSS Grid membuat susunan card lebih mudah diatur, terutama ketika jumlah kolom perlu berubah berdasarkan ukuran layar.

CTA Section dan Footer

CTA cukup terdiri dari satu pesan utama, deskripsi pendek, dan tombol.

Mulai Styling dengan CSS Dasar

Jika index.html dibuka sekarang, tampilannya masih sangat sederhana. Itu normal karena HTML berfungsi mengatur struktur, bukan desain.

Sekarang buka style.css.

Sebelum mengatur desain setiap section, kita akan menyiapkan reset sederhana dan typography dasar.

CSS Reset dan Typography

Tambahkan:

Salah satu aturan penting di sini adalah:

box-sizing: border-box;

Dengan border-box, padding dan border dihitung sebagai bagian dari ukuran elemen.

Misalnya:

Lebar elemen tetap 300px karena padding sudah dihitung di dalam ukuran tersebut.

Aturan:

juga membantu menjaga gambar agar tidak melebihi lebar container.

Container, Section, dan Button

Tambahkan:

Class .btn menyimpan aturan dasar tombol yang dapat digunakan ulang.

Sementara .btn-primary khusus mengatur variasi visual tombol utama.

Dengan pendekatan tersebut, jika suatu saat membutuhkan tombol secondary, kamu tidak perlu menulis ulang semua padding, border-radius, dan ukuran font.

Mengatur Navbar dan Hero dengan Flexbox

Flexbox cocok digunakan ketika elemen perlu disusun dalam satu arah utama, baik horizontal maupun vertikal.

Dalam project ini, Flexbox digunakan untuk:

• Navbar
• Hero section

Navbar dengan Flexbox

Tambahkan:

justify-content: space-between membuat logo berada di sisi kiri dan menu di sisi kanan.

align-items: center menjaga keduanya tetap sejajar secara vertikal.

Sementara gap memberikan jarak antar-item menu tanpa perlu menambahkan margin secara manual pada setiap <li>.

Hero Dua Kolom dengan Flexbox

Tambahkan:

Karena .hero-text dan .hero-image sama-sama menggunakan:

flex: 1;

ruang yang tersedia akan dibagi secara proporsional di antara keduanya.

Kalau ingin bagian teks lebih lebar, kamu dapat mengubahnya menjadi:

Mengatur Features dengan CSS Grid

Flexbox cocok untuk navbar dan hero. Untuk deretan card yang perlu tersusun sebagai baris dan kolom, CSS Grid lebih praktis.

Tambahkan:

Bagian:

grid-template-columns: repeat(3, 1fr);

membuat tiga kolom dengan lebar yang sama.

Grid secara default juga membantu item dalam satu row memiliki tinggi area yang konsisten, sedangkan Flexbox di dalam .card digunakan untuk mengatur kontennya secara vertikal.

Alternatif Grid Auto-Responsive

CSS Grid juga memiliki pendekatan yang lebih otomatis:

auto-fit dan minmax() membuat browser menentukan jumlah kolom berdasarkan ruang yang tersedia.

Pendekatan ini praktis, tetapi untuk tutorial pemula kita akan menggunakan breakpoint secara eksplisit agar perubahan layout lebih mudah dipahami.

Membuat Website Responsive dengan Media Query

Sekarang struktur utama landing page sudah terbentuk. Tahap berikutnya adalah membuat layout nyaman digunakan pada ukuran layar yang berbeda.

Pendekatan yang digunakan adalah mobile-first.

Artinya, CSS dasar dibuat untuk layar kecil terlebih dahulu. Setelah itu, media query digunakan untuk memperluas layout pada tablet dan desktop.

Kalau ingin melihat penerapan konsep yang sama pada contoh project lain, kamu juga bisa membaca panduan cara membuat website responsive. Di sana kamu dapat melihat bagaimana HTML dan CSS disusun agar tampilan website tetap nyaman digunakan di berbagai ukuran perangkat.

Dalam project ini, kita menggunakan dua breakpoint utama:

• 768px untuk tablet
• 1024px untuk desktop

Dua breakpoint tersebut sudah cukup untuk memahami konsep dasarnya.

Mengubah Hero Menjadi Satu Kolom di Mobile

Buat CSS default:

Kemudian tambahkan:

Pada layar kecil:

flex-direction: column;

membuat teks dan gambar tersusun vertikal.

Ketika layar mencapai 768px, nilai tersebut berubah menjadi:

flex-direction: row;

sehingga hero kembali menjadi dua kolom.

Membuat Features 1, 2, lalu 3 Kolom

Gunakan:

Hasilnya:

• Mobile → 1 kolom
• Tablet → 2 kolom
• Desktop → 3 kolom

Dengan pola tersebut, kamu tidak perlu membuat struktur HTML berbeda untuk setiap perangkat.

Responsive Typography

Ukuran heading juga dapat disesuaikan berdasarkan breakpoint:

Artinya:

• ukuran minimum 28px
• ukuran maksimum 42px
• di antara keduanya ukuran mengikuti viewport

Untuk pemula, breakpoint eksplisit biasanya lebih mudah dipahami terlebih dahulu.

Membuat Gambar Ikut Responsive

Responsive design tidak hanya berkaitan dengan jumlah kolom. Gambar juga perlu menyesuaikan ukuran container.

Karena itu, pastikan aturan berikut tersedia:

max-width: 100% mencegah gambar menjadi lebih lebar daripada parent container.

height: auto menjaga rasio gambar.

Sedangkan display: block menghilangkan whitespace kecil yang dapat muncul karena perilaku default inline pada elemen gambar.

Troubleshooting Scroll Horizontal di Mobile

Salah satu masalah paling umum pada responsive website adalah munculnya scroll horizontal.

Beberapa penyebabnya antara lain:

• Elemen menggunakan width fixed yang terlalu besar
• Padding atau margin mendorong elemen keluar container
• Gambar tidak menggunakan max-width: 100%
• Elemen menggunakan positioning atau transform yang melewati viewport

Untuk mengeceknya, buka DevTools Chrome dan aktifkan Device Toolbar.

Coba tampilan dengan lebar sekitar 360px.

Kamu juga dapat menambahkan debugging sementara:

Dengan begitu, batas setiap elemen akan terlihat.

Jika sudah selesai debugging, hapus aturan tersebut sebelum website dipublikasikan.

Opsional: Navbar Mobile Tanpa JavaScript

Jika jumlah menu cukup banyak, navbar horizontal dapat menjadi terlalu sempit di HP.

Biasanya hamburger menu dibuat dengan bantuan JavaScript. Namun untuk project sederhana, kamu juga bisa memahami konsep toggle menggunakan checkbox dan CSS.

Membuat Checkbox Toggle

Tambahkan sebelum <nav>:

Kemudian CSS:

Selector:

.nav-toggle:checked ~ nav .nav-menu

memeriksa apakah checkbox berada dalam kondisi checked. Jika iya, .nav-menu ditampilkan.

Teknik ini cukup untuk latihan dan landing page sederhana.

Namun, untuk website production dengan kebutuhan interaksi dan aksesibilitas yang lebih kompleks, menu berbasis JavaScript biasanya memberikan kontrol yang lebih baik.

File Final dan Cara Menjalankan Website

Setelah seluruh HTML dan CSS digabungkan, project akan memiliki struktur berikut:

Kamu juga dapat menggunakan file template berikut:

• File HTML lengkap
• File CSS lengkap

Cara Menjalankan

Ada dua cara sederhana.

Cara pertama: buka langsung melalui browser.

Klik kanan index.html, pilih Open with, kemudian pilih Chrome atau Firefox.

Untuk landing page HTML dan CSS seperti project ini, kamu tidak membutuhkan backend untuk sekadar melihat hasilnya secara lokal.

Cara kedua: gunakan Live Server.

Jika sudah memasang Live Server di VS Code:

1. Klik kanan index.html
2. Pilih Open with Live Server
3. Browser akan membuka halaman project
4. Simpan perubahan dan halaman akan diperbarui

Mau Mengembangkan Website Menjadi Lebih Dinamis?

Sampai tahap ini, website yang kita buat masih berupa website statis.

Untuk landing page, portfolio, company profile sederhana, atau halaman informasi, struktur tersebut sudah cukup.

Namun, kebutuhan website dapat berkembang. Misalnya, kamu ingin memproses form di server, menggunakan template yang dapat dipakai ulang, mengambil data dari database, atau mulai mempelajari backend.

Jika sudah sampai tahap tersebut, kamu bisa melanjutkan ke panduan cara membuat website dengan PHP.

Dengan begitu, alur belajarnya menjadi lebih jelas:

HTML → CSS → Responsive Design → PHP/Backend

Checklist Sebelum Website Dipublish

Website sudah dapat berjalan secara lokal. Sebelum diupload ke hosting, cek tampilannya di beberapa ukuran layar.

Contohnya:

• 360px untuk HP
• 768px untuk tablet
• 1024px atau lebih untuk desktop

Layout

Pastikan:

• Tidak ada scroll horizontal
• Teks tidak terpotong
• Elemen tidak saling menumpuk
• Gambar tampil dengan proporsional
• Tombol mudah diklik di semua ukuran layar

Fungsionalitas

Periksa:

• Semua link navbar menuju section yang sesuai
• Menu mobile dapat dibuka dan ditutup
• Tidak ada gambar broken
• Setiap gambar penting memiliki atribut alt

Kode

Pastikan:

• Class HTML memiliki aturan CSS yang benar jika memang diperlukan
• Tidak ada kode debugging yang tertinggal
• style.css sudah dihubungkan dari <head>
• Path gambar menggunakan lokasi yang benar

Kalau semua sudah berjalan dengan baik, website siap dipindahkan dari komputer lokal ke server.

Website HTML dan CSS tidak membutuhkan resource server yang rumit. Untuk project sederhana seperti landing page, portfolio, atau company profile statis, Web Hosting sudah cukup menjadi tempat menyimpan file agar halaman bisa diakses melalui internet.

Kamu dapat menggunakan Web Hosting DomaiNesia ketika project yang sebelumnya hanya berjalan di komputer sudah siap dipublikasikan menggunakan domain sendiri.

Upload Website ke Hosting

Website statis seperti project ini relatif sederhana untuk dihosting karena tidak membutuhkan konfigurasi backend khusus.

Setelah memiliki hosting, file utama yang perlu diupload adalah:

index.html

style.css

images/

Pastikan struktur folder di server sama dengan struktur project lokal agar path CSS dan gambar tetap berfungsi.

Ketika website sudah tersimpan di web server dan domain diarahkan dengan benar, halaman dapat diakses melalui browser menggunakan HTTP atau HTTPS.

Untuk memahami proses komunikasi tersebut lebih jauh, kamu dapat membaca pembahasan tentang HTTP adalah.

Website HTML dan CSS Pertamamu Sudah Jadi

Sekarang kamu sudah memiliki satu landing page lengkap dengan struktur HTML semantik, Flexbox, CSS Grid, media query, responsive image, serta navbar sederhana.

Namun, kemampuan membuat website tidak akan berkembang hanya dengan membaca kode.

Coba ubah project yang sudah dibuat.

Ganti warnanya. Ubah typography. Tambahkan section baru. Buat card keempat. Ubah hero menjadi layout yang berbeda. Kemudian buka kembali DevTools ketika ada bagian yang tidak berjalan seperti yang diharapkan.

Dari proses mencoba, menemukan masalah, lalu memperbaikinya, pemahaman HTML dan CSS akan berkembang jauh lebih cepat.

Setelah dasar-dasarnya terasa nyaman, kamu bisa melanjutkan ke JavaScript untuk interaksi halaman, PHP untuk pemrosesan di server, atau framework CSS untuk mempercepat pengembangan tampilan.