Andi udah bisa bikin satu halaman. Tapi project nyata butuh lebih dari satu file — dan di sinilah ChatGPT mulai kewalahan.
Andi senyum-senyum sendiri. Dalam dua minggu terakhir, dia udah bikin beberapa halaman HTML pakai ChatGPT dan Gemini Canvas. Halaman profil. Landing page sederhana. Bahkan halaman "Tentang Kami" buat ide startup dia.
Tapi malam ini, ada yang berbeda. Andi lagi scroll referensi website startup lain — Ula, Grab, Ruangguru — dan dia perhatiin satu hal.
Semua website itu punya banyak halaman. Ada halaman utama, halaman produk, halaman kontak. Ada navbar yang sama di setiap halaman. Warna dan font konsisten dari halaman satu ke halaman lain.
Andi buka project dia. Satu file index.html. Isinya campur aduk — HTML, CSS inline di mana-mana, warna gak konsisten, gak ada navbar yang nyambung antar halaman.
Andi langsung buka ChatGPT. Dia ketik:
ChatGPT menjawab. Panjang. Ada kode buat index.html, terus style.css, terus produk.html, terus kontak.html. Satu jawaban super panjang yang isinya semua kode dicampur jadi satu.
Andi bengong.
Dia coba copy-paste satu per satu. Yang pertama disimpen sebagai index.html. Yang kedua sebagai style.css. Tapi pas dibuka di browser — navbar gak muncul. Warna gak berubah. Layout berantakan.
Andi cek lagi. Ternyata dia salah copy. Bagian CSS kecampur sama potongan HTML. Atau sebaliknya. Dia balik ke ChatGPT, minta penjelasan. ChatGPT kasih penjelasan, tapi tetap dalam format teks — satu blok panjang.
Andi istirahat. Tutup laptop. Minum kopi. Mikir.
Sebelum lanjut, kita perlu ngerti kenapa satu file gak cukup. Bayangin kamu lagi bikin rumah. Kamu gak bisa semuanya jadi satu — ada yang namanya pembagian tugas.
HTML itu struktur. Dinding, pintu, jendela, atap. Tanpa HTML, gak ada rumah. HTML nentuin apa yang ada di halaman — judul, paragraf, gambar, tombol, form.
CSS itu tampilan. Warna dinding, jenis lantai, posisi kursi. CSS nentuin gimana rumah keliatan — warna, ukuran font, jarak antar elemen, layout responsif.
JS itu interaksi. Saklar lampu yang nyala saat ditekan, pintu geser otomatis, alarm yang bunyi. JS nentuin apa yang terjadi kalau user melakukan sesuatu — klik tombol, scroll, submit form.
Kenapa harus dipisah? Karena kalau dicampur jadi satu, hasilnya berantakan dan susah di-maintain. Coba bayangin: kamu mau ganti warna tombol. Kalau CSS-nya inline di setiap halaman, kamu harus ubah di 3 tempat. Tapi kalau CSS-nya di file terpisah, cukup ubah di satu tempat — semua halaman otomatis berubah.
Ini bukan soal "cara yang benar". Ini soal praktis. Project yang rapi = project yang gampang diubah, gampang dikembangin, dan gampang dimengerti orang lain.
Setiap file punya tempatnya masing-masing. Gak boleh sembarangan. Ini struktur folder standar yang dipakai hampir semua project web:
project-andi/
├── index.html ← halaman utama (home)
├── produk.html ← halaman produk
├── kontak.html ← halaman kontak
├── style.css ← semua styling di sini
├── script.js ← semua interaksi di sini
└── images/
├── logo.png
├── hero-banner.jpg
└── produk-1.jpgPenjelasan:
index.html — Ini halaman utama. Nama "index" itu konvensi. Browser otomatis buka file ini kalau kamu buka folder-nya.style.css — Semua aturan tampilan ada di sini. Satu file untuk semua halaman. Mau ganti warna? Edit di sini, semua halaman berubah.script.js — Semua interaksi ada di sini. Tombol yang diklik, form yang divalidasi, animasi yang jalan.images/ — Folder khusus buat gambar. Jangan taruh gambar sembarangan — biar rapi dan gampang dicari.Di setiap file HTML, kamu perlu link ke CSS dan JS:
<!-- Di dalam <head> -->
<link rel="stylesheet" href="style.css">
<!-- Sebelum </body> -->
<script src="script.js"></script>Cuma dua baris itu. Itu cara HTML bilang: "Hei, styling-nya ada di file ini, interaksinya ada di file itu."
ChatGPT dan Gemini Canvas gak bisa bikin file. Mereka cuma bisa kasih kode dalam bentuk teks. Kamu yang harus copy-paste, bikin folder, bikin file, dan nge-link semuanya sendiri. Satu kesalahan copy-paste = project rusak. Dan kalau kamu minta revisi, mereka kasih seluruh kode lagi dari awal — bukan edit file yang udah ada.
Ini yang bikin Andi frustrasi. Dan ini masalah yang sama dialami semua orang yang mulai bikin project multi-file pakai ChatGPT atau Gemini Canvas.
ChatGPT kasih kode dalam blok kode. Kamu harus copy, bikin file sendiri, paste ke sana. Kalau ada 5 file, kamu harus copy-paste 5 kali. Dan harus tau urutan yang benar.
ChatGPT gak bisa bikin folder images/ di laptop kamu. Dia cuma bisa bilang "buat folder images". Kamu yang harus bikin manual.
Mau ubah warna di style.css? ChatGPT kasih seluruh file CSS lagi. Kamu harus replace semua. Gak bisa edit satu baris aja.
ChatGPT gak tau file apa aja yang udah ada di project kamu. Dia gak bisa baca index.html kamu terus edit yang perlu diubah. Setiap chat dimulai dari nol.
Hasilnya? Kamu habis lebih banyak waktu ngatur file daripada bangun project. Dan itu kebalikan dari tujuan vibecoding.
Batasan ini bukan salah AI-nya. ChatGPT dan Gemini memang didesain sebagai chatbot, bukan file manager. Mereka luar biasa buat brainstorming, belajar konsep, dan bikin kode satu file. Tapi begitu project kamu butuh banyak file yang saling terhubung, kamu butuh tool yang lebih tepat.
Andi duduk di kamar kos, laptop terbuka, tapi dia gak lagi ngetik. Dia lagi mikir.
Selama ini, dia ngerasa ChatGPT itu segalanya. Minta kode, dapat kode. Tapi sekarang dia sadar ada celah besar antara mendapat kode dan mengelola project.
Andi chat Raka lagi.
Andi langsung googling "VS Code". Dan dia nemuin bab berikutnya.
Kamu sekarang udah ngerti kenapa project web butuh banyak file, dan kenapa ChatGPT/Gemini Canvas gak ideal buat mengelola itu semua.
Di bab selanjutnya, kita akan:
Ini lompatan besar. Dari "AI kasih kode" ke "AI bikin project". Dan kamu gak perlu jago coding buat ngelakuinnya.