Semua paket
🌐

Fullstack Next.js

Kuasai frontend dan backend dalam satu framework: Next.js + TypeScript.

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

Fondasi Web

HTML, CSS, JavaScript. · 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 & Interaksi

CSS modern dan JavaScript mendalam. · 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 + TypeScript

Dari DOM sampai type safety. · 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

Type aman untuk project besar. · 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 Fullstack

Server Components, Server Actions, API routes. · 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, Git & Deploy

API, version control, deployment. · 55 modul

Pengenalan Git: Mesin Waktu untuk KodePemula
Instalasi dan Konfigurasi Awal GitPemula
Git vs GitHub: Jangan Tertukar LagiPemula
git init vs git clone: Dua Cara Memulai RepoPemula
Tiga Area Kerja Git: Working, Staging, RepositoryPemula
git add dan git commit: Menyimpan dengan RapiPemula
git status: Membaca Kondisi RepoPemula
git log: Menjelajah Riwayat CommitPemula
Membaca Riwayat dengan Cepat: log --oneline --graphMenengah
Melacak Satu File: git log --followMenengah
git diff: Melihat Perubahan Baris per BarisMenengah
Tiga Area Git: diff vs --staged vs HEADMenengah
Membandingkan Branch dengan git diffMenengah
git show, blame, dan bisect: Detektif KodeMenengah
Statistik Kontribusi: shortlog dan diffstatMenengah
Bisect Otomatis dengan git bisect runMenengah
.gitignore: Mengabaikan File dengan PolaMenengah
Branch: Jalur Paralel yang AmanMenengah
switch, restore & checkout: Pindah dan PulihkanMenengah
Merge Fast-Forward: Penggabungan TermudahMenengah
Merge No-FF: Menjaga Jejak FiturMenengah
Cherry-Pick: Memetik Satu CommitMenengah
Strategi Merge: Recursive, Ours, OctopusMahir
Resolusi Konflik: Saat Git MenyerahMenengah
Konflik Hapus vs Ubah: UD dan DUMenengah
Mergetool dengan VS CodeMenengah
Rebase: Menata Ulang RiwayatMenengah
Rebase Interaktif: Merapikan RiwayatMahir
Worktree: Kerja Dua Branch SekaligusMahir
Remote & Origin: Menghubungkan ke Dunia LuarMenengah
git push & Upstream TrackingMenengah
fetch vs pull: Ambil Dulu atau Langsung Gabung?Menengah
Membersihkan Branch Remote: fetch --pruneMenengah
git stash: Laci Penyimpanan SementaraMenengah
Stash Lanjutan: -u, Pop Konflik, dan BranchMenengah
Submodule: Repo di Dalam RepoMahir
git reset: Soft, Mixed, HardMenengah
git revert: Membatalkan dengan AmanMenengah
Git Hooks: Otomatisasi di Sisi KlienMenengah
GitHub Actions: CI PertamamuMenengah
GitHub Codespaces: VS Code di BrowserMenengah
GitHub Projects dan DiscussionsPemula
Keamanan Repo: Dependabot dan Secret ScanningMenengah
Git LFS: Mengelola File BesarMenengah
Sinkronisasi Fork dengan UpstreamMenengah
Rilis GitHub: Draft, Notes, dan BinaryMenengah
Template PR dan CODEOWNERSMenengah
reflog: Penyelamat Saat PanikMahir
Tag & GitHub Releases: Menandai VersiMenengah
Commit Bertanda Tangan: GPG SigningMahir
Pull Request: Membuat Usulan PerubahanMenengah
Draft PR: Minta Feedback Lebih AwalMenengah
Review PR: Diskusi & Approve KodeMenengah
Merge PR: Merge, Squash, RebaseMenengah
Fork, Kontribusi OSS & GitHub PagesMenengah