Belajar Web Dasar
Dengan perkembangan AI yang saati ini semakin pesat dan tidak terkendali, tools AI-generated
makin banyak digunakan secara instan. Hanya dengan prompt sederhana,
sebuah website bisa langsung jadi.
Hal ini sering kali membuat pemula
tergiur untuk 'skip' atau melewati tahapan belajar fundamental
secara mendalam. Akibatnya, muncul sebuah ilusi kompetensi — di
mana seseorang merasa bahwa dirinya sudah bisa atau bahkan 'jago' web
development, padahal ia belum memahami apa yang sebenarnya diketik dan
dihasilkan oleh AI.

Tentang course
Benefit yang akan kamu dapatkan
Akses Selamanya Seluruh Video Yang Tersedia
Sertifikat Digital Yang Bisa Kamu Share
Fitur Diskusi Eksklusif di Platform Belajar
Teknologi Standar Industri Sesuai Top IT Company
Mentor Expert Yang Mengajar Sesuai Bidangnya
80+ Video Pembelajaran
Mentor expert yang akan membimbing kamu
Materi yang akan kamu pelajari
Materi kurikulum ini dibagi menjadi beberapa fase rilis.
Saat ini (Fase 1), materi yang ada akan fokus membahas fundamental HTML dan CSS secara mendalam dan berurutan, mulai dari Chapter 1 - Introduction sampai Chapter 13 - Advanced Layouting.
- Jika kalian bergabung dan membeli kelas di Fase 1 ini, kalian akan mendapatkan update seluruh materi di fase-fase berikutnya secara GRATIS.
- Saat materi Fase berikutnya sudah dimasukkan nanti, harga kelas akan dinaikkan.
Introduction
- Selamat Datang di Kursus! + Perkenalan Mentor
- Penjelasan Course & Learning Outcome
- Untuk Siapa Saja Course Ini?
- Cara Mengakses Code, Slide dan Materi Course
Mindset & Roadmap
- Selamat Datang di Era AI 2026
- Roadmap, Fakta & Fenomena Web Development
- Teknologi Internet & Cara Kerja Website
- Front-End, Back-End & Full-Stack
- Etika AI
Persiapan Environment
- Sistem Operasi
- Instalasi VS Code & Environment Pendukung
- Setup & Konfigurasi VSCode
- Theme & Extensions
- Instalasi AI Asistant (Windsurf)
HTML Dasar
- Intro HTML
- Tag HTML
- Tag Text
- Latihan HTML 1: Artikel
- List
- Latihan HTML 2: Resep
- Link
- Image
- Audio & Video
Git & GitHub
- Intro Version Control Sytem
- Instalasi Git & GitHub
- Latihan Git 1: My First Commit
- Latihan Git 2: My First Repo
- Latihan Git 3: Commit Best Practice
HTML Semantic
- Apa & Kenapa Semantic?
- Tag-tag Semantic
- Latihan Semantic: Before & After
HTML Table & Form
- Table Introduction
- Styling Table
- Table Merging
- Latihan Table 2: Jadwal Turnamen
- Form, input, label & button
- Required, Autofocus, Autocomplete, Checkbox & Radio
- Select & textarea
- Form + Table
Studi Kasus 1 - HTML
- Studi Kasus - Brief & Struktur HTML
- Studi Kasus - Implementasi CSS
CSS Dasar
- Pendahuluan CSS
- Anatomy CSS
- CSS Selectors
- CSS Placements
- Font Styling
- Font Styling 2
- Latihan 1 CSS - Typography
- Text Styling
- Text Styling 2
- Latihan 2 CSS - Text Styling
- CSS Colors + Latihan 3 CSS - Colors
- CSS Background
- CSS Background 2
- Latihan 4 CSS - Background
CSS Selector
- Simple Selectors
- Pseudo Selectors 1 - Pseudo Class
- Pseudo Selectors 2 - Pseudo Element
- Pseudo Selectors 3 - Smart Selector
- Complex Selectors
The C-S-I
- Cascade
- Specificity
- Inheritance
CSS Box Model
- Block vs Inline Display & overflow
- Box Model, Margin & Padding
- Border, Outline & Box Sizing
- Latihan CSS Box Model: The Product Card (commit & push)
Studi Kasus 2 - CSS Dasar
- Studi Kasus - Intro & Struktur HTML
- Studi Kasus - Implementasi CSS
CSS Basic Layouting
- Brief History CSS Layouting
- Float
- Position
- Fixed, Sticky & z-index
- Latihan Position - Streamers Profile - Brief & Struktur HTML
- Latihan Position - Streamers Profile - CSS
Advanced Layouting
- Apa Itu Flexbox?
- Flex-Direction
- Justify-Content
- Flex-Wrap
- Align-Items
- Align-Content & Align-Self
- Latihan Advanced Layouting 1: The Holy Grail Navbar (commit & push)
- Flex-Basis, Grow, & Shrink
- Penulisan Singkat Properti Flex (Shorthand)
- Latihan Advanced Layouting 2: Pricing Card (commit & push)
- Grid singkat saja
- Latihan Advanced Layouting 3: Image Gallery (commit & push)
Studi Kasus 3 - CSS Layouting
- Studi Kasus - Intro & Struktur HTML
- Studi Kasus - Implementasi CSS
Fase 2 - Modern Interaction, Transition & Animation
- TBA
Fase 2 - Responsive Web Design
- TBA
Fase 2 - Modern CSS
- TBA
Fase 3 - CSS & UI Frameworks
- TBA
Biaya terjangkau untuk masa depan kamu
Akses Selamanya Seluruh Video Yang Tersedia
Sertifikat Digital Yang Bisa Kamu Share
Fitur Diskusi Eksklusif di Platform Belajar
Teknologi Standar Industri Sesuai Top IT Company
Mentor Expert Yang Mengajar Sesuai Bidangnya
80+ Video Pembelajaran
Ingatkan Saya
Dapatkan notifikasi ketika course rilis
Punya pertanyaan seputar course
Apa saja persyaratan untuk mengikuti course ini?
Apakah pembelajaran dilakukan secara online?
Apakah saya akan mendapatkan sertifikat setelah menyelesaikan course ini?
Bagaimana jika saya mengalami kesulitan dalam memahami materi atau mengerjakan proyek?
Bagaimana cara mendaftar dan melakukan pembayaran?
Kapan course ini akan dimulai?
Apakah ada batas waktu untuk menyelesaikan course ini?
Apakah saya bisa mendapatkan akses seumur hidup ke materi course?
Konsultasi Program Gratis
Apabila kamu memiliki pertanyaan dan ingin berkonsultasi langsung dengan team WPU Course
Kang APIP WPU
Asisten Pintar & Interaktif Platform WPU
