Silabus Master Class Pemrograman Web (3 Hari, 9:00 – 16:00)
⏳ Durasi: 3 Hari
Jam: 09:00 – 16:00 (Istirahat 12:00 – 13:00)
Tujuan: Menguasai pemrograman web dari dasar hingga tingkat lanjutan dengan proyek nyata.
Hari 1 – Fundamental Web Development
09:00 – 10:30 | Pengenalan & Setup Lingkungan
- Pengantar pemrograman web (HTML, CSS, JavaScript, Backend, Database)
- Alur kerja pengembangan web (Front-end vs. Back-end vs. Full-stack)
- Instalasi dan setup alat:
- Editor: VS Code, Extensions
- Version Control: Git & GitHub
- Package Manager: Node.js & NPM
- Struktur dasar HTML5 & praktik pembuatan halaman sederhana
10:30 – 12:00 | Styling dengan CSS & Responsive Design
- CSS Basics: Selector, Box Model, Flexbox, Grid Layout
- Responsive Web Design: Media Queries, Mobile-first design
- Framework CSS: Bootstrap & Tailwind CSS
- Hands-on: Membangun halaman web responsif
12:00 – 13:00 | ISTIRAHAT
13:00 – 14:30 | JavaScript Dasar & DOM Manipulation
- JavaScript Basics: Variabel, Tipe Data, Loop, Function
- DOM Manipulation: Event Listener, Query Selector, ClassList
- Project Mini: Membuat To-Do List dengan JavaScript
14:30 – 16:00 | Git & Deploy Website
- Git & GitHub Workflow: Commit, Push, Pull Request
- Hosting Website Static: GitHub Pages, Netlify, Vercel
- Praktik: Deploy halaman web pertama
Hari 2 – Front-end Development & Interaktivitas
09:00 – 10:30 | Advanced JavaScript & ES6+
- Arrow Functions, Destructuring, Template Literals
- Asynchronous JavaScript (Callback, Promise, Async/Await)
- Fetch API untuk komunikasi dengan backend
10:30 – 12:00 | Frontend Framework (React.js)
- Konsep dasar React: Component, Props, State
- Functional vs Class Component
- React Hooks: useState, useEffect
- Hands-on: Membangun aplikasi sederhana dengan React
12:00 – 13:00 | ISTIRAHAT
13:00 – 14:30 | API & Integrasi Data
- REST API vs GraphQL
- Fetching Data dengan Axios & Fetch API
- State Management dengan Context API
- Hands-on: Menampilkan data dari API publik di React
14:30 – 16:00 | UI & UX dalam Web Development
- Prinsip UI/UX & Best Practices
- Tools Prototyping: Figma
- Animasi & Transisi CSS/GSAP
- Hands-on: Meningkatkan desain website dengan animasi
Hari 3 – Backend Development & Full-Stack Project
09:00 – 10:30 | Backend dengan Node.js & Express.js
- Pengantar Backend & Server-side Programming
- Membuat server sederhana dengan Express.js
- Middleware & Routing
- Hands-on: Membuat API sederhana dengan Express
10:30 – 12:00 | Database & CRUD Operations
- Database Management System: MySQL vs MongoDB
- ORM (Object Relational Mapping): Sequelize vs Mongoose
- CRUD Operations (Create, Read, Update, Delete)
- Hands-on: Membuat database & menghubungkan API dengan database
12:00 – 13:00 | ISTIRAHAT
13:00 – 14:30 | Authentication & Security
- JWT Authentication & Authorization
- Hashing Password dengan Bcrypt
- CORS, CSRF Protection
- Hands-on: Implementasi sistem login & registrasi pengguna
14:30 – 16:00 | Full-Stack Project & Deployment
- Membangun aplikasi full-stack sederhana
- Deploy Backend & Frontend (Heroku, Firebase, Vercel)
- Presentasi & Review Proyek
