Cara Membuat Website Pertama dari Nol

Hasil yang akan dibuat

Pada panduan ini, kamu akan membuat sebuah landing page sederhana menggunakan tiga file: index.html, style.css, dan script.js. Struktur ini sengaja dipilih karena mudah dipahami, mudah diunggah ke hosting, dan cukup untuk mempelajari hubungan antara konten, tampilan, dan interaksi.

Target realistis: website pertama tidak harus memiliki login, database, atau animasi rumit. Fokuskan versi pertama pada informasi yang jelas, tampilan responsif, dan tombol kontak yang berfungsi.

1. Siapkan folder proyek

Buat satu folder bernama website-pertama. Di dalamnya, buat tiga file berikut:

website-pertama/
├── index.html
├── style.css
└── script.js

Nama file harus sama persis. Huruf besar dan kecil dapat dianggap berbeda pada server Linux, sehingga Style.css tidak selalu sama dengan style.css.

2. Tulis struktur HTML

HTML menjadi kerangka utama halaman. Salin contoh berikut ke dalam index.html:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Website pertama saya">
  <title>Website Pertamaku</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <p>Halo, saya sedang belajar coding.</p>
    <h1>Website Pertamaku</h1>
    <p>Saya membangun halaman ini menggunakan HTML, CSS, dan JavaScript.</p>
    <a href="#kontak">Hubungi Saya</a>
  </header>

  <main>
    <section>
      <h2>Tentang Proyek</h2>
      <p>Isi penjelasan singkat mengenai proyek atau layanan.</p>
    </section>

    <section id="kontak">
      <h2>Kontak</h2>
      <button id="hello-button" type="button">Klik Saya</button>
    </section>
  </main>

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

3. Tambahkan tampilan CSS

CSS mengatur warna, jarak, ukuran, dan susunan elemen. Masukkan kode berikut ke style.css:

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: #172033;
  background: #f5f7fb;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
.hero, main {
  width: min(100% - 32px, 1000px);
  margin-inline: auto;
}
.hero {
  min-height: 75vh;
  display: grid;
  align-content: center;
}
h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: 1; }
section { padding: 70px 0; border-top: 1px solid #dbe1ea; }
a, button {
  display: inline-block;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  color: #062019;
  background: #00e5a8;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}

4. Tambahkan interaksi JavaScript

JavaScript membuat tombol bereaksi ketika diklik. Masukkan kode berikut ke script.js:

"use strict";

const button = document.getElementById("hello-button");

button.addEventListener("click", () => {
  alert("Website pertamamu sudah berjalan!");
});

5. Uji di browser

Klik dua kali file index.html.
Periksa apakah CSS sudah terbaca.
Klik tombol dan pastikan pesan muncul.
Kecilkan ukuran browser untuk memeriksa tampilan ponsel.
Buka DevTools dengan F12 dan periksa tab Console.

Jika tampilan tidak berubah, periksa kembali nama file CSS serta nilai pada href="style.css". Jika tombol tidak berfungsi, pastikan id pada HTML sama dengan yang dipanggil JavaScript.

6. Siapkan untuk dipublikasikan

Sebelum diunggah, isi judul halaman, deskripsi, kontak, dan teks yang benar-benar mewakili proyek. Hindari mengunggah password, API key, token bot, atau konfigurasi rahasia ke file publik.

Pastikan halaman tidak memiliki tautan kosong.
Kompres gambar agar website cepat dibuka.
Gunakan nama file gambar tanpa spasi.
Pastikan index.html berada di folder utama.
Aktifkan SSL setelah website online.

Artikel berikutnya

Cara Upload Website HTML ke cPanel →