Cara Membuat Website Responsif dengan HTML, CSS, dan JavaScript

Berikut adalah panduan lengkap dan jelas tentang cara membuat website responsif menggunakan HTML, CSS, dan JavaScript. Responsif berarti tampilan website dapat menyesuaikan diri dengan berbagai ukuran layar — baik di HP, tablet, maupun desktop.

🔧 1. Siapkan Struktur Dasar HTML

HTML adalah kerangka dari halaman web. Berikut contoh struktur dasarnya:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Website Responsif</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <h1>Selamat Datang di Website Saya</h1>
    <nav>
      <ul class="nav-menu">
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Tentang</a></li>
        <li><a href="#">Layanan</a></li>
        <li><a href="#">Kontak</a></li>
      </ul>
      <div class="menu-toggle">☰</div>
    </nav>
  </header>

  <main>
    <section class="intro">
      <h2>Website Ini Responsif!</h2>
      <p>Silakan ubah ukuran layar Anda untuk melihat hasilnya.</p>
    </section>
  </main>

  <footer>
    <p>© 2025 Website Saya. Semua hak dilindungi.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

🎨 2. Tambahkan CSS untuk Responsif (style.css)

Gunakan Flexbox dan Media Queries agar tampilan menyesuaikan ukuran layar.

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
}

/* Header */
header {
  background-color: #007bff;
  color: white;
  padding: 1rem;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-menu {
  list-style: none;
  display: flex;
}

.nav-menu li {
  margin-left: 20px;
}

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

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Main Section */
main {
  padding: 20px;
  text-align: center;
}

/* Footer */
footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    display: none;
    background-color: #007bff;
    width: 100%;
    text-align: center;
  }

  .nav-menu li {
    margin: 10px 0;
  }

  .menu-toggle {
    display: block;
  }
}

✨ 3. Tambahkan Interaksi dengan JavaScript (script.js)

Gunakan JavaScript untuk membuat menu navigasi bisa dibuka/tutup di layar kecil (mobile).

const menuToggle = document.querySelector('.menu-toggle');
const navMenu = document.querySelector('.nav-menu');

menuToggle.addEventListener('click', () => {
  navMenu.style.display = navMenu.style.display === 'flex' ? 'none' : 'flex';
});

✅ 4. Uji Responsivitas

Cara uji:

Gunakan browser: Tekan F12 lalu aktifkan mode “Device Toolbar” di Chrome/Edge.
Coba resize layar: Pastikan menu berubah dari horizontal ke vertikal saat layar diperkecil.

🎁 Tips Tambahan:

Gunakan unit responsif seperti %, vh, vw, em, dan rem daripada px.
Tambahkan animasi transisi dengan CSS untuk pengalaman pengguna yang lebih halus.
Bisa menggunakan framework seperti Bootstrap untuk responsif yang lebih cepat (opsional).

🔚 Kesimpulan

Membuat website responsif bukan hanya tentang tampil bagus, tapi juga memastikan pengunjung dari semua jenis perangkat bisa mengakses konten dengan nyaman. Dengan HTML untuk struktur, CSS untuk desain, dan JavaScript untuk interaktivitas, kamu bisa membuat situs yang fungsional dan profesional.

Kalau kamu mau, saya bisa bantu modifikasi desainnya atau buatkan versi yang lebih kompleks dengan layout grid, form kontak, galeri gambar, atau integrasi API. Mau lanjut ke sana?

Simak artikel kami yang lain di bawah ini :

Ingin membuat sebuah Website tapi bingung cara bikin nya? tenang Powercode Solusi nya! Pembuatan website anda akan ditangani oleh programmer terbaik kami Silahkan kunjungi pembuatan Website Kami.