W3 Understanding Software & First Build

Objectives

• Pahami struktur software (frontend, backend, database)
• Build multi-page website pertama
• Paham version control dan auto-deploy

Pre-work

Materi	Format	Durasi
Frontend vs backend vs database (analogi restoran)	Artikel	15 min
File & folder — code = organized text files	Artikel	10 min
API — gimana frontend ngobrol sama backend	Artikel	15 min
Prompt engineering: Context + Task + Format + Constraints	Artikel	20 min

Konsep: Frontend, Backend & Database

↻ Replay

Bayangkan restoran:

• Frontend = Ruang makan. Apa yang dilihat dan diinteraksi tamu. Menu, meja, dekorasi.
• Backend = Dapur. Tempat pesanan diproses. Tamu tidak lihat, tapi di sinilah makanan dibuat.
• Database = Gudang bahan baku. Tempat semua data disimpan — stok, resep, histori pesanan.

API adalah pelayan yang membawa pesanan dari ruang makan ke dapur, dan membawa makanan balik ke meja.

Live Session

0-15 min

Frontend vs backend vs database — analogi mendalam

15-35 min

Multi-page app: Home, Problem, Solution, Contact

35-55 min

Styling via Tailwind CSS + AI — tanpa hafal class

55-70 min

Git & GitHub — version control as safety net

70-90 min

Auto-deploy: push GitHub → Cloudflare Pages live

Guided Questions

✎

Guided Question

Buka 1 website favorit. Tebak: bagian mana yang frontend? Data apa di database? Backend ngapain di belakang layar?

Tulis jawabanmu di Obsidian vault.

✎

Guided Question

Tulis 1 prompt pakai format CTFC (Context, Task, Format, Constraints). Topik bebas.

Tulis jawabanmu di Obsidian vault.

Post-work

Progress0/2

Multi-page website live + auto-deploy dari GitHubProduct docs — mulai Obsidian note: apa yang app kamu lakuin, siapa user-nya, tech stack apa

Output: Kamu paham struktur software. Website live dengan auto-deploy. Product docs pertama sudah ditulis.