Tutorial Lengkap: Cara Membuat Website dari Nol sampai Online

Tutorial • 2026-01-12

Langkah demi langkah membuat website: struktur folder, HTML/CSS/JS, SEO dasar, sitemap, lalu deploy ke hosting.

Di tutorial ini kita bikin website sederhana (landing page) yang mobile-friendly, punya tombol WhatsApp, dan siap diindeks Google.

Persiapan (tools & folder)

VS Code + extension Live Server (opsional).
Browser Chrome/Edge.
Akun hosting + domain (kalau mau online).

Struktur folder project

website/
  index.html
  css/
    styles.css
  js/
    app.js
  images/
    hero.jpg

Membuat halaman dengan HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Jasa Website - Ozieweb</title>
  <meta name="description" content="Jasa website cepat & profesional. Siap online dan mudah ditemukan di Google." />
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <header>
    <nav>
      <a href="#hero">Beranda</a>
      <a href="#services">Layanan</a>
      <a href="#contact">Kontak</a>
    </nav>
  </header>

  <main>
    <section id="hero">
      <h1>Website Cepat & Profesional</h1>
      <p>Siap online, mobile-friendly, dan SEO-ready.</p>
      <a class="cta" href="#contact">Konsultasi</a>
    </section>

    <section id="services">
      <h2>Layanan</h2>
      <ul><li>Landing Page</li><li>Website UMKM</li><li>SEO</li></ul>
    </section>

    <section id="contact">
      <h2>Kontak</h2>
      <form id="contactForm">
        <input id="name" placeholder="Nama" required />
        <textarea id="message" placeholder="Pesan" required></textarea>
        <button>Kirim via WhatsApp</button>
      </form>
    </section>
  </main>

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

Merapikan tampilan dengan CSS

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; }
header { position: sticky; top: 0; background: white; border-bottom: 1px solid #eee; }
nav { display: flex; gap: 16px; padding: 12px 16px; }
section { padding: 64px 16px; max-width: 960px; margin: 0 auto; }
.cta { display: inline-block; padding: 12px 18px; border-radius: 12px; }

Tambah interaksi dengan JavaScript

const form = document.querySelector("#contactForm");
form?.addEventListener("submit", (e) => {
  e.preventDefault();
  const name = document.querySelector("#name").value.trim();
  const message = document.querySelector("#message").value.trim();

  const text = `Halo, saya ${name}.\n\n${message}`;
  const wa = "6281234567890"; // ganti nomor
  window.open(`https://wa.me/${wa}?text=${encodeURIComponent(text)}`, "_blank");
});

SEO dasar + sitemap + indexing

Pastikan setiap halaman punya title + meta description.
Buat robots.txt dan sitemap.xml.
Submit sitemap di Google Search Console.

Baca panduan detail: SEO Dasar dan Cara Submit Sitemap.

Upload ke hosting + domain + SSL

Upload file via File Manager/FTP.
Arahkan domain ke hosting (DNS).
Aktifkan SSL (HTTPS).

Checklist sebelum live

Terakhir, cek Checklist sebelum website live dan optimasi kecepatan di Core Web Vitals.

Butuh bantuan bikin website? Cek layanan dan konsultasi gratis di halaman kontak.