Semua track

Roadmap Belajar

Praktik Web Terpadu

Bangun komponen web nyata dengan HTML, CSS, dan JavaScript sekaligus, dari navbar sampai game dan proyek akhir.

8 bab60 modul±594 menit0%
Mulai dari awal
1

Bab 1

Persiapan & Navigasi

Menyiapkan proyek web dan membangun navigasi: navbar, mega menu, hero, sidebar, footer, hingga halaman 404.

1.Setup Proyek Web: Struktur Folder yang RapiPemula
2.Membangun Navbar SederhanaPemula
3.Navbar Responsif dengan Menu HamburgerPemula
4.Mega MenuMenengah
5.Hero Section yang MemukauPemula
6.Sidebar DashboardPemula
7.Footer ModernPemula
8.Halaman 404 KreatifPemula
Kuis 5 soal terbuka di modul terakhir bab ini.
2

Bab 2

Formulir & Input

Membangun form login, validasi real-time, form multi-langkah, dropdown, autocomplete, dan tabs.

9.Form Login yang RapiPemula
10.Validasi Form dengan JavaScriptMenengah
11.Pesan Error Form yang RamahMenengah
12.Form Multi-Langkah (Wizard)Menengah
13.Dropdown MenuPemula
14.Autocomplete / Saran PencarianMenengah
15.Tabs InteraktifPemula
16.Tabs VertikalPemula
Kuis 5 soal terbuka di modul terakhir bab ini.
3

Bab 3

Komponen UI

Membangun kartu produk, pricing table, testimoni, accordion, modal, toast, dan preloader.

17.Accordion FAQPemula
18.Kartu Produk E-CommercePemula
19.Tabel Harga (Pricing Table)Pemula
20.Slider TestimoniPemula
21.Tombol dengan Animasi KerenPemula
22.Modal PopupMenengah
23.Toast NotificationMenengah
24.Preloader / Loading ScreenPemula
Kuis 5 soal terbuka di modul terakhir bab ini.
4

Bab 4

Galeri & Efek Scroll

Membangun galeri foto, carousel, lightbox, progress bar, dan animasi saat scroll.

25.Grid Galeri FotoPemula
26.Slider Carousel GambarMenengah
27.Galeri dengan LightboxMenengah
28.Scroll Progress BarPemula
29.Tombol Back to TopPemula
30.Animasi Scroll RevealMenengah
31.Counter Angka AnimasiMenengah
Kuis 5 soal terbuka di modul terakhir bab ini.
5

Bab 5

Data: Tabel, Filter & Pencarian

Mengelola data: tabel sortable, filter kategori, pencarian real-time, pagination, infinite scroll, dan loading skeleton.

32.Tabel yang Bisa Di-sortirMenengah
33.Filter Produk Berdasarkan KategoriMenengah
34.Pencarian Real-TimeMenengah
35.Pagination BernomorMenengah
36.Infinite ScrollMenengah
37.Mengambil Data dengan Fetch APIMenengah
38.Loading SkeletonPemula
39.Grafik Sederhana dengan CanvasMahir
Kuis 5 soal terbuka di modul terakhir bab ini.
6

Bab 6

Utilitas Sehari-hari

Membangun alat berguna: kalkulator, jam, stopwatch, color picker, password generator, QR, dan dark mode.

40.Kalkulator SederhanaMenengah
41.Jam Digital Real-TimePemula
42.Stopwatch dengan LapMenengah
43.Color Picker KustomPemula
44.Generator Kata SandiPemula
45.UI Generator QR CodePemula
46.Dark Mode TogglePemula
Kuis 5 soal terbuka di modul terakhir bab ini.
7

Bab 7

Aplikasi Mini

Membangun aplikasi lengkap: todo list, sticky notes, kanban, kuis, chat, dan timeline.

47.Aplikasi Todo List DasarMenengah
48.Todo App dengan Penyimpanan PermanenMenengah
49.Sticky Notes (Catatan Tempel)Menengah
50.Papan Kanban Drag & DropMahir
51.Daftar Sortable dengan Drag & DropMenengah
52.Kuis Interaktif dengan SkorMenengah
53.UI Chat SederhanaMenengah
54.Timeline VertikalPemula
Kuis 5 soal terbuka di modul terakhir bab ini.
8

Bab 8

Game, Musik & Proyek

Membangun game tebak angka, batu gunting kertas, music player, widget cuaca, keranjang belanja, dan proyek portofolio.

55.Game Tebak AngkaPemula
56.Game Batu Gunting KertasPemula
57.UI Music PlayerMenengah
58.Widget CuacaMenengah
59.Keranjang Belanja MiniMenengah
60.Proyek Akhir: Portofolio MiniMahir
Kuis 5 soal terbuka di modul terakhir bab ini.