htmlcssjavascriptsetupPemula8 mnt baca

Setup Proyek Web: Struktur Folder yang Rapi

Menyiapkan tiga file inti (HTML, CSS, JS) yang saling terhubung sebelum mulai membangun komponen apa pun.

Kenapa Setup Dulu?

Bayangkan kamu mau masak. Sebelum menyalakan kompor, kamu siapkan dulu bahan, pisau, dan wajan di tempatnya. Membangun web juga begitu: siapkan tiga file inti (HTML untuk struktur, CSS untuk tampilan, JS untuk interaksi), lalu hubungkan ketiganya. Sekali setup ini rapi, semua modul berikutnya tinggal mengikuti pola yang sama.

Tiga File Inti

  1. index.html: kerangka halaman. Di dalam <head> pasang <link rel="stylesheet" href="styles.css">, dan sebelum <body> ditutup pasang <script src="index.js"></script>.
  2. styles.css: semua aturan tampilan. Kosong dulu tidak masalah.
  3. index.js: semua logika interaksi. Kosong dulu tidak masalah.

Catatan teknis: Script ditaruh di akhir body agar elemen HTML sudah ada saat JS berjalan. Kalau script di head tanpa defer, document.querySelector bisa mengembalikan null.

Cara Menjalankan

Buka index.html langsung di browser bisa, tapi cara profesionalnya pakai Live Server (ekstensi VS Code). Klik kanan file, pilih "Open with Live Server", dan halaman otomatis refresh setiap kamu menyimpan perubahan. Ini menghemat ratusan klik refresh selama belajar.

Kesalahan Umum Pemula

  • Nama file tidak cocok: style.css vs styles.css. HTML peka huruf, jadi harus sama persis.
  • Lupa menyimpan file sebelum refresh browser.
  • Menulis CSS di dalam file HTML memakai tag <style> lalu bingung kenapa styles.css tidak berpengaruh (keduanya bisa dipakai, tapi pilih satu pola dan konsisten).

Mulai modul berikutnya, setiap playground sudah memakai struktur tiga file ini. Kamu tinggal fokus membangun.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Halaman Perkenalan Diri

Ubah playground menjadi halaman perkenalan diri: ganti judul dengan namamu, tambah satu paragraf tentang hobimu, dan buat tombolnya mengubah warna background body setiap diklik (gunakan document.body.style.backgroundColor).