BAB 2

ChatGPT: Kode Pertama Tanpa Install

Andi minta AI bikin kode, copy-paste ke Notepad, dan website pertamanya muncul di browser.

Andi Membuka ChatGPT

Setelah baca Bab 1 dan tahu konsep vibecoding — AI yang nulis kode, dia yang ngarahin — Andi langsung semangat. Tapi bingung: mulai dari mana?

Lalu dia sadar. Dia udah sering pakai ChatGPT buat nanya-nanya. Buat bantu skripsi. Buat cari resep masakan. Kalau ChatGPT bisa jawab pertanyaan soal hampir semua hal… pasti bisa juga bikin kode, dong?

Andi buka ChatGPT di laptopnya, dan mulai mengetik satu kalimat yang bakal mengubah segalanya.

💬 Prompt Pertama Andi

Andi ketik ini di ChatGPT:

Andi

Buatkan saya halaman HTML sederhana untuk startup saya

Dan ChatGPT langsung merespons dengan sekumpulan kode yang belum pernah Andi lihat sebelumnya. Tapi tenang — ini lebih gampang dari yang kelihatan.

ChatGPT kasih kode seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>KerjaYuk! — Platform Freelance UMKM</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f5f5f5;
    }
    .header {
      background: #2563eb;
      color: white;
      text-align: center;
      padding: 60px 20px;
    }
    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
    }
    .header p {
      font-size: 1.2rem;
      opacity: 0.9;
    }
    .cta-button {
      display: inline-block;
      margin-top: 20px;
      padding: 15px 40px;
      background: #f59e0b;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      font-size: 1.1rem;
    }
    .features {
      display: flex;
      justify-content: center;
      gap: 30px;
      padding: 50px 20px;
      flex-wrap: wrap;
    }
    .feature-card {
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      width: 280px;
      text-align: center;
    }
    .feature-card h3 {
      color: #2563eb;
    }
    .footer {
      background: #1e293b;
      color: white;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>🚀 KerjaYuk!</h1>
    <p>Platform yang menghubungkan UMKM dengan mahasiswa freelancer</p>
    <a href="#" class="cta-button">Daftar Sekarang</a>
  </div>

  <div class="features">
    <div class="feature-card">
      <h3>🔍 Cari Freelancer</h3>
      <p>Temukan mahasiswa berbakat untuk proyek Anda</p>
    </div>
    <div class="feature-card">
      <h3>💰 Harga Terjangkau</h3>
      <p>Tarif mahasiswa yang ramah di kantong UMKM</p>
    </div>
    <div class="feature-card">
      <h3>⭐ Rating & Review</h3>
      <p>Lihat portofolio dan review dari klien sebelumnya</p>
    </div>
  </div>

  <div class="footer">
    <p>&copy; 2025 KerjaYuk! — Dibuat dengan semangat vibecoding</p>
  </div>

</body>
</html>

Andi Copy-Paste

Andi ngeliatin kode itu. Dia gak ngerti semua artinya, tapi ChatGPT udah jelasin: "Tinggal copy-paste ke file, save sebagai .html, buka di browser."

Andi buka Notepad — aplikasi bawaan Windows yang selama ini dia pakai buat nyatet doang. Dia select semua kode dari ChatGPT, copy, paste ke Notepad.

Lalu dia klik File → Save As. Di dialog save, dia:

Andi (dalam hati)

Nama file: kerjayuk.html… Save as type: All Files (*.*)… Jangan lupa kasih ekstensi .html!

Andi simpan file itu di Desktop-nya. Dia double-click file kerjayuk.html…

🎉 MOMENT WOW

Browser terbuka. Dan di layar muncul… WEBSITE.

Header biru besar bertuliskan "🚀 KerjaYuk!", tombol kuning "Daftar Sekarang", tiga kartu fitur yang rapi, dan footer gelap di bagian bawah.

Andi

WOAH. INI BENERAN?! INI WEBSITE GUE?! DARI NOTEPAD?! GW GAK NGERTI KODE SAMA SEKALI TAPI WEBSITE-NYA MUNCUL! AI INI GILA SIH!

Andi refresh browser-nya. Website-nya masih ada. Dia zoom in, zoom out. Responsive. Tombol-tombol-nya berfungsi. Warna-nya matching.

Dan yang paling bikin dia speechless: semua ini terjadi dalam 5 menit. Dari ketik prompt di ChatGPT sampai website muncul di browser. Tanpa install apapun. Tanpa kursus coding. Tanpa bantuan siapapun.

Inilah kekuatan vibecoding yang sesungguhnya.

📄 Jadi… Apa Itu HTML?

Sebentar. Sebelum kita lanjut, Andi (dan kamu) perlu ngerti satu hal dasar: apa sih HTML itu?

HTML itu kayak kerangka bangunan.

Bayangin kamu mau bikin rumah. Sebelum pasang cat, sebelum pasang AC, sebelum dekorasi — kamu butuh dinding, atap, pintu, jendela. Itu kerangkanya.

HTML persis kayak itu. Dia yang nentuin:

Apa yang ada di halaman — teks, gambar, tombol, judul
Urutannya kayak gimana — judul di atas, konten di tengah, footer di bawah
Apa peran masing-masing elemen — ini judul besar, ini paragraf, ini tombol

Coba lihat kode yang ChatGPT kasih ke Andi tadi. Di situ ada:

<h1>🚀 KerjaYuk!</h1>

<h1> artinya: "Ini judul terbesar." Tulisan di dalamnya bakal tampil gede dan bold.

<p>Platform yang menghubungkan UMKM...</p>

<p> artinya: "Ini paragraf." Tulisan biasa.

<a href="#" class="cta-button">Daftar Sekarang</a>

<a> artinya: "Ini link / tombol yang bisa diklik."

Intinya: HTML adalah bahasa yang memberitahu browser, "Hei, tampilkan ini sebagai judul. Ini sebagai paragraf. Ini sebagai tombol." Semua elemen di dalam tag < > dan </ >.

💡 Ingat Ini

Kamu gak perlu hafal semua tag HTML. Yang penting tahu konsepnya: HTML = struktur. CSS = tampilan (warna, font). JavaScript = interaksi (klik, animasi). ChatGPT yang nulis semuanya buat kamu.

🖥️ Cara Test Hasilnya di Browser

Ini langkah-langkah yang Andi lakuin — dan yang bisa kamu ikuti:

Copy Kode dari ChatGPT

Klik tombol "Copy code" di pojok kanan atas blok kode di ChatGPT. Atau manual: select semua kode, Ctrl+C.

Buka Notepad (Windows) atau TextEdit (Mac)

Notepad ada di semua Windows — ketik "Notepad" di search bar. Di Mac, pakai TextEdit, tapi ubah ke Plain Text dulu (Format → Make Plain Text).

Paste Kode ke Notepad

Ctrl+V (atau Cmd+V di Mac). Semua kode HTML yang tadi di-copy akan muncul di Notepad.

Save dengan Ekstensi .html

Klik File → Save As. Nama file: website.html (pastikan ada .html!). "Save as type" pilih All Files (*.*). Simpan di Desktop biar gampang dicari.

Double-Click File .html

File akan terbuka di browser default kamu (Chrome, Edge, Firefox). Dan… website-nya muncul! 🎉

⚠️ Hati-Hati

Kalau kamu save sebagai website.html.txt (ekstensi ganda), browser gak akan ngebuka-nya sebagai website. Pastikan ekstensi-nya cuma .html, bukan .html.txt. Di Notepad, "Save as type" harus All Files, bukan "Text Documents".

🎯 Seni Nulis Prompt yang Bagus

Andi excited banget sama hasil pertamanya. Tapi pas dia coba minta yang lebih kompleks, hasilnya kadang gak sesuai harapan. Ternyata, cara kita nanya ke ChatGPT itu penting banget.

Ini namanya prompt engineering — seni ngasih instruksi yang jelas ke AI supaya hasilnya sesuai mau kita.

Prompt yang Buruk vs Prompt yang Bagus

❌ Prompt Buruk	✅ Prompt Bagus
"Buatkan website"	"Buatkan halaman HTML satu file untuk landing page startup bernama 'KerjaYuk' yang menghubungkan UMKM dengan mahasiswa freelancer. Warna utama biru, ada tombol CTA, 3 kartu fitur."
"Bikin kode yang bagus"	"Buatkan HTML dengan inline CSS. Desain modern dan profesional. Ada header dengan logo, section tentang layanan, dan footer."
"Ganti warnanya"	"Ubah warna header dari biru ke hijau (#3DDC84), dan warna tombol CTA dari kuning ke oranye."
"Tambahin fitur"	"Tambahkan section baru di bawah kartu fitur: formulir kontak dengan field nama, email, dan pesan. Tombol submit-nya warna biru."

Prinsip Prompt yang Efektif

💡 Tips Prompt Engineering

1. Spesifik: Jangan bilang "website." Bilang "landing page startup dengan 3 section."

2. Konteks: Kasih tau AI ini buat apa. "Ini untuk startup yang connect UMKM sama mahasiswa."

3. Format: Bilang format apa yang kamu mau. "Satu file HTML dengan inline CSS."

4. Detail visual: Kasih tau warna, ukuran, style. "Warna biru, tombol besar, font modern."

5. Iterasi: Gak puas? Bilang aja. "Ubah bagian X jadi Y" — ChatGPT ingat konteks sebelumnya.

🧱 Strategi: Bangun Bertahap

Salah satu kesalahan terbesar pemula: minta semuanya sekaligus dalam satu prompt panjang. Hasilnya? AI bingung, output-nya gak fokus.

Cara yang lebih baik: minta bertahap.

Minta Struktur Dasar Dulu

"Buatkan HTML satu file untuk landing page startup freelance. Cuma header dan 3 kartu fitur dulu."

Review & Minta Perubahan

Simpan, buka di browser. Lihat hasilnya. Kalau ada yang kurang, balik ke ChatGPT: "Tambahkan section testimonial di bawah kartu fitur."

Tambah Detail & Polish

"Ubah warna header jadi lebih gelap. Buat tombol CTA lebih besar. Tambahkan ikon emoji di setiap kartu fitur."

Ulangi Sampai Puas

ChatGPT ingat percakapan sebelumnya. Kamu bisa terus minta perubahan tanpa ngulang dari awal.

🚧 Tapi… Ada Tapi-nya

Setelah semangat bikin website pertamanya, Andi mulai nyadar ada beberapa hal yang bikin agak repot:

⚠️ Limitasi ChatGPT

1. Cuma satu file. ChatGPT bisa bikin HTML lengkap, tapi semua harus di satu file. CSS dan JavaScript nempel langsung di HTML. Kalau project-nya besar, ini gak praktis.

2. Copy-paste manual. Setiap kali minta perubahan, kamu harus copy ulang semua kode, paste ke Notepad, save lagi. Bolak-balik.

3. Gak bisa preview langsung. Kamu gak bisa lihat hasilnya di ChatGPT. Harus save dulu ke file, buka di browser. Kalau ada error? Balik ke ChatGPT, edit, copy, paste, save, buka browser… lagi.

4. Gak bisa bikin banyak file. Kalau website-mu butuh file terpisah (HTML, CSS, JavaScript, gambar), ChatGPT gak bisa langsung bikin semua-nya sekaligus.

Tapi jangan salah — ini bukan akhir. Justru ini awal perjalanan. ChatGPT adalah cara paling gampang buat mulai. Dan buat banyak orang, ini udah cukup buat bikin halaman sederhana.

Andi

Oke, gw udah bisa bikin website dari ChatGPT. Tapi bolak-balik copy-paste capek juga ya… Pasti ada cara yang lebih praktis. Ada gak ya tools yang bisa langsung kasih preview?

Andi Bergerak

Andi save screenshot website pertamanya dan kirim ke grup WhatsApp kampus. Respon-nya? Kaget semua.

"Lu bikin sendiri?!", "Gimana caranya?!", "Kok bisa? Lu kan gaptek!"

Andi senyum. Dia tahu ini baru permulaan. Website pertama udah jadi. Tapi perjalanannya masih panjang.

Dan dia udah tau langkah selanjutnya: cari cara yang lebih praktis buat lihat hasil kode secara langsung tanpa copy-paste.

Bab berikutnya? Gemini Canvas. Ketik prompt, langsung lihat preview. Tanpa file. Tanpa Notepad. Tanpa bolak-balik.

← Bab 1: Apa Itu Vibecoding? Bab 3: Gemini Canvas →