Panduan Membuat Website Responsive dengan HTML, CCS, dan JavaScript

Berikut adalah panduan dasar membuat website responsive menggunakan HTML, CSS (bukan CCS 😊), dan JavaScript. Kita akan buat halaman web sederhana yang bisa menyesuaikan tampilannya di berbagai perangkat (desktop, tablet, dan mobile).

🧰 1. Persiapan Struktur Dasar File

Buat folder proyek dan tambahkan 3 file:

index.html
style.css
script.js

🧱 2. HTML: Struktur Dasar

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

  <header>
    <nav class="navbar">
      <div class="logo">MyWeb</div>
      <ul class="nav-links" id="navLinks">
        <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>
      <button class="menu-toggle" onclick="toggleMenu()">☰</button>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Selamat Datang</h1>
      <p>Ini adalah contoh website responsive.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 MyWeb. Semua Hak Dilindungi.</p>
  </footer>

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

🎨 3. CSS: Responsiveness & Styling

/* style.css */

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

body {
  font-family: sans-serif;
  line-height: 1.6;
  background: #f0f0f0;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  padding: 1rem;
  color: white;
}

.nav-links {
  display: flex;
  gap: 1rem;
  list-style: none;
}

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

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
}

/* Hero Section */
.hero {
  padding: 4rem 2rem;
  text-align: center;
  background: white;
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  background: #222;
  color: #ccc;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background: #333;
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    padding: 1rem;
  }

  .nav-links.show {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

⚙️ 4. JavaScript: Toggle Menu Mobile

// script.js
function toggleMenu() {
  const nav = document.getElementById('navLinks');
  nav.classList.toggle('show');
}

✅ 5. Penjelasan Singkat

Elemen	Fungsi
`meta viewport`	Mengatur skala tampilan agar sesuai dengan ukuran layar perangkat
Flexbox	Digunakan di `.navbar` untuk layout yang fleksibel
Media Queries	Menyesuaikan tampilan saat lebar layar <= 768px (tablet/ponsel)
JavaScript	Menampilkan/menyembunyikan menu mobile saat tombol ☰ diklik

🧪 6. Tips Tambahan

Gunakan rem atau % untuk ukuran agar lebih fleksibel.
Tes tampilan di berbagai perangkat (Chrome DevTools: Ctrl + Shift + M).
Bisa ditambah framework seperti Bootstrap untuk mempercepat desain responsive.

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.