Prompt pertama: "Halo, Kedai Kopi Rimbun" jalan di localhost
(01)Mengirim prompt pertama yang membuat dan menjalankan proyek Next.js
Jalur Software Engineering · Kelas
Vibe coding:landing page kedai kopibareng Claude.
Tanpa pengalaman ngoding. Claude yang menulis kodenya, kamu yang mengarahkan.
Cuplikan modul01 / 06
Modul 1 · Dari Ide ke Halaman Pertama
Programming, vibe coding, cara website sampai ke browser, dan halaman Kedai Kopi Rimbun pertama.
Belajar membuat landing page sungguhan tanpa menulis kodenya sendiri. Kamu ikut Nadia, admin sebuah kedai kopi di Yogyakarta, mengarahkan Claude membangun website kedai: dari ide, desain, section demi section, sampai online di Vercel.
- 6
Dari nol sampai website yang bisa dibuka siapa saja
modul - 33
Setiap materi punya satu hasil yang jelas
materi - ±5
Waktu baca 6–13 menit per materi, belum termasuk mencoba di Claude
jam waktu baca - 31
Prompt nyata yang sudah dijalankan di proyek contoh
tantangan interaktif
Yang akan kamu pakai
- Claude
- Next.js
- Git
- GitHub
- Vercel
Kurikulum
Tiga fase belajar
Fase 01 · Fondasi
Kamu paham cara website bekerja dan sudah punya halaman pertama yang dibuat bareng Claude.
Apa itu programming, cara website bekerja, lalu halaman pertama yang dibuat Claude untukmu.
- Dari Ide ke Halaman Pertama
- Bekerja Bareng Claude
2 modul · 10 materi · ±1 jam bacaMulai fase Fondasi
Fase 02 · Membangun Landing Page
Kamu bisa merancang, membangun, dan memoles landing page yang cepat dan mudah ditemukan.
Rancang halaman yang menjual, bangun section demi section, lalu poles sampai cepat dan mudah ditemukan.
- Merancang Sebelum Membangun
- Membangun Section demi Section
- Dari Bagus ke Terbaik
3 modul · 17 materi · ±3 jam bacaMulai fase Membangun Landing Page
Fase 03 · Online
Kamu punya website yang online di Vercel, tahu cara memasang domain sendiri, dan tahu cara merawatnya.
Pahami peta internet dari domain sampai server, lalu onlinekan Kedai Kopi Rimbun.
- Arsitektur Web & Rilis
1 modul · 6 materi · ±1 jam bacaMulai fase Online
Cara belajar
Empat langkah.Sama di setiap materi.
- 01
Baca idenya
Satu konsep per materi, dijelaskan pelan-pelan dengan contoh dari Kedai Kopi Rimbun.
Kamu dapatGambaran yang jelas sebelum mulai - 02
Coba di Claude
Salin prompt dari materi, jalankan di Claude, dan lihat sendiri apa yang terjadi di komputermu.
Kamu dapatPengalaman mengarahkan Claude langsung - 03
Cek hasilnya
Baca perubahan yang dibuat Claude dan pastikan hasilnya sesuai yang kamu minta.
Kamu dapatKebiasaan memeriksa sebelum menerima - 04
Kerjakan tugas
Setiap materi ditutup dengan tugas kecil dan lima soal pilihan ganda.
Kamu dapatSatu langkah nyata untuk websitemu
Nadia diKedai Kopi Rimbun
1
proyek yang sama, dari modul 1 sampai 6
- Materi 1.1
“Mas, vibe coding itu beneran bisa? Aku nggak ngerti kode sama sekali.”
NadiaAdmin Kedai Kopi Rimbun - Materi 2.4
“Lihat, Nad. Tiga orang nanya alamat minggu ini. Taruh alamat kita di website, ya.”
Bu RatnaPemilik kedai - Materi 1.1
“Tulis dulu website ini harus bisa apa. Bukan warnanya, bukan fotonya. Gunanya.”
Mas DimasWeb developer freelance
- Materi 1.5
“Baru di laptop ini. Tapi sudah jalan.”
NadiaAdmin Kedai Kopi Rimbun - Materi 5.2
“Laptopmu bukan HP mereka. Jangan ditebak. Kita ukur.”
Mas DimasWeb developer freelance - Materi 6.6
“Nad, bulan depan Es Kopi Pandan kayaknya naik. Ibu bisa ganti sendiri nggak di website, tanpa nunggu kamu?”
Bu RatnaPemilik kedai
Website kedaiyang benar-benar online.
Di akhir kelas, kamu punya landing page yang bisa dibuka siapa saja lewat alamat Vercel-mu, lengkap dengan menu, lokasi, tombol pesan, dan checklist rilis.
halo@lpe-learners.id