# Web Programming Foundation

HTML, CSS, JavaScript, deployment, dan portfolio website responsif.

- Durasi: 10 minggu
- Level: INTERMEDIATE
- Total modul: 8
- Total lesson: 16

## Learning Outcomes
- Membuat struktur halaman web semantik dengan HTML5
- Desain layout responsif modern dengan CSS Grid & Flexbox
- Implementasi logika interaktif frontend menggunakan JavaScript dasar
- Melakukan publikasi website (deploy) secara live ke hosting Vercel

## Modul 1: Fondasi HTML5 Semantik

### 1.1 HTML semantic dan struktur halaman

Membuat struktur landing page profesional dengan tag semantic dan komponen section.

Video: https://www.youtube.com/watch?v=dQw4w9WgXcQ
Materi: https://developer.mozilla.org/
Status awal: Selesai

### 1.2 Form & Validasi Form Dasar

Membuat input teks, email, password, tombol submit, serta atribut required.

Video: https://www.youtube.com/watch?v=dQw4w9WgXcQ
Materi: https://developer.mozilla.org/
Status awal: Selesai

## Modul 2: CSS Responsive Layout & Styling

### 2.1 CSS responsive layout

Grid, flexbox, spacing, warna, dan responsive constraints untuk tampilan mobile/desktop.

Video: https://www.youtube.com/
Materi: https://web.dev/learn/css/
Status awal: Selesai

### 2.2 CSS Box Model & Tipografi

Mengatur margin, padding, border, ukuran font, dan import font dari Google Fonts.

Video: https://www.youtube.com/
Materi: https://web.dev/learn/css/
Status awal: Selesai

## Modul 3: CSS Grid & Animasi

### 3.1 CSS Grid System

Membuat tata letak dashboard kompleks 2 dimensi dengan grid-template-columns.

Video: https://www.youtube.com/
Materi: https://web.dev/learn/css/
Status awal: Belum selesai

### 3.2 Transisi & Efek Hover

Penerapan efek animasi transisi halus pada tombol dan link aktif.

Video: https://www.youtube.com/
Materi: https://web.dev/learn/css/
Status awal: Belum selesai

## Modul 4: JavaScript Frontend Dasar

### 4.1 Interaksi dasar dengan JavaScript

Event, state sederhana, validasi form, dan pola berpikir interaktif.

Video: https://www.youtube.com/
Materi: https://javascript.info/
Status awal: Belum selesai

### 4.2 Logika Pemrograman & DOM Manipulation

Belajar variabel, fungsi, kondisi, serta cara menangkap element HTML.

Video: https://www.youtube.com/
Materi: https://javascript.info/
Status awal: Belum selesai

## Modul 5: Modul Proyek Akhir

### 5.1 Slicing Landing Page

Menghubungkan HTML, CSS, JS menjadi satu halaman portfolio utuh.

Video: -
Materi: https://github.com/
Status awal: Belum selesai

### 5.2 Git & Github Version Control

Mengunggah source code ke repository Github secara terstruktur.

Video: -
Materi: https://git-scm.com/
Status awal: Belum selesai

## Modul 6: Deployment & Hosting

### 6.1 Deploy ke Vercel / Netlify

Cara menghubungkan repository Github ke Vercel untuk hosting gratis selamanya.

Video: -
Materi: https://vercel.com/docs
Status awal: Belum selesai

### 6.2 Optimasi SEO & Performance Check

Menguji performa website dengan Lighthouse dan menambahkan meta tag SEO dasar.

Video: -
Materi: https://web.dev/lighthouse/
Status awal: Belum selesai

## Modul 7: Dasar-dasar React & Framework Modern

### 7.1 Pengenalan React & Component-based UI

Memahami konsep Virtual DOM, pembuatan komponen JSX, dan passing props.

Video: -
Materi: https://react.dev/
Status awal: Belum selesai

### 7.2 React State & State Management Sederhana

Menggunakan hook useState untuk interaktivitas dinamis.

Video: -
Materi: https://react.dev/
Status awal: Belum selesai

## Modul 8: API Integration

### 8.1 Fetching Data dari Public API

Cara mengambil data eksternal menggunakan async/await fetch dan merendernya ke UI.

Video: -
Materi: https://javascript.info/fetch
Status awal: Belum selesai

### 8.2 Handling Error & Loading State

Mengelola state loading dan error pada UI ketika memproses HTTP request.

Video: -
Materi: https://javascript.info/fetch
Status awal: Belum selesai

---
Generated by Terpadu Kursus at 2026-06-11T23:22:41.794Z