Semua paket
🎨

Frontend Developer

Paket lengkap jadi frontend developer: dari HTML sampai Next.js modern.

Progress: 0/475 modul0%
Lanjutkan belajar: Pengenalan Web: Cara Kerja Browser dan Server
1

Fondasi Web

HTML, CSS, dan JavaScript sampai mahir. · 70 modul

Pengenalan Web: Cara Kerja Browser dan ServerPemula
HTML Pertama: Struktur DokumenPemula
Tag, Elemen, dan AtributPemula
Komentar dan Best PracticePemula
Entity dan Karakter SpesialPemula
Layouting Dasar: div, span, class, idPemula
Heading h1 sampai h6Pemula
Hierarki Heading dan SEOPemula
Paragraf dan Format TeksPemula
Format Teks Lanjutan: sub, sup, mark, codePemula
Block vs InlinePemula
List: ul, ol, liPemula
Description List: dl, dt, ddPemula
List BersarangPemula
Link Dasar: a hrefPemula
Link Lanjutan: Email, Telepon, AnchorPemula
Link Anchor dan Navigasi Satu HalamanPemula
Link pada Gambar dan TombolPemula
Gambar Dasar: img, src, altPemula
Gambar Lanjutan: figure, srcsetPemula
Memilih Format Gambar: JPG, PNG, SVG, WebPPemula
Alt Text MendalamPemula
Audio: Memutar SuaraPemula
Video: Menyematkan VideoPemula
Subtitle Video dengan trackPemula
iframe dan EmbedPemula
Favicon: Ikon Tab BrowserPemula
Tabel Dasar: table, tr, tdMenengah
Tabel: thead, tbody, tfoot, thMenengah
Tabel: colspan dan rowspanMenengah
Tabel Aksesibel: scope dan captionMenengah
Caption dan Deskripsi TabelMenengah
colgroup dan colMenengah
Tabel Responsif di HPMenengah
Form Dasar: form, action, methodMenengah
GET vs POST MendalamMenengah
Input Teks: text, email, password, numberMenengah
Input Email MendalamMenengah
Input Password MendalamMenengah
Input Number dan RangeMenengah
Input Tel, URL, dan SearchMenengah
Input Tanggal dan WaktuMenengah
Checkbox dan RadioMenengah
Input File: Upload BerkasMenengah
Input Tersembunyi dan TombolMenengah
Select: Dropdown PilihanMenengah
Select Lanjutan: optgroup dan multipleMenengah
Textarea: Input MultibarisMenengah
Label, Fieldset, LegendMenengah
Validasi Form Bawaan BrowserMahir
Validasi: requiredMahir
Validasi: pattern dengan RegexMahir
Validasi: Panjang dan Rentang AngkaMahir
Semantic HTML DasarMahir
article, section, asideMahir
Semantic: header dan footerMahir
Semantic: navMahir
Semantic: article MendalamMahir
Semantic: section MendalamMahir
Semantic: asideMahir
Aksesibilitas Dasar WebMahir
ARIA: Atribut Aksesibilitas LanjutanMahir
Meta: charset dan viewportMahir
Meta Tag dan SEO DasarMahir
Open Graph: Tampil Cantik Saat DibagikanMahir
Proyek: Halaman BiodataMahir
Proyek: Formulir PendaftaranMahir
Proyek: Galeri FotoMahir
Proyek Mini: Jadwal MingguanMahir
Proyek Mini: Halaman ArtikelMahir
2

Styling Modern

CSS modern: Flexbox, Grid, animasi. · 70 modul

Pengenalan CSS dan Cara PakaiPemula
Sintaks Aturan CSSPemula
Selektor Dasar: Elemen, Class, IDPemula
Selektor KombinasiPemula
Selektor AtributPemula
Spesifisitas: Siapa yang MenangPemula
Cascade dan InheritancePemula
Satuan CSS: px, em, rem, %Pemula
Warna di CSSPemula
Box ModelPemula
Margin: Jarak LuarPemula
Padding: Jarak DalamPemula
BorderPemula
Border Radius: Sudut MembulatPemula
OutlinePemula
Box ShadowPemula
BackgroundPemula
Styling Teks DasarPemula
Font FamilyPemula
Ukuran dan Ketebalan FontPemula
Line Height dan SpasiPemula
Font KustomPemula
Text ShadowPemula
White Space dan Text OverflowPemula
Display: Block, Inline, Inline-BlockPemula
Menyembunyikan ElemenPemula
Position: Static dan RelativePemula
Position: Absolute, Fixed, StickyMenengah
Z-Index dan StackingMenengah
Float dan ClearMenengah
OverflowMenengah
Flex ContainerMenengah
Justify dan AlignMenengah
Flex WrapMenengah
Properti Flex ItemMenengah
Gap di FlexboxMenengah
Studi Kasus: NavbarMenengah
Studi Kasus: Kartu ProdukMenengah
Studi Kasus: Centering SempurnaMenengah
Grid ContainerMenengah
Gap di GridMenengah
Penempatan Grid ItemMenengah
Grid Template AreasMenengah
Grid Auto: Fill, Fit, DenseMahir
Grid vs FlexboxMenengah
Studi Kasus: Galeri FotoMenengah
Studi Kasus: Layout HalamanMenengah
Media QueryPemula
Mobile FirstMenengah
Strategi BreakpointMenengah
Gambar ResponsifMenengah
Tipografi ResponsifMenengah
Container QueriesMahir
Studi Kasus: Landing ResponsifMenengah
Transisi CSSMenengah
Transform 2DMenengah
Keyframes DasarMenengah
Properti AnimationMenengah
Studi Kasus: Animasi LoadingMahir
Pseudo-ClassMenengah
Pseudo-ElementMenengah
Variabel CSSMenengah
Calc, Clamp, Min, MaxMahir
Filter CSSMenengah
Backdrop FilterMenengah
Object Fit dan Object PositionPemula
Proyek: Kartu ProfilMenengah
Proyek: Landing PageMahir
Proyek: Dashboard AdminMahir
Cheat Sheet CSSPemula
3

JavaScript Mendalam

DOM, async, dan ESNext. · 100 modul

Pengenalan JavaScript: Bahasa yang Menghidupkan WebPemula
Cara Menjalankan JavaScriptPemula
Variabel: let dan constPemula
Tipe Data PrimitifPemula
Tipe Data Referensi: Array & ObjectPemula
Konversi Tipe DataPemula
Operator AritmatikaPemula
Operator Perbandingan & LogikaPemula
Percabangan if-elsePemula
Kondisi Bertingkat & Early ReturnPemula
Switch: Percabangan Banyak PilihanPemula
Ternary Operator: if Satu BarisPemula
Loop for: Pengulangan KlasikPemula
for...in vs for...ofPemula
Loop while & do-whilePemula
break & continuePemula
Fungsi: DasarPemula
Parameter & ArgumenPemula
Return Value: Mengembalikan NilaiPemula
Arrow FunctionPemula
Function Expression vs DeclarationPemula
Default & Rest ParameterPemula
Scope: Wilayah VariabelPemula
Hoisting: Kode DiangkatPemula
Closure: Fungsi yang MengingatPemula
Array: DasarPemula
Array: Tambah & Hapus ElemenPemula
Array.map: TransformasiPemula
Array.filter: MenyaringPemula
Array.find & findIndexPemula
Array.reduce: AgregasiPemula
Array.sort & reversePemula
forEach, some, every, includesPemula
Array MultidimensiPemula
Proyek Mini: Olah Data ArrayPemula
Object: DasarMenengah
Method & thisMenengah
Object: Manipulasi PropertiMenengah
DestructuringMenengah
Spread & Rest (...)Menengah
Nested Object & Optional ChainingMenengah
Copy Object: Shallow vs DeepMenengah
JSON: Format Data UniversalMenengah
Date: DasarMenengah
Template Literal MendalamMenengah
Math: Fungsi MatematikaMenengah
Number: Method & PresisiMenengah
String: Method PentingMenengah
Regex: DasarMenengah
Date: Format & ManipulasiMenengah
Set & Map: Struktur Data yang Sering DiremehkanMenengah
Symbol & BigInt: Tipe Data yang Jarang DibahasMahir
Fitur Modern JavaScript: .at(), hasOwn, dan Assignment PintarMenengah
DOM: Seleksi ElemenMenengah
DOM: Membuat & Menambah ElemenMenengah
DOM: Class & StyleMenengah
DOM: innerHTML vs textContentMenengah
DOM: Event ListenerMenengah
DOM: Event DelegationMenengah
DOM: Menangani FormMenengah
DOM: Navigasi (Traversal)Menengah
Keyboard Event: keydown, keyup, dan ShortcutMenengah
Mouse Event: Klik, Gerakan, dan KoordinatMenengah
Custom Event: Komunikasi Antar Komponen Tanpa CouplingMenengah
BOM & window: Browser di Luar Halaman WebMenengah
Timer di JavaScript: setTimeout & setIntervalPemula
localStorage & sessionStorageMenengah
sessionStorage & Cookie: Menyimpan Data di BrowserMenengah
Geolocation API: Menemukan Posisi UserMenengah
Clipboard API: Menyalin Teks dengan JavaScriptMenengah
Notification API: Mengirim Notifikasi BrowserMenengah
Intersection Observer: Deteksi Elemen Terlihat Tanpa Scroll ListenerMahir
Proyek Mini: Todo ListMenengah
Callback: Fondasi Kode AsinkronMenengah
Promise: Janji yang Ditepati (atau Tidak)Menengah
Promise Chaining: Merangkai .then() BerantaiMenengah
Promise.all, allSettled, dan race: Banyak Janji SekaligusMahir
Menangani Error di Promise: .catch() dan .finally()Menengah
async/await: Menulis Kode Asinkron Seperti Kode BiasaMenengah
Error Handling di async/await: try...catch yang BenarMenengah
Await Berurutan vs Paralel dengan Promise.allMahir
Fetch API: Mengambil Data dari InternetMenengah
Fetch: POST, PUT, dan DELETEMenengah
Error Handling: try-catchMenengah
Custom Error: Membuat Jenis Error SendiriMenengah
Modul ES6: export dan importMenengah
Dynamic import(): Muat Kode Saat DibutuhkanMahir
Class dan OOP: Cetakan untuk Banyak ObjectMenengah
Inheritance: extends dan superMenengah
Private, Static, Getter dan SetterMahir
Iterator dan Generator: function* dan yieldMahir
Rekursi: Fungsi yang Memanggil Dirinya SendiriMenengah
Komposisi Fungsi: Merakit Fungsi KecilMahir
Debounce dan Throttle: Menjinakkan EventMenengah
Canvas Dasar: Menggambar dengan KodeMenengah
Web Worker: Komputasi Tanpa Bikin FreezeMahir
Proxy: Mengintip dan Mengatur Akses ObjectMahir
Strict Mode: Biarkan JavaScript Marah Lebih AwalMenengah
Testing Dasar: Percaya Tapi VerifikasiMenengah
Proyek Mini: Aplikasi Kuis InteraktifMahir
4

TypeScript

JavaScript dengan type safety. · 60 modul

Pengenalan TypeScriptPemula
TypeScript vs JavaScriptPemula
Setup TypeScriptPemula
tsconfig DasarPemula
Path Alias di tsconfigMenengah
Tipe PrimitifPemula
Anotasi vs InferensiPemula
any, unknown, dan neverPemula
Array di TypeScriptPemula
TuplePemula
Tipe ObjectPemula
Interface DasarPemula
Interface ExtendsPemula
Type AliasPemula
Union TypeMenengah
Intersection TypeMenengah
Literal TypeMenengah
Template Literal TypesMenengah
EnumMenengah
Parameter dan Return FunctionMenengah
Function OverloadMenengah
Parameter Opsional dan DefaultMenengah
void dan never pada FungsiMenengah
Generic pada FungsiMenengah
Generic pada InterfaceMenengah
Generic pada ClassMenengah
Constraint pada GenericMenengah
Default Type ParameterMenengah
Partial dan RequiredMenengah
Pick dan OmitMenengah
Record: Kamus Type-SafeMenengah
Exclude dan ExtractMenengah
ReturnType, Parameters, dan AwaitedMenengah
Conditional TypesMenengah
Proyek: Generic UtilsMenengah
Operator keyofMenengah
Mapped TypesMenengah
typeof sebagai Type QueryMenengah
Narrowing dengan typeofMenengah
Narrowing dengan in dan instanceofMenengah
Discriminated UnionMenengah
Type PredicateMenengah
Assertion FunctionMenengah
Type Assertion dengan asMahir
Assertion vs Type GuardMahir
Module Import ExportMahir
Declaration Files (.d.ts)Mahir
Class Dasar di TypeScriptMahir
implementsMahir
Access ModifierMahir
readonlyMahir
Abstract ClassMahir
Pengenalan DecoratorMahir
Decorator FactoryMahir
Strict ModeMahir
Typing Props di ReactMahir
Typing Hooks di ReactMahir
TypeScript untuk Next.jsMahir
Debugging Type ErrorMahir
Proyek: Type-Safe API ClientMahir
5

Next.js

Framework React full-stack. · 60 modul

Pengenalan Next.jsPemula
Next.js vs React PolosPemula
Instalasi Project Next.jsPemula
Setup Manual Tanpa create-next-appPemula
Struktur Folder ProjectPemula
Konvensi File App RouterPemula
Dev Server & Hot ReloadPemula
Update & Upgrade Next.jsPemula
File-System RoutingPemula
Nested RoutingPemula
Dynamic RoutePemula
Catch-all & Optional RouteMenengah
Route GroupMenengah
Private Folder (_folder)Menengah
Navigasi dengan LinkPemula
Navigasi ProgrammaticMenengah
Layout DasarPemula
Template vs LayoutMenengah
Loading UIMenengah
Error UIMenengah
Halaman 404 (not-found)Pemula
Global Error HandlerMenengah
Streaming dengan SuspenseMenengah
Server vs Client ComponentMenengah
Server Component MendalamMenengah
Client Component MendalamMenengah
Pola Komposisi Server-ClientMahir
Batasan & Aturan Server-ClientMenengah
Client Component untuk Library Pihak KetigaMenengah
Context di Era Server ComponentsMahir
Fetch di Server ComponentMenengah
Fetch ParalelMenengah
Fetch dengan Params & SearchParamsMenengah
Caching di Next.jsMahir
Revalidasi: ISR & On-DemandMahir
Fetch di Client ComponentMenengah
Request MemoizationMahir
Pola Fetch LanjutanMahir
Server Actions DasarMenengah
Validasi di Server ActionsMenengah
Form dengan Server ActionsMenengah
useActionStateMenengah
Optimistic UpdateMahir
revalidatePath & redirectMenengah
Proyek: Todo App FullMenengah
Metadata Dasar & SEOPemula
generateMetadata DinamisMenengah
Optimasi Gambar (next/image)Menengah
Optimasi Font (next/font)Menengah
Styling di Next.jsMenengah
Sitemap & robots.txtPemula
Proyek: Galeri TeroptimasiMahir
Route Handlers (API Routes)Menengah
Route Handlers LanjutanMahir
Middleware DasarMahir
Middleware MatcherMahir
Environment VariablePemula
Pengenalan AutentikasiMenengah
Proteksi Route dengan AuthMahir
Proyek: Blog + APIMahir
6

HTTP & API

Cara frontend ngobrol dengan backend. · 55 modul

Pengenalan HTTP: Bahasa Percakapan Browser dan ServerPemula
HTTP vs HTTPS: Kenapa Huruf S Itu PentingPemula
Evolusi HTTP: dari 1.1 ke HTTP/2 dan HTTP/3Menengah
Anatomi URL: Membaca Alamat Web Bagian per BagianPemula
GET dan POST: Dua Method yang Paling Sering DipakaiPemula
PUT, PATCH, DELETE: Mengubah dan Menghapus DataPemula
HEAD, OPTIONS, dan Method LainnyaMenengah
Status 2xx: Semua yang Berarti SuksesPemula
Status 304: Konten Tidak Berubah, Pakai Cache SajaMenengah
Status 3xx: Redirect dan CacheMenengah
Status 400: Bedah Validasi Input APIMenengah
401 vs 403: Bedah Tuntas Dua Error AuthMenengah
Strategi 404: Bukan Sekadar Halaman Not FoundMenengah
Status 4xx: Kesalahan di Pihak ClientMenengah
500 vs 502 vs 503: Bedah Error ServerMenengah
Status 5xx: Kesalahan di Pihak ServerMenengah
Header Request: Informasi yang Dikirim ClientMenengah
Header Content-Type: Label Wajib Setiap BodyMenengah
Header Cache-Control: Atur Kapan Cache Boleh DipakaiMenengah
ETag dan Conditional Request: Sidik Jari FileMenengah
Content Negotiation: Tawar-menawar Format DataMenengah
Strategi Caching: Kapan Ambil dari Cache, Kapan ke ServerMenengah
Header Response & CORS: Aturan Main Beda DomainMenengah
Konfigurasi CORS di Server: Express dan LaravelMenengah
JSON: Format Data yang Dipakai Hampir Semua APIPemula
Prinsip REST: Cara Mendesain API yang RapiMenengah
API Versioning: Mengubah API Tanpa Merusak Klien LamaMenengah
Query Parameter Praktis: Filter, Sort, dan PaginationMenengah
Cursor Pagination: Pagination untuk Data yang Terus BerubahMenengah
Postman: Mencoba API Tanpa Nulis KodePemula
Dokumentasi API: Menulis yang Bikin Orang PahamMenengah
OpenAPI dan Swagger: Dokumentasi yang Bisa DieksekusiMenengah
GraphQL: Gambaran Alternatif RESTMenengah
Webhook: Saat Server yang MenghubungimuMenengah
Fetch GET: Mengambil Data dari APIMenengah
Fetch POST: Mengirim Data ke APIMenengah
Upload File dengan fetch dan FormDataMenengah
Fetch Lanjutan: Header, Timeout, dan AbortMahir
Pola Interceptor: Auth dan Logging TerpusatMahir
Error Handling API: Gagal dengan AnggunMahir
Rate Limit: Memahami Batasan Kuota APIMahir
Idempotency Key: Aman dari Klik GandaMahir
Bedah Header Authorization: Bearer, Basic, ApiKeyMahir
Basic Auth: Cara Login Paling SederhanaMahir
API Key: Kunci Sederhana untuk Integrasi ServerMenengah
Bearer Token & JWT: Standar Login API ModernMahir
Cookie: Stempel Tangan di KonserMenengah
Atribut Cookie: HttpOnly, Secure, SameSiteMenengah
Cookie vs Token: Kapan Pakai yang ManaMenengah
Gambaran OAuth: Login dengan Google & co.Mahir
gRPC: Gambaran Komunikasi Super Cepat antar ServerMahir
WebSocket: Telepon Dua Arah untuk WebMahir
Server-Sent Events: Radio Satu Arah dari ServerMahir
API Gateway: Resepsionis untuk MicroserviceMahir
Proyek Mini: API Client LengkapMahir
7

Praktik Terpadu

Bangun komponen dan aplikasi web nyata dari nol. · 60 modul

Setup Proyek Web: Struktur Folder yang RapiPemula
Membangun Navbar SederhanaPemula
Navbar Responsif dengan Menu HamburgerPemula
Hero Section yang MemukauPemula
Sidebar DashboardPemula
Form Login yang RapiPemula
Validasi Form dengan JavaScriptMenengah
Pesan Error Form yang RamahMenengah
Dropdown MenuPemula
Tabs InteraktifPemula
Accordion FAQPemula
Kartu Produk E-CommercePemula
Grid Galeri FotoPemula
Tombol dengan Animasi KerenPemula
Modal PopupMenengah
Toast NotificationMenengah
Tabel yang Bisa Di-sortirMenengah
Dark Mode TogglePemula
Scroll Progress BarPemula
Tombol Back to TopPemula
Animasi Scroll RevealMenengah
Counter Angka AnimasiMenengah
Slider Carousel GambarMenengah
Galeri dengan LightboxMenengah
Aplikasi Todo List DasarMenengah
Todo App dengan Penyimpanan PermanenMenengah
Kalkulator SederhanaMenengah
Jam Digital Real-TimePemula
Stopwatch dengan LapMenengah
Kuis Interaktif dengan SkorMenengah
Game Tebak AngkaPemula
Game Batu Gunting KertasPemula
Filter Produk Berdasarkan KategoriMenengah
Pencarian Real-TimeMenengah
Pagination BernomorMenengah
Mengambil Data dengan Fetch APIMenengah
Loading SkeletonPemula
Daftar Sortable dengan Drag & DropMenengah
Grafik Sederhana dengan CanvasMahir
Proyek Akhir: Portofolio MiniMahir
Tabel Harga (Pricing Table)Pemula
Slider TestimoniPemula
Form Multi-Langkah (Wizard)Menengah
Keranjang Belanja MiniMenengah
Widget CuacaMenengah
UI Music PlayerMenengah
Papan Kanban Drag & DropMahir
UI Chat SederhanaMenengah
Timeline VertikalPemula
Sticky Notes (Catatan Tempel)Menengah
Color Picker KustomPemula
Generator Kata SandiPemula
UI Generator QR CodePemula
Infinite ScrollMenengah
Autocomplete / Saran PencarianMenengah
Tabs VertikalPemula
Mega MenuMenengah
Footer ModernPemula
Halaman 404 KreatifPemula
Preloader / Loading ScreenPemula