Yang DibuatLanding page atau e-catalog

ToolsVS Code, Codex, Live Server, GitHub, Vercel

LevelPemula, tanpa pengalaman coding

Dev Forge · Materi Presentasi

Vibe-Coding Fundamental

Membangun Aplikasi Web Menggunakan AI

Materi, contoh prompt, dan alur praktik untuk membangun satu website dari nol.

01

Pembuka

Sesi ini bukan tentang menghafal kode.

Yang dilatih: mengubah ide menjadi instruksi yang jelas untuk AI.

Modalnya bukan hafal kode, tapi instruksi yang jelas.

Mulai dari contohHasil jadinya ditunjukkan lebih dulu.

Praktik langsungProject dikerjakan sendiri di VS Code.

Revisi bertahapHasil pertama diperbaiki pelan-pelan.

02

Target Kelas

Hasil akhir: satu website yang jalan dan sudah online.

1

Menyusun Ide

Jenis web, target pengunjung, isi, dan tombol aksi ditentukan di awal.

2

Memberi Instruksi

Prompt ditulis jelas, bertahap, dan mudah direvisi.

3

Menjalankan Project

Website dijalankan lewat Live Server di laptop sendiri.

4

Mengecek & Memperbaiki

Bagian yang kurang ditandai, lalu diperbaiki lewat prompt revisi.

03

Mindset

Hasil AI ditentukan oleh kejelasan instruksi.

Instruksi yang kabur membuat AI menebak: tampilannya rapi, isinya meleset.

Ide dipikirkan dulu, baru prompt ditulis.
Satu bagian, satu instruksi.
Setiap hasil dicek di browser.

Kalimat kunci

AI tidak bisa menebak isi kepalamu.

04

Tools

Tiga alat yang dipakai

VS Code

Semua file project dikelola di sini.

Codex

Extension resmi OpenAI. Kode dibuat dan diperbaiki langsung dari editor.

Live Server

Web dijalankan di alamat lokal seperti localhost.

Project selalu dibuka lewat Live Server, bukan double click.

05

Struktur Project

File dipisah sesuai fungsinya.

HTML = struktur halaman
CSS = tampilan
JavaScript = logika
JSON = data produk

06

Bagian Website

Web sederhana cukup empat bagian.

Hero

Nama brand, pesan utama, tombol aksi.

Value

Kelebihan produk atau usaha.

Katalog

Produk, harga, gambar, deskripsi.

CTA/Footer

Kontak, WhatsApp, Instagram, alamat.

Jelas Ringkas Mudah dibaca Tombol terlihat Rapi di HP

Untuk latihanSatu halaman yang jelas sudah cukup.

Yang pentingPengunjung langsung tahu: ini web apa, kliknya di mana.

07

Sebelum Prompt

Bahan disiapkan dulu, baru prompt ditulis.

Identitas

Nama brand, jenis web, target, kesan visual.

Isi utama

Deskripsi singkat, produk, harga, gambar kalau ada.

Aksi

Pesan via WhatsApp, Lihat Katalog, atau Hubungi Kami.

Kontak

WhatsApp, Instagram, alamat, atau kontak lain.

08

Contoh Ide

Contoh bahan yang sudah diisi

BrandDapur Rani

Jenis webE-catalog kue rumahan

TargetIbu rumah tangga dan pekerja kantor

StyleHangat, bersih, rumahan

WarnaKrem, coklat, oranye lembut

TombolPesan via WhatsApp

Intinya: hasil AI mengikuti bahan yang konkret. “Buatkan website yang bagus” terlalu umum untuk dieksekusi.

09

Prompt Utama

Konsep ditentukan dulu, baru kode diminta.

Diisi sebelum prompt

Nama brand
Target pengunjung
Kesan visual
Warna utama
Produk atau layanan
Tombol utama

Buatkan website sederhana untuk [jenis web]. Brand: [nama brand] Target: [target pengunjung] Style: [modern / hangat / elegan / minimalis] Warna utama: [warna utama] Isi: [produk, layanan, atau usaha] Bagian halaman: Hero, Value, Katalog, CTA, Footer. Gunakan HTML, CSS, JavaScript, dan JSON biasa. Jangan pakai framework (React, Vue, Tailwind, Bootstrap). Data produk disimpan di data.json, dibaca lewat fetch(). Pakai bahasa Indonesia dan rapi di HP.

10

Setelah Prompt

Dari jawaban AI ke file project

1. File dibuat

Satu file untuk tiap nama yang disebut AI.

2. Kode disalin per blok

Blok HTML ke index.html, CSS ke style.css, begitu seterusnya.

3. Disimpan

Ctrl+S setiap selesai mengisi satu file.

4. Dicek ulang

Dua blok tidak boleh tercampur di satu file.

Codex bisa membuat file langsung di folder project. Kalau kode hanya muncul di chat, disalin manual per blok — satu blok, satu file.

11

Alur Demo

Urutan praktiknya

1. Folder dibuat

Folder project dibuka di VS Code.

2. AI diminta

Prompt utama dipakai untuk membuat file.

3. Project dijalankan

index.html dibuka lewat Live Server.

4. Hasil dicek

Bagian yang belum pas diperbaiki.

Desain bukan prioritas pertama. Yang dipastikan dulu: web muncul, data terbaca, fungsi tiap file dipahami.

12

Data Produk

Semua data produk ada di satu file.

[ { "nama": "Keripik Pisang Coklat", "harga": 15000, "gambar": "assets/keripik.jpg", "deskripsi": "Camilan renyah." } ]

Saat isi data.json diubah, tampilan katalog ikut berubah — HTML tidak perlu disentuh.

Nama produk
Harga
Gambar
Deskripsi

13

Live Server

Cara membuka project yang benar

Jangan begini

file:///C:/folder/index.html

Terbaca sebagai file biasa; data JSON sering gagal muncul.

Begini yang benar

http://127.0.0.1:5500

Berjalan lewat server lokal; JSON terbaca aman.

Yang dicekAlamat browser mulai http://, bukan file:///.

Sebelum lanjutWeb sudah terlihat muncul di browser.

14

Checkpoint Praktik

Lima hal yang dicek sebelum lanjut

Folder

Satu folder project di VS Code.

File

HTML, CSS, JS, JSON lengkap.

Tampilan

Web muncul di browser.

Produk

Minimal tiga produk tampil.

Kontak

Tombol aksi dan kontak benar.

Yang belum jalan dibereskan dulu, baru masuk revisi.

15

Feedback ke AI

Feedback ke AI harus spesifik.

Kurang membantu

Jelek, ganti.
Bikin lebih bagus.
Kurang menarik.

Lebih membantu

Harga terlalu kecil, buat lebih besar.
Kartu produk terlalu rapat, tambah jarak.
Tombol kurang kontras, ubah warnanya.

BagianBagian yang diperbaiki disebut jelas.

MasalahApa yang terasa kurang.

ArahContoh perubahan yang diinginkan.

16

Prompt Revisi

Revisi dilakukan per bagian, bukan sekaligus.

Perbaiki bagian Hero. Buat judul lebih jelas, tombol lebih menonjol, dan jarak antar elemen lebih lega.

Rapikan kartu produk. Buat gambar konsisten, harga lebih terlihat, dan tombol pesan mudah ditemukan.

Sesuaikan style visual. Buat tampilannya lebih [hangat/elegan/minimalis] dengan warna utama [warna].

Rapikan tampilan HP. Pastikan teks tidak terlalu besar, tombol tidak mepet, dan kartu produk mudah dibaca.

Dipakai setelah hasil pertamaPrompt pendek cukup, asal bagiannya jelas.

Diulang sampai pasUrutan: isi, layout, warna, tampilan HP.

17

Troubleshooting

Masalah umum dan solusinya

AI memakai React atau Tailwind“Ulangi dengan HTML, CSS, JavaScript, dan JSON biasa.”
Data produk tidak muncul“Cek path dan format data.json.”
Dibuka sebagai file biasaDitutup, lalu dibuka ulang lewat Live Server.
Tampilan HP berantakan“Rapikan tampilan untuk layar HP.”
Teks placeholder tertinggal“Hapus semua teks contoh di halaman.”

Prompt yang bagus itu bukan yang panjang, tapi yang jelas.

18

Checklist Akhir

Sebelum project dianggap selesai

File project lengkap.
Web berjalan lewat Live Server.
Data produk muncul dari JSON.
Nama brand dan kontak benar.

Tidak ada teks placeholder.
Tombol aksi terlihat jelas.
Tampilan HP rapi.
Minimal satu bagian kode bisa dijelaskan.

IsiData asli, bukan contoh bawaan AI.

Ukuran selesaiHasil bisa ditunjukkan, perubahan bisa dijelaskan.

19

Mini Challenge

Tiga tantangan terakhir

1

Tambah produk

Satu produk baru ditambahkan di data.json.

2

Ubah tampilan

Warna, jarak, atau kartu produk dirapikan lewat AI.

3

Ceritakan hasil

Bagian yang diubah dijelaskan ulang: apa dan kenapa.

Tujuannya: web bisa diubah sendiri, bukan sekadar menerima hasil AI.

20

Publikasi

Terakhir, webnya dinaikkan ke internet.

1. Akun GitHub

Tempat file project disimpan.

2. Upload project

Semua file masuk ke satu repository.

3. Akun Vercel

Didaftarkan lewat akun GitHub.

4. Deploy

Repository berubah jadi website ber-link.

Kenapa dua layanan? GitHub menyimpan filenya, Vercel yang menyajikannya sebagai website. Keduanya gratis, tanpa install apa pun.

21

Publikasi · Langkah 1

GitHub: menyimpan file project

1

Buat akun

Daftar di github.com, verifikasi lewat email.

2

Buat repository

+ → New repository → beri nama → Create.

3

Upload file

Klik uploading an existing file, seret file ke sana.

4

Simpan

Klik Commit changes.

Yang di-uploadIsi foldernya, bukan foldernya. index.html harus di halaman depan repo.

Pilih PublicPaling sederhana untuk latihan.

22

Publikasi · Langkah 2

Vercel: mengubah repo jadi website

1

Daftar lewat GitHub

Buka vercel.com → Continue with GitHub → Authorize.

2

Buat project

Klik Add New... → Project.

3

Import repository

Cari nama repo tadi, lalu klik Import.

4

Deploy

Klik Deploy, tunggu sekitar satu menit.

HasilnyaLink seperti dapur-rani.vercel.app yang bisa dibagikan ke siapa pun.

Update nantiFile diubah di GitHub, Vercel deploy ulang otomatis.

23

Troubleshooting

Masalah umum saat deploy

Halaman 404 atau kosongindex.html tidak ada di halaman depan repo.
Gambar tidak munculNama file beda huruf besar-kecil dengan yang di data.json.
Data produk kosongCek nama data.json dan path di script.js.
Repo tidak muncul di VercelKlik Adjust GitHub App Permissions.
Perubahan belum terlihatTunggu deploy selesai, lalu refresh Ctrl+F5.

Nama file di server dibaca huruf per huruf. Keripik.jpg dan keripik.jpg dianggap dua file berbeda.

24

Penutup

Mulai dari versi sederhana, diperbaiki bertahap.

Web sudah online. Setelah sesi tinggal dirawat: foto diganti yang asli, produk ditambah, tulisan dirapikan.

Alur yang sama bisa dipakai untuk project berikutnya.

Tambah isiProduk, testimoni, FAQ, atau kontak tambahan.

Perbaikan tampilanWarna, foto, tulisan, tampilan HP.

Cara updateDiubah di GitHub, Vercel memperbarui otomatis.

25

Terima Kasih

Ardi Wolayan

Pemateri · Dev Forge

@ardiwolayan @ardiwolayan

26