Hampir semua keluhan "kodeku nggak jalan" padahal kodenya kelihatan benar berasal dari daftar ini. Kuncinya: koneksi itu seperti alamat. Kalau satu huruf saja meleset, paketnya tidak sampai, dan browser jarang protes keras.

1. Path CSS salah. href="style.css" padahal berkasnya ada di css/style.css. Path relatif dihitung dari lokasi berkas HTML, bukan dari root proyek. Lupa rel="stylesheet" juga bikin CSS tidak dipakai, meski path-nya benar.

2. Script sebelum elemen ada, tanpa defer. Sudah kita bedah di bab cara browser merakit halaman: parser belum sampai ke elemen, jadi pilihannya null. Solusinya defer atau taruh script sebelum </body>.

3. Typo selector. .tomboll, #Judul, atau tombol { } tanpa titik. CSS tidak pernah error; aturan yang tidak cocok cuma diam-diam diabaikan. Ingat: titik untuk class, pagar untuk id, tanpa awalan untuk tag. Nama class dan id case-sensitive, jadi .Tombol tidak sama dengan class="tombol".

4. querySelector mengembalikan null. Bedanya dengan CSS, JavaScript langsung error di baris berikutnya:

const tombol = document.querySelector("#tombol"); // padahal HTML-nya class="tombol"
tombol.addEventListener("click", ...); // TypeError: Cannot read properties of null

Pesan error-nya menunjuk baris addEventListener, padahal kesalahannya di baris atas. Biasakan membaca satu baris ke atas.

5. Class di CSS beda dengan di JS. CSS menulis .aktif, JS memanggil classList.add("active"). Di panel Elements, class active benar-benar terpasang, jadi kelihatannya JS benar. Masalahnya, tidak ada aturan CSS untuk active.

6. Cache browser. Kamu sudah mengedit style.css, tapi browser masih memakai salinan lama. Coba hard reload (Ctrl + Shift + R), atau centang "Disable cache" di tab Network selama DevTools terbuka.

Contoh kecil yang menggabungkan kesalahan nomor 3 dan 5:

<button class="tombol">Simpan</button>

.Tombol { background: #e34f26; }
.tombol.active { outline: 3px solid gold; }

Hasilnya: tombol tetap abu-abu bawaan browser karena .Tombol tidak cocok dengan tombol. Dan kalau JS memasang class aktif, outline emas juga tidak muncul karena CSS menunggu active.

Prinsip ini sederhana: HTML untuk struktur, CSS untuk tampilan, JavaScript untuk perilaku. Kedengarannya teori, tapi efeknya terasa saat debugging. Kalau warna salah, kamu tahu harus buka style.css. Kalau klik tidak bereaksi, buka script.js.

Dua kebiasaan yang melanggar prinsip ini:

<!-- hindari -->
<button style="background: red" onclick="simpan()">Simpan</button>

<!-- lebih baik -->
<button class="tombol" id="simpan">Simpan</button>

• Inline style (style="...") punya specificity sangat tinggi. Aturan di style.css jadi kalah dan kamu bingung kenapa CSS-mu "tidak jalan".
• onclick di HTML mencampur perilaku ke struktur, cuma bisa memanggil fungsi global, dan sering diblokir Content Security Policy di situs produksi. Pakai addEventListener di berkas JS.

Begitu juga di JS: lebih baik classList.toggle("aktif") daripada mengatur element.style.color, element.style.background, dan seterusnya. Keputusan tampilan tetap di CSS, JS cukup memilih kondisi.

Daftar periksa sebelum bilang halaman selesai: berkas CSS dan JS berstatus 200 di Network, Console bersih tanpa pesan merah, setiap class di CSS benar-benar dipakai, nama berkas huruf kecil tanpa spasi, dan halaman tetap terbaca walau JavaScript dimatikan.

Buka dengan F12 atau Ctrl + Shift + I (Cmd + Option + I di Mac).

• Elements menampilkan DOM yang sebenarnya, termasuk perubahan dari JavaScript. Berbeda dengan "View Source" yang hanya menampilkan HTML asli dari server. Pakai ini untuk cek apakah data-tema atau class benar-benar terpasang.
• Styles (di samping Elements) menampilkan aturan CSS yang cocok dengan elemen terpilih. Aturan yang kalah dicoret, jadi kamu bisa lihat siapa yang menimpa siapa. Tab Computed menampilkan nilai akhir, misalnya rgb(27, 32, 48) dan 32px.
• Console menampilkan error JS beserta nama berkas dan nomor barisnya. Kamu juga bisa menjalankan document.querySelector(".tombol") langsung di sini untuk mengetes selector.
• Network mencatat setiap berkas yang diminta. Refresh halaman dengan panel terbuka, lalu cari style.css dan script.js. Status 200 berarti berhasil, 404 berarti path salah.
• Sources menampilkan berkas yang benar-benar dimuat browser. Klik nomor baris untuk memasang breakpoint; saat kode sampai di situ, eksekusi berhenti dan kamu bisa melihat isi setiap variabel. Kata kunci debugger; di kode punya efek yang sama.

Kebiasaan bagus: buka DevTools setiap kali menulis kode, bukan hanya saat ada masalah.

Setelah koneksi dasar ini lancar, arah belajarnya kira-kira begini:

1. Perkuat dasar dan tata letak: Flexbox, Grid, desain responsif (lihat kelas HTML5 dan CSS3).
2. JavaScript modern: modul, async/await, dan fetch (lihat kelas JavaScript).
3. Alat bantu: Git dan GitHub, npm, bundler, Prettier, ESLint.
4. Tailwind CSS: menulis gaya lewat class utilitas seperti bg-white p-4. Koneksinya tetap sama: HTML memakai class, CSS yang dihasilkan Tailwind memberi gayanya.
5. Framework seperti React: kamu menulis komponen, React yang mengurus DOM. Konsep event, class, dan state di balik layar tetap sama dengan yang kamu pelajari di sini.

Saran praktis: setiap selesai satu tahap, bangun ulang satu halaman favoritmu dari nol.

• Langsung mengubah kode tanpa membuka DevTools. Tebak-tebakan memakan waktu lebih lama daripada membaca Console dan Network.
• Mengira CSS akan memberi pesan error. CSS diam saja; cek panel Styles.
• Memperbaiki baris yang ditunjuk error tanpa melihat baris di atasnya, padahal null-nya berasal dari selector sebelumnya.
• Inline style untuk "memperbaiki cepat", yang akhirnya menimpa semua aturan di berkas CSS.