Paling banyak satu email per minggu. Berhenti kapan saja dengan satu klik.
Transkrip
Narasi lengkap video ini. Kalimat yang sedang diucapkan disorot saat video diputar; klik kalimat untuk melompat ke sana.
Tampilkan transkrip
Pembuka
Halo, selamat datang di sesi Membangun Web dengan Claude Code. Semua persiapan sudah lengkap, dan sekarang waktunya membangun halaman yang sungguhan. Di episode ini Raka membuat landing page Kopi Senja: menyusun brief, menyetujui rencana, melihat hasilnya di browser, merevisi tampilan, dan menyimpan versi pertama.
Langkah 1: Brief dan rencana
Raka menyusun brief dengan empat unsur. Pertama, tujuan: halaman utama Kopi Senja yang mengajak pengunjung memesan lewat WhatsApp. Kedua, konteks. Raka tidak perlu menulis ulang harga dan jam buka, cukup bilang bahwa semuanya ada di CLAUDE.md, dan bahan ada di folder bahan. Ketiga, tugas: lima bagian sesuai rencana kemarin, yaitu pembuka dengan foto produk satu, menu, cerita, testimoni, dan kontak. Keempat, batasan: satu halaman saja, tanpa layanan berbayar, dan yang paling penting, rencanakan dulu, jangan menulis file sebelum disetujui. Raka mengirim brief itu ke Claude Code, lengkap dengan permintaan untuk merencanakan dulu. Untuk pekerjaan sebesar ini, mode rencana juga bisa dipakai. Claude menjawab dengan rencana: file index untuk isi halaman, file style untuk warna dan tata letak, serta folder gambar. Claude juga menyebut bahwa tombol pesan mengikuti aturan WhatsApp di CLAUDE.md. Rencananya masuk akal dan tidak ada file lain yang disentuh. Raka menjawab singkat: setuju, kerjakan.
Langkah 2: Claude membangun halaman
Claude mulai bekerja. Pertama, ia menulis file index sepanjang sembilan puluh enam baris. File inilah yang berisi teks dan susunan halaman. Kotak izin muncul. Nama filenya sesuai rencana, jadi Raka memilih Yes. Kedua, Claude menulis file style. Isinya aturan tampilan: warna, ukuran huruf, dan jarak antarbagian. Izin kedua juga disetujui, karena tetap sesuai rencana. Bila tiba-tiba muncul nama file yang tidak ada di rencana, itulah saatnya berhenti dan bertanya. Ketiga, Claude menyalin foto produk satu ke folder gambar. Fotonya disalin, bukan dipindahkan, sehingga bahan asli tetap utuh. Terakhir, ringkasan tiga poin sesuai aturan kerja di CLAUDE.md: lima bagian dengan harga resmi, warna merek, dan foto pembuka. Raka cukup membaca tiga baris ini untuk tahu apa yang terjadi. Supaya tidak bingung, kenali peta file proyek. File index berisi isi halaman: teks, menu, dan tombol. Kalau ingin mengubah tulisan, perubahannya ada di sini. File style mengatur tampilan: warna, jenis dan ukuran huruf, serta jarak. Kalau ingin mengubah warna, perubahannya ada di sini. Folder gambar menyimpan foto yang tampil di halaman. Bila Laras ingin mengganti foto pembuka, cukup ganti file di folder ini lalu minta Claude menyesuaikan namanya. Dan CLAUDE.md adalah catatan untuk Claude. File ini tidak tampil di website. Dengan peta ini, kita bisa membaca kotak izin dan langsung tahu bagian mana yang berubah.
Langkah 3: Memeriksa hasil di browser
Raka membuka file index dengan klik dua kali, dan halamannya tampil di browser. Di panel kanan ia mencatat hasil pemeriksaan. Pertama, judul, jam buka, dan info ongkir sudah tampil. Kedua, harga di kartu menu sesuai CLAUDE.md. Delapan belas ribu, delapan puluh lima ribu, dan lima puluh lima ribu. Hampers ada di bawah setelah digulir. Ketiga, Raka mengeklik tombol pesan, dan WhatsApp usaha terbuka. Bagian terpenting halaman ini berfungsi. Tetapi ada satu catatan: warnanya terlalu pucat dan judulnya kurang menonjol. Tidak sesuai warna cokelat kopi dan krem yang diminta Laras. Selain memeriksa sendiri, Raka meminta Claude ikut memeriksa: apakah semua harga dan jam buka di halaman sama dengan CLAUDE.md, dan apakah ada salah ketik. Perhatikan kalimat terakhirnya: jangan ubah dulu, laporkan saja. Claude memakai Grep untuk mencari semua harga dan jam buka di file index, lalu mencocokkannya satu per satu dengan catatan di CLAUDE.md. Laporannya: keempat harga dan jam buka sudah sama. Tetapi ada satu salah ketik di bagian kontak, tertulis Bandug tanpa huruf n. Claude bertanya dulu sebelum memperbaiki. Raka menjawab: ya, perbaiki salah ketik itu saja. Batasan kecil ini mencegah Claude ikut mengubah hal lain. Kotak perubahannya hanya satu baris merah dan satu baris hijau. Tanda kurung sudut p adalah penanda paragraf, dan yang berubah hanya kata Bandung. Raka menyetujuinya. Dua pasang mata, manusia dan Claude, lebih teliti daripada satu. Biasakan memakai daftar periksa yang sama setiap kali melihat hasil. Pertama, semua bagian sesuai rencana sudah tampil. Kedua, harga, jam buka, dan ongkir cocok dengan data resmi. Jangan percaya begitu saja walaupun sudah ada CLAUDE.md. Ketiga, setiap tombol dan tautan dicoba, bukan hanya dilihat. Keempat, tidak ada salah ketik, terutama di judul dan nama menu. Kelima, warna dan huruf sesuai gaya merek. Poin kelima inilah yang belum lolos, jadi kita perbaiki sekarang.
Langkah 4: Revisi tampilan
Raka meminta revisi dengan menyebut masalah dan hasil yang diharapkan: warna terlalu pucat, pakai cokelat kopi dan krem, dan buat judul lebih besar serta tebal. Claude memakai Edit pada file style, karena urusan warna memang ada di sana. File index tidak disentuh. Mari baca garis besarnya. Baris merah pertama adalah warna latar lama, abu-abu terang. Baris hijau menggantinya dengan warna krem. Kode warna diawali tanda pagar; kita tidak perlu menghafalnya. Baris berikutnya mengubah judul: warnanya menjadi cokelat kopi, ukurannya dari tiga puluh dua menjadi empat puluh empat, dan hurufnya ditebalkan. Sesuai permintaan, jadi Raka memilih Yes. Ringkasan menegaskan tiga hal: latar krem, judul cokelat yang lebih menonjol, dan file index tidak diubah. Raka memuat ulang halaman di browser. Sekarang harga tampil dengan warna cokelat kopi dan suasananya lebih hangat. Poin yang tadinya gagal kini lolos. Raka mengirim tangkapan layar ke Laras lewat WhatsApp, dan Laras menyetujuinya sebagai versi pertama. Tampilan di video ini simulasi; hasil Anda bisa sedikit berbeda karena setiap kali Claude menulis, hasilnya tidak selalu sama persis.
Langkah 5: Menyimpan versi pertama
Halaman sudah disetujui, jadi Raka menyimpan versinya. Ia meminta Claude memakai git dengan catatan: landing page versi pertama disetujui Laras. Git adalah alat pencatat versi. Bayangkan seperti memotret seluruh isi folder, lalu memberi keterangan di belakang fotonya. Claude yang menjalankan perintahnya. Karena ini menjalankan perintah, kotak izin muncul. Raka membaca isinya, yaitu membuat catatan versi di folder ini, lalu memilih Yes. Versi pertama tersimpan. Bila revisi berikutnya keliru, kita bisa meminta Claude kembali ke versi ini. Bila belum nyaman dengan git, menyalin folder proyek sebagai cadangan juga sudah cukup. Mari rangkum polanya. Mulai dari brief yang memuat tujuan, isi, gaya, dan batasan. Lalu rencana yang disetujui dulu sebelum ada file yang dibuat. Lima detik membaca rencana bisa menghemat puluhan menit revisi. Kemudian periksa hasilnya di browser dengan daftar periksa yang sama, dan minta revisi satu per satu. Terakhir, simpan versi setiap kali hasilnya disetujui. Coba pola ini untuk usaha Anda sendiri, mulai dari brief satu paragraf.
Selesai!
Landing page Kopi Senja versi pertama sudah jadi dan disetujui Laras: foto pembuka, menu, cerita, testimoni, kontak, dengan warna cokelat kopi dan krem. Di episode berikutnya kita menambah fitur baru ke halaman ini dan belajar melaporkan serta memperbaiki bug bersama Claude. Sampai jumpa!
Latihan mandiri
Kerjakan sendiri setelah menonton supaya materinya benar-benar melekat.
Tulis brief landing page usaha Anda dengan tujuan, isi, gaya, dan batasan
Minta Claude merencanakan dulu, lalu setujui sebelum file dibuat
Periksa hasilnya di browser dan minta satu revisi tampilan
Tanya materi kelas
Ketik pertanyaan atau kata kunci; kami carikan bagian episode ini yang menjelaskannya dan lompatkan videonya ke sana.
Catatan saya
Catatan disimpan bersama menit video saat ini dan hanya terlihat oleh Anda.
Tanya jawab
Bingung di salah satu langkah? Tanyakan di sini; pengajar dan peserta lain bisa menjawab.
Belum ada pertanyaan.
Pengajar
Tim Cerdas Inovasi Digital
Pengembang software, engineer BIM & 3D, dan praktisi AI
53 kelas video1.281 episode
Sehari-hari kami mengerjakan software, model BIM, game, dan otomasi AI untuk klien, lalu menjadikan pengalaman praktik itu kelas langkah demi langkah: setiap langkah diperlihatkan di layar dan dilengkapi panduan PDF.
