Workspace operasional

HTML semantic dan struktur halaman

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

Form & Validasi Form Dasar

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

CSS responsive layout

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

CSS Box Model & Tipografi

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

CSS Grid System

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

Transisi & Efek Hover

Penerapan efek animasi transisi halus pada tombol dan link aktif.

Interaksi dasar dengan JavaScript

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

Logika Pemrograman & DOM Manipulation

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

Slicing Landing Page

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

Git & Github Version Control

Mengunggah source code ke repository Github secara terstruktur.

Deploy ke Vercel / Netlify

Cara menghubungkan repository Github ke Vercel untuk hosting gratis selamanya.

Optimasi SEO & Performance Check

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

Pengenalan React & Component-based UI

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

React State & State Management Sederhana

Menggunakan hook useState untuk interaktivitas dinamis.

Fetching Data dari Public API

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

Handling Error & Loading State

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