Progres belajar 0%

Workshop interaktif • Bahasa Indonesia

Build Your
First Website

Dari layar kosong sampai online—setiap peserta menyelesaikan satu website dan mendapatkan satu URL publik.

Mulai belajar ± 60 menit

Struktur

HTML adalah kerangka website

Ubah teks di editor. Preview akan diperbarui otomatis.

HTML

Kerangka dan isi rumah.

CSS

Warna dan dekorasi.

JavaScript

Listrik dan interaksi.

index.html

<main>
  <p>Halo, saya sedang belajar web!</p>
  <h1>Website Pertamaku 🚀</h1>
  <p>Saya membuat halaman ini dengan HTML.</p>
  <a href="https://example.com">Lihat inspirasi</a>
</main>

Preview langsungLive

Tampilan

CSS membuat website tampil menarik

Coba ganti warna, ukuran, atau bentuk tombol di bawah.

style.css

body {
  font-family: Arial, sans-serif;
  background: #fff7ed;
  color: #172033;
  text-align: center;
  padding: 40px;
}

.kartu {
  background: white;
  border: 3px solid #ff6b35;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 8px 8px 0 #172033;
}

button {
  background: #ff6b35;
  color: white;
  border: 0;
  border-radius: 99px;
  padding: 12px 20px;
}

Preview langsungLive

Interaksi

JavaScript menghidupkan halaman

Alurnya sederhana: klik tombol → JavaScript berjalan → DOM berubah.

1Klik tombol
→
2JavaScript
→
3DOM berubah

script.js

const tombol = document.querySelector('#sapa');
const pesan = document.querySelector('#pesan');
let jumlahKlik = 0;

tombol.addEventListener('click', () => {
  jumlahKlik += 1;
  pesan.textContent = `Hebat! Tombol diklik ${jumlahKlik} kali 🎉`;
  pesan.classList.add('aktif');
});

Preview amanLive

Kode berjalan di iframe terisolasi (sandbox), bukan di halaman utama.

Kolaborasi dengan AI

Prompt yang jelas, hasil yang tepat

AI bukan pembaca pikiran. Berikan konteks dan batasan yang konkret.

BAD ✕

Buatkan website.

GOOD ✓

Buat landing page portofolio untuk fotografer menggunakan HTML dan CSS. Gunakan desain minimalis, warna monokrom, dan layout responsif.

BETTER ★

Saya fotografer pernikahan di Bandung. Buat landing page satu halaman untuk mendapatkan calon klien. Gunakan HTML, CSS, dan vanilla JavaScript tanpa library. Desain editorial hangat, mobile-first, aksesibel, serta cepat dimuat. Sertakan hero, galeri 6 foto placeholder, paket harga, testimoni, dan tombol WhatsApp. Hasilkan tiga file terpisah: index.html, style.css, dan script.js.

Context+Goal+Technology+Constraints+Design+Expected Result

Mudah ditemukan

SEO dimulai dari bagian <head>

Temukan tiga elemen penting pada contoh kode.

<head>
  <title>Kopi Senja — Kopi Lokal Bandung</title>
  <meta name="description"
    content="Kopi lokal, suasana hangat, rasa istimewa.">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
</head>

Sudah menemukan semuanya? TitleJudul di tab & hasil pencarian Meta descriptionRingkasan isi halaman ViewportTampilan nyaman di mobile

Centang elemen yang berhasil Anda identifikasi.

Saatnya online

Checklist sebelum deployment

Periksa setiap langkah agar website siap dibagikan ke dunia.

0 dari 9 langkah selesai

MY WEBSITE IS LIVE

Selamat! Website pertama Anda resmi mengudara.

Build YourFirst Website