Jadwal SPS
https://docs.google.com/spreadsheets/d/1Eb5EtdO1uFi4FZ7M8PL4y7t07N7DvqyBueB3-7lBHLM/edit?usp=sharing
| Hari | Waktu | Sesi | Aktivitas Belajar & Fokus 🎯 | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Hari 1 | 04:30-05:30 | #1 | Setup & Pengenalan HTML: Siapkan code editor (VS Code) & pelajari tag HTML dasar (<html>, <head>, <body>, <h1>, <p>). | |||||||||||||
| 08:00-11:30 | #2 | Struktur Dasar HTML: Pelajari tentang list (<ul>, <ol>), link (<a>), gambar (<img>), dan struktur halaman semantik (<header>, <main>, <footer>). | ||||||||||||||
| 12:30-14:30 | #3 | HTML Forms: Fokus pada elemen form (<form>, <input>, <label>, <button>). Ini krusial untuk interaksi pengguna. | ||||||||||||||
| 16:00-17:00 | #4 | Review HTML: Ulangi semua materi HTML yang sudah dipelajari. | ||||||||||||||
| 19:30-21:30 | #5 | Latihan HTML: Buat struktur halaman profil atau resep makanan sederhana hanya dengan HTML. | ||||||||||||||
| Hari 2 | 04:30-05:30 | #1 | Pengenalan CSS: Cara kerja CSS, cara menghubungkan ke HTML, dan sintaks dasar (selector, property, value). | |||||||||||||
| 08:00-11:30 | #2 | Styling Dasar CSS: Fokus pada properti umum: color, background-color, font-size, font-family, text-align. | ||||||||||||||
| 12:30-14:30 | #3 | CSS Box Model: Materi SANGAT PENTING. Pahami konsep margin, padding, border, dan content. | ||||||||||||||
| 16:00-17:00 | #4 | Latihan Box Model: Buat kotak-kotak dengan berbagai ukuran margin dan padding. | ||||||||||||||
| 19:30-21:30 | #5 | Styling Proyek HTML: Beri style pada proyek HTML dari Hari 1 menggunakan semua ilmu CSS yang sudah didapat. | ||||||||||||||
| Hari 3 | 04:30-05:30 | #1 | Pengenalan Figma: Pahami antarmuka Figma, cara membuat frame, shape, dan teks. | |||||||||||||
| 08:00-11:30 | #2 | Desain Sederhana di Figma: Coba desain satu halaman landing page simpel. Fokus pada tata letak, bukan detail yang rumit. | ||||||||||||||
| 12:30-14:30 | #3 | Layout CSS: Flexbox (Part 1): Pelajari konsep dasar Flexbox untuk mengatur tata letak elemen secara horizontal atau vertikal. | ||||||||||||||
| 16:00-17:00 | #4 | Latihan Flexbox: Buat layout navbar dan galeri gambar sederhana. | ||||||||||||||
| 19:30-21:30 | #5 | Menerjemahkan Figma ke HTML/CSS: Coba implementasikan sebagian desain Figma-mu ke dalam kode HTML dan CSS (gunakan Flexbox). | ||||||||||||||
| Hari 4 | 04:30-05:30 | #1 | Review Flexbox: Ulangi konsep Flexbox. | |||||||||||||
| 08:00-11:30 | #2 | Layout CSS: CSS Grid (Part 1): Pelajari dasar-dasar CSS Grid untuk membuat layout berbasis baris dan kolom yang kompleks. | ||||||||||||||
| 12:30-14:30 | #3 | Responsive Design dengan Media Queries: Pelajari cara membuat tampilan website beradaptasi di berbagai ukuran layar (desktop, tablet, HP). | ||||||||||||||
| 16:00-17:00 | #4 | Latihan Media Queries: Buat layout dari sesi pagi menjadi responsive. | ||||||||||||||
| 19:30-21:30 | #5 | Mini Project #1: Buat ulang landing page sederhana dari internet. Fokus pada layout responsive (Flexbox/Grid). | ||||||||||||||
| Hari 5 | 04:30-05:30 | #1 | Pengenalan JavaScript: Apa itu JS? Cara menghubungkan ke HTML. Tulis "Hello World" pertamamu. | |||||||||||||
| 08:00-11:30 | #2 | Dasar-Dasar JavaScript: Variabel (let, const), Tipe Data (String, Number, Boolean), Operator, dan Conditional (if/else). | ||||||||||||||
| 12:30-14:30 | #3 | JavaScript DOM Manipulation (Part 1): Cara memilih elemen HTML (getElementById, querySelector) dan mengubah isinya (.innerHTML, .textContent). | ||||||||||||||
| 16:00-17:00 | #4 | Latihan DOM: Buat tombol yang saat diklik bisa mengubah teks di sebuah paragraf. | ||||||||||||||
| 19:30-21:30 | #5 | JavaScript Events: Pelajari event listener (.addEventListener) untuk merespons aksi pengguna seperti click, mouseover, dll. | ||||||||||||||
| Hari 6 | 04:30-05:30 | #1 | Review DOM & Events: Ulangi materi JS kemarin. | |||||||||||||
| 08:00-11:30 | #2 | Mini Project #2: Buat dark/light mode toggle. Gabungkan HTML, CSS, dan JS untuk mengubah warna background dan teks. | ||||||||||||||
| 12:30-14:30 | #3 | Pengenalan Git & GitHub: Apa itu Git? Buat akun GitHub. Install Git. | ||||||||||||||
| 16:00-17:00 | #4 | Alur Kerja Dasar Git: git init, git add ., git commit -m "pesan". | ||||||||||||||
| 19:30-21:30 | #5 | Push ke GitHub: Pelajari git remote add origin dan git push. Masukkan Mini Project #2 ke repository GitHub-mu. | ||||||||||||||
| Hari 7-8 | - | - | Fokus Proyek Latihan: Implementasikan desain Figma dari Hari 3 sepenuhnya. Buat menjadi full responsive dan tambahkan interaktivitas JS (misal: popup modal, image slider sederhana). Gunakan Git untuk setiap perubahan. | |||||||||||||
| Hari 9 | - | - | GitHub Projects & Deployment: Pelajari fitur Projects di GitHub untuk manajemen tugas. Coba deploy proyek latihanmu ke server gratisan seperti Netlify atau Vercel (sangat mudah, tinggal hubungkan akun GitHub). | |||||||||||||
| Hari 10-12 | - | - | Review & Persiapan Akhir: Ulangi materi yang masih kurang dipahami. Coba perbaiki proyek latihanmu. Siapkan mental dan strategi untuk lomba. |