Overview Materi Dasar-Dasar PPLG - Semester 2 (Patch Version)
[!IMPORTANT] Target Semester 2: Akselerasi & Produk (8 Pertemuan) Karena waktu semester 2 yang terbatas dan kebutuhan untuk menghasilkan produk nyata (PBL), materi ini dirancang lebih padat namun tetap mematuhi prinsip Single Scope dan Rule 60/40. Fokus utama adalah membangun web statis fungsional yang "layak tampil" dalam waktu kurang dari 10 kali pertemuan.
🛠️ Prinsip Kerja (Offline & Group Mode)
- Offline Mode: Siswa dilarang memegang HP. Belajar murni dari instruksi guru dan kolaborasi kelompok.
- 1 Kelompok = 1 Laptop: Kerjasama tim sangat krusial. Peran (Driver, Navigator, Prompt Engineer, QA) wajib dirotasi setiap pertemuan.
- AI Awareness: Prompting dilakukan melalui perumusan manual di kertas sebelum dieksekusi di laptop.
- Pacing 60/40: 36 menit bimbingan teknis (Hands-on), 24 menit penyelesaian mandiri & debugging.
📅 Materi Pertemuan 1 (Besok): "HTML Skeleton & AI Prompting Strategy"
Fokus: Menghasilkan struktur dasar web yang benar dan melatih nalar bertanya pada AI.
A. Sesi Step-by-Step (36 Menit)
- [10 Menit] Setup & Kerangka: Menjelaskan struktur
! + TABdi VS Code. Menekankan pentingnya tag<title>untuk SEO dan identitas tab browser. - [15 Menit] Konten Utama: Menulis Heading (
h1) untuk nama project dan Paragraf (p) untuk deskripsi singkat. - [11 Menit] AI Strategy: Guru mendemokan cara bertanya yang efektif ke AI. Contoh: "Bagaimana cara membuat teks di HTML menjadi miring?". Siswa mencatat jawaban AI di kertas.
B. Sesi Monitoring & Debugging (24 Menit)
- [15 Menit] Challenge: Tambahkan 3 poin daftar (List) tentang rencana web kelompok kalian menggunakan
<ul>dan<li>. Gunakan AI jika lupa tag-nya. - [9 Menit] QA Session: Membahas kenapa file tidak muncul di browser (biasanya lupa di-save atau file tidak berakhiran
.html).
📌 Roadmap 8 Pertemuan (Semester 2)
| Pertemuan | Topik Utama | Output / Target |
|---|---|---|
| 01 | HTML Skeleton & AI Intro | File index.html dengan struktur dasar, Judul, dan Deskripsi. |
| 02 | Media & Navigation | Menambahkan Gambar (img) dan Link (a) menuju halaman lain/sosmed. |
| 03 | Styling & Box Model | Mewarnai teks/background, mengatur margin & padding agar konten tidak rapat. |
| 04 | Flexbox Layouting | Mengatur letak elemen agar rapi (Contoh: Foto di kiri, Teks di kanan). |
| 05 | JS Interactivity | Membuat Tombol yang bisa "bicara" via alert() dan logika if/else sederhana. |
| 06 | Project Planning (PBL) | Merancang desain web akhir di kertas (Wireframe) & menyiapkan aset (Gambar). |
| 07 | Project Execution | 100% Praktikum membangun web project berdasarkan rancangan. |
| 08 | Launch & Review | Demo web di depan kelas, evaluasi kode, dan perbaikan akhir (Patching). |
🎯 Final Goal
Siswa mampu menghasilkan satu Web Profil atau Katalog Produk Sederhana yang:
- Terstruktur secara semantik (HTML).
- Memiliki estetika visual dasar (CSS).
- Memiliki interaksi sederhana (JS).
- Hasil dari kolaborasi tim dan pemanfaatan AI secara cerdas.