Belajar AI bareng Rahman · Pemula

Bikin Aplikasi Web dengan AI — dari Nol sampai Live

Jalur lengkap untuk non-programmer: pahami HTML/CSS/JS secukupnya, kuasai context & harness engineering, lalu bangun aplikasi React + Next.js + Convex bersama AI dan deploy ke Vercel/Netlify.

17 pelajaranGratisSelf-paced

Lanjutkan di Study with Rahman Lihat pelajaran Semua kelas gratis

Course outline

Pelajaran

Pilih satu materi. Course adalah peta; setiap pelajaran punya halaman dan konteksnya sendiri.

Pelajaran 01

HTML: kerangka halaman

Halaman web = dokumen berstruktur HTML memberi MAKNA pada isi: judul, paragraf, tombol, formulir. Kamu tidak perlu hafal semua tag — kamu perlu bisa MEMBACANYA, karena AI yang akan menulis sebagian besar untukmu. Contoh

Pelajaran 02

CSS: tampilan dan tata letak

CSS mengatur RASA halaman Selector memilih elemen, properti mengubah gayanya: h1 { color: darkgreen; } .kartu { padding: 16px; border radius: 12px; box shadow: 0 2px 8px rgba 0,0,0,.08 ; } Konsep yang paling sering kamu

Pelajaran 03

JavaScript: logika dan interaksi

JS membuat halaman HIDUP Variabel, fungsi, kondisi, perulangan — empat bahan dasar semua logika: const nama = "Rahman"; function sapa siapa { if !siapa return "Halo, teman!"; return "Halo, " + siapa + "!"; } console.log

Pelajaran 04

Kenapa konteks menentukan segalanya

AI hanya sebaik konteksnya Model tidak melihat proyekmu — ia hanya melihat apa yang kamu TEMPELKAN ke percakapan. Context engineering = seni memilih, menyusun, dan menghemat bahan itu. Prinsip praktis 1. Relevan banyak.

Pelajaran 05

Pola konteks untuk proyek nyata

Menyusun "paket konteks" per permintaan Struktur yang terbukti enak dibaca model: PERAN Kamu adalah developer Next.js senior di proyek X. KONTEKS Stack: Next.js + Convex. File terkait: tempel kode ATURAN Ikuti konvensi i

Pelajaran 06

Batas konteks & strategi proyek besar

Saat proyek melebihi satu percakapan Dokumen jangkar : simpan keputusan penting arsitektur, konvensi, glosarium di satu file yang selalu ditempel/diacu di tiap sesi baru. Ringkasan estafet : akhiri sesi dengan "ringkas k

Pelajaran 07

Dari chat ke agent: apa itu harness

Harness = lingkungan + aturan + alat untuk agent Chat biasa: kamu tempel kode, AI membalas teks. Agent : AI yang bisa membaca file proyekmu, menjalankan perintah, mengedit kode, dan mengetes hasilnya sendiri contoh: Clau

Pelajaran 08

Menulis instruksi agent yang efektif

Pola instruksi yang terbukti Peran & misi Kamu agent developer di proyek

Pelajaran 09

Loop kerja bersama agent

Ritme harian yang sehat 1. Rencana kecil — tulis 1 3 tugas jelas. 2. Serahkan ke agent dengan konteks + definisi selesai. 3. Review hasil — baca diff, jalankan aplikasi, uji manual sedikit. 4. Commit bila baik; kembalika

Pelajaran 10

Komponen, props, dan state

UI = fungsi dari data React menyusun antarmuka dari komponen — fungsi yang menerima props masukan dan mengembalikan tampilan: function Salam { nama } { return

Pelajaran 11

Hooks penting & pola sehari-hari

Tiga hook yang menutup 90% kebutuhan useState — data lokal komponen. useEffect — efek samping jarang dibutuhkan bila pakai library data yang reaktif; hati hati menjadikannya tempat fetch . Custom hook — bungkus logika be

Pelajaran 12

Routing & struktur app

File = rute Di Next.js App Router , struktur folder app/ menentukan URL: app/page.tsx → / app/tentang/page.tsx → /tentang app/kelas/ slug /page.tsx → /kelas/apa saja Elemen penting: layout.tsx — bingkai yang membungkus b

Pelajaran 13

Server vs Client Component

Dua dunia dalam satu aplikasi Server Component default : dirender di server; boleh baca database/rahasia; TIDAK bisa pakai useState/onClick. Client Component tandai "use client" di baris pertama : interaktif di browser;

Pelajaran 14

Schema, query, mutation

Tiga pilar Convex Schema — bentuk tabel + index, ditulis di convex/schema.ts . Query — membaca data; otomatis REAKTIF UI ikut berubah saat data berubah . Mutation — menulis data; transaksional. Contoh rasa kodenya: expor

Pelajaran 15

Keamanan: validasi & otorisasi di server

Dua kebiasaan yang tidak boleh ditawar 1. Validasi argumen dengan v. di SETIAP fungsi publik — jangan percaya input client. 2. Cek siapa pemanggilnya auth di awal handler sebelum membaca/menulis data orang. export const

Pelajaran 16

Vercel / Netlify: dari repo ke URL

Alur yang sama di keduanya 1. Push kode ke GitHub . 2. Buka Vercel/Netlify → Import project → pilih repo. 3. Platform mendeteksi Next.js otomatis → Deploy . 4. Setiap push ke branch utama = deploy baru otomatis; preview

Pelajaran 17

Domain, cek terakhir, dan merawat aplikasi live

Sebelum kamu sebarkan link nya Domain : tambah custom domain di dashboard, arahkan DNS A/CNAME sesuai instruksi — HTTPS otomatis. Smoke test : buka halaman utama, login, satu alur inti — di HP juga. Error nyata : cek log