DIGITALLS LEARN / PANDUAN GRATIS
Tidak harus langsung jago coding. Mulai dari satu aplikasi kecil, belajar menyusun instruksi, lalu pahami dan kembangkan hasilnya selangkah demi selangkah.
7 video YouTube · Bahasa Indonesia · 6 langkah praktik
PROYEK PERTAMAMU
Ilustrasi hasil yang akan kamu buat
HTML + CSS + JAVASCRIPT
WATCH · BUILD · REPEAT
Pilihan tutorial berbahasa Indonesia. Mulai dari video singkat, jeda saat praktik, lalu lanjutkan ke proyek yang lebih lengkap.
Gemini + Apps Script
Oleh NANANG SRIYADI
Pengenalan singkat dari prompt hingga instalasi aplikasi dengan Google Apps Script dan Gemini.
Coba setelah menonton
Catat urutan dari menulis prompt sampai menjalankan hasilnya. Coba ulangi dengan ide aplikasi sederhana milikmu.
Aplikasi web
Oleh MASYAWI ID
Tutorial langkah demi langkah membuat aplikasi web menggunakan bantuan AI dan Google Apps Script.
Coba setelah menonton
Ikuti satu proyek sampai bisa dijalankan. Setelah berhasil, ubah judul atau satu fitur kecil dan uji ulang.
Aplikasi & website
Oleh Ridwan Tamami
Demo pembuatan aplikasi dan website dengan bantuan AI, sebagai referensi untuk mencoba alur kerja lain.
Coba setelah menonton
Pisahkan langkah menyusun ide, menghasilkan aplikasi, dan menguji hasilnya. Luangkan waktu praktik sesuai kebutuhanmu, bukan mengikuti klaim kecepatan pada judul.
UI ke full-stack
Oleh Raf Dev
Demo menggunakan Google Stitch untuk desain UI dan Antigravity untuk membangun aplikasi full-stack, termasuk perencanaan kebutuhan produk.
Coba setelah menonton
Pelajari setelah mencoba proyek sederhana. Catat perbedaan desain antarmuka, frontend, dan backend sebelum meniru proyek penuh.
Video milik masing-masing kreator dan diputar melalui YouTube. Jika pemutar tidak tersedia, gunakan tombol Buka di YouTube. Tampilan alat, kuota gratis, dan harga layanan yang dibahas dapat berubah.
Lanjut ke panduan tertulis dan prompt latihan ↓BUILD YOUR FIRST AI CHATBOT
Pilih jalur belajarmu: chatbot berbasis dokumen tanpa coding, bot toko online dengan n8n, atau chatbot lokal menggunakan Python. Ketiganya proyek terpisah; mulai dari yang sesuai kebutuhanmu.
Chatbot dengan data sendiri
Oleh Creative Academy Indonesia
Pengenalan membuat chatbot AI tanpa coding yang dapat menjawab berdasarkan data internal. Cocok untuk mulai mengeksplorasi chatbot berbasis dokumen.
Coba setelah menonton
Siapkan dokumen FAQ contoh berisi 5 pertanyaan dan jawaban. Uji pertanyaan yang ada di dokumen serta pertanyaan di luar data, lalu periksa apakah bot mengarang jawaban.
n8n + Telegram + Google Sheets
Oleh Bang Tutorial
Tutorial chatbot toko online dengan alur otomasi n8n, antarmuka Telegram, dan data dari Google Sheets.
Coba setelah menonton
Buat katalog contoh di Google Sheets. Uji pertanyaan harga dan ketersediaan lewat bot Telegram, lalu ubah data produk dan cek apakah jawabannya mengikuti data terbaru.
Ollama + DeepSeek + Flask
Oleh Kelas Terbuka
Panduan membangun chatbot menggunakan Ollama, DeepSeek, Flask, dan Bootstrap. Cocok setelah mengenal dasar Python dan aplikasi web; model lokal membutuhkan perangkat yang memadai.
Coba setelah menonton
Jalankan chatbot lokal dan telusuri alur pesan dari antarmuka ke server lalu ke model. Uji pesan kosong dan kondisi model tidak tersedia agar aplikasi memberi respons yang jelas.
Video milik masing-masing kreator dan diputar melalui YouTube. Jika pemutar tidak tersedia, gunakan tombol Buka di YouTube. Tampilan alat, kuota gratis, dan harga layanan yang dibahas dapat berubah.
Bot dapat menjawab dari data contoh, menyatakan jika jawaban tidak tersedia, dan menampilkan pesan yang jelas saat layanan AI gagal. Gunakan data latihan; simpan API key atau token bot pada konfigurasi server atau credentials alat yang digunakan, bukan di halaman web.
SEBELUM MULAI
Gunakan ChatGPT, Claude, Gemini, atau asisten coding pilihanmu. Mulai dengan akses yang sudah kamu punya; paket berbayar tidak wajib.
Laptop, browser, dan editor seperti VS Code sudah cukup. Jika memakai HP, editor HTML online bisa membantu, meski mengetik dan debugging lebih nyaman di laptop.
Siapkan sekitar 1,5–2 jam, boleh dicicil. Materi ini memakai satu proyek berurutan; lanjutkan percakapan AI yang sama atau sertakan kode terbaru.
LEARN BY BUILDING
Buka setiap materi, praktikkan, lalu gunakan hasilnya untuk langkah berikutnya.
Estimasi 10 menit · Buka / tutup materi
Proyek pertama kita adalah aplikasi daftar tugas pribadi. Targetnya kecil dan jelas: mencatat hal yang perlu dikerjakan hari ini. Hindari menambah login atau pembayaran sebelum fungsi dasarnya berjalan.
Jadilah mentor pemrograman untuk pemula. Saya ingin membuat aplikasi daftar tugas pribadi menggunakan HTML, CSS, dan JavaScript tanpa framework. Fitur inti: tambah tugas, tandai selesai, hapus tugas, dan simpan di localStorage. Buat rencana sederhana, struktur data tugas, dan kriteria keberhasilan. Jangan tulis kode dulu. Jelaskan istilah teknis dengan bahasa Indonesia yang mudah dipahami.
Baca dulu, lalu sesuaikan dengan kebutuhanmu.
Target langkah ini
Kamu punya daftar fitur dan tahu seperti apa aplikasi yang dianggap selesai.
Estimasi 20–30 menit · Buka / tutup materi
Gunakan satu file agar mudah dicoba. HTML membentuk isi halaman, CSS mengatur tampilannya, dan JavaScript mengatur perilakunya. AI membantu menulis, tetapi kamu tetap perlu membaca dan menjalankan hasilnya.
Lanjutkan rencana aplikasi daftar tugas tadi. Buat kode lengkap satu file index.html dengan HTML, CSS, dan JavaScript di dalamnya, tanpa library eksternal. Sertakan form tambah tugas, checkbox selesai, tombol hapus, jumlah tugas belum selesai, dan kondisi daftar kosong. Simpan tugas di localStorage dengan penanganan data rusak atau penyimpanan tidak tersedia. Gunakan ID unik, label form yang jelas, dan textContent untuk menampilkan input pengguna. Tolak input kosong. Desain responsif dan bisa dipakai dengan keyboard. Berikan kode lengkap dan cara menjalankannya di browser.
Baca dulu, lalu sesuaikan dengan kebutuhanmu.
Target langkah ini
Aplikasi dapat dibuka dan kamu bisa menambahkan tugas pertama.
Estimasi 15 menit · Buka / tutup materi
Jangan hanya menekan tombol salin. Minta AI menjelaskan bagian penting, lalu lakukan satu perubahan kecil sendiri. Kemampuan memahami alur lebih berguna daripada menghafal sintaks.
Jelaskan kode aplikasi tugas yang baru dibuat. Telusuri alur dari pengguna mengetik tugas, mengirim form, pembaruan array, penyimpanan localStorage, sampai tampilan diperbarui. Tunjukkan fungsi yang terlibat. Jelaskan perbedaan data di memori dan data tersimpan. Beri saya 3 latihan kecil beserta petunjuk, tanpa langsung memberikan jawabannya.
Baca dulu, lalu sesuaikan dengan kebutuhanmu.
Target langkah ini
Kamu bisa menjelaskan alur tambah tugas dan mengubah tampilan sederhana.
Estimasi 15–20 menit · Buka / tutup materi
Kode dari AI belum tentu langsung benar. Uji hasilnya, bukan hanya tampilannya. Saat ada error, kirim langkah reproduksi, hasil yang diharapkan, dan pesan error yang benar-benar muncul.
Bantu debug aplikasi tugas saya. Langkah reproduksi: [tulis langkah yang saya lakukan] Hasil yang diharapkan: [tulis hasil yang benar] Hasil aktual: [tulis masalah yang muncul] Pesan error Console: [tempel pesan lengkap, atau tulis tidak ada] Kode terkait: [tempel kode] Cari akar masalah berdasarkan bukti ini. Jika informasinya kurang, tanyakan dulu. Berikan perbaikan sekecil mungkin, jelaskan alasannya, lalu berikan langkah pengujian ulang. Jangan mengubah fitur lain yang sudah berjalan.
Baca dulu, lalu sesuaikan dengan kebutuhanmu.
Target langkah ini
Fitur inti lolos pengujian dan kamu tahu cara melaporkan bug dengan jelas.
Estimasi 15–20 menit · Buka / tutup materi
Setelah fungsinya stabil, rapikan jarak, hierarki teks, dan umpan balik tombol. Tampilan bagus membuat pengguna tahu apa yang bisa dilakukan dan apa yang baru terjadi.
Rapikan aplikasi tugas ini tanpa mengubah alur penyimpanan yang sudah benar. Gunakan latar ivory, teks charcoal, aksen violet, kartu bersudut lembut, dan layout yang nyaman pada lebar 360px maupun desktop. Tambahkan filter Semua, Aktif, dan Selesai. Pertahankan label form, fokus keyboard yang terlihat, dan kontras teks yang mudah dibaca. Tunjukkan bagian kode yang berubah dan beri checklist pengujian regresi. Berikut kode terbaru saya: [tempel kode].
Baca dulu, lalu sesuaikan dengan kebutuhanmu.
Target langkah ini
Aplikasi nyaman dipakai di HP dan desktop, dengan filter yang berfungsi.
Estimasi 15–30 menit · Buka / tutup materi
Aplikasi satu file ini bisa dipasang di hosting statis, misalnya GitHub Pages. Setelah online, ulangi pengujian menggunakan URL publik. Data localStorage hanya tersimpan di browser dan origin yang sama, bukan tersinkron ke semua perangkat.
Saya sudah punya aplikasi HTML/CSS/JavaScript satu file index.html dan ingin menerbitkannya di GitHub Pages. Bimbing saya langkah demi langkah dari membuat repository sampai membuka URL publik. Jelaskan cara memastikan index.html ada di root dan cara melihat status deployment. Bantu saya mengecek kasus halaman 404. Jelaskan juga mengapa localStorage tidak tersinkron lintas perangkat dan mengapa data dari file lokal tidak muncul pada domain baru.
Baca dulu, lalu sesuaikan dengan kebutuhanmu.
Target langkah ini
Kamu punya tautan aplikasi yang bisa dibagikan dan memahami batasan penyimpanannya.
Checklist hanya untuk sesi belajar ini; progres tidak disimpan saat halaman dimuat ulang.
PROMPT YANG LEBIH JELAS
Pakai pola tujuan + pengguna + fitur + batasan + kriteria berhasil. Minta perubahan kecil agar hasilnya lebih mudah diperiksa. Gunakan data contoh saat belajar, dan simpan kunci API di server jika nanti aplikasimu terhubung ke layanan berbayar.
TERLALU UMUM
“Buatkan aplikasi yang bagus.”
LEBIH TERARAH
“Buat aplikasi tugas pribadi satu file HTML. Bisa tambah, selesai, hapus, dan simpan lokal. Harus bisa dipakai pada layar 360px dan tetap menyimpan tugas setelah refresh.”
Tidak harus. Ikuti proyek sederhana ini sambil belajar membaca kode. AI membantu menulis, tetapi hasilnya tetap perlu kamu pahami dan uji.
Tidak. Di sini AI berperan sebagai pendamping saat membuat aplikasi. Mengintegrasikan chatbot atau model AI ke aplikasi adalah tahap lanjutan yang membutuhkan API dan biasanya backend.
Proyek ini memakai localStorage, yaitu penyimpanan lokal per browser dan origin. Untuk sinkronisasi pengguna lintas perangkat, kamu perlu mempelajari backend, database, dan autentikasi.
Coba pisahkan HTML, CSS, dan JavaScript menjadi beberapa file. Pelajari Git untuk riwayat perubahan, lalu lanjut ke database dan backend sebelum membuat aplikasi multi-pengguna.