Module 1

Pahami apa itu website, cara web page dimuat, peran HTML/CSS/JavaScript, dan file dasar di project frontend kecil.

Module 2

Belajar struktur dasar halaman HTML, tag, element, attribute, dan konten dasar halaman.

Module 3

Belajar memilih elemen HTML berdasarkan makna dan struktur halaman.

Module 4

Belajar dasar form, link vs button, label, input, alt text, dan aksesibilitas awal.

Module 5

Pelajari cara CSS memberi tampilan pada HTML melalui selector, property, value, cascade, dan specificity dasar.

Module 6

Pelajari box model, padding, margin, border, width, height, max-width, dan box-sizing untuk membuat elemen lebih rapi dan mudah dibaca.

Module 7

Buat dan jalankan website statis sederhana di perangkat sendiri, lalu simpan project dengan Git dan GitHub.

Module 8

Pelajari cara menyusun elemen menggunakan Flexbox dan Grid untuk membuat navbar, layout sederhana, dan card grid.

Module 9

Pelajari mobile-first CSS, breakpoint dasar, fluid spacing, typography, CSS variables, dan dark mode dasar.

Module 10

Mulai menulis JavaScript dasar lewat value, variable, function, conditionals, dan loop sederhana.

Module 11

Membentuk data UI sederhana dengan array, object, array of objects, map, dan filter.

Module 12

Menghubungkan JavaScript ke halaman browser lewat DOM, event, form, localStorage, fetch, dan JSON dasar.

Module 13

Bangun mini app JavaScript di perangkat sendiri dengan HTML, CSS, script.js, DOM event, localStorage, DevTools, Git, dan GitHub.

Module 14

Memahami akses variable, closure untuk state kecil, dan cara memecah Vanilla JavaScript ke module file yang lebih rapi.

Module 15

Menangani Promise, async/await, try/catch, UI state, failed request, dan retry dasar dengan Vanilla JavaScript.

Module 16

Menggunakan Browser API terpilih, merapikan data sebelum render, dan melakukan debugging JavaScript browser dengan strategi yang jelas.

Module 17

Menyiapkan pemahaman Node.js, npm, package.json, scripts, dependencies, dan workflow terminal sebelum masuk TypeScript project.

Module 18

Memahami TypeScript sebagai JavaScript dengan type checking untuk values, arrays, objects, functions, optional fields, dan type error dasar.

Module 19

Mendesain type TypeScript praktis untuk UI state, branching logic, reusable helpers, dan data modeling frontend yang lebih aman.

Module 20

Menggunakan TypeScript di boundary penting frontend: API response, form input, data siap UI, reusable helper, dan type yang tetap mudah dibaca.

Module 21

Memahami React component sebagai bagian UI reusable, lalu membangun component tree kecil dengan JSX, props, dan children.

Module 22

Membuat React UI merespons interaksi lewat useState, event handler, conditional rendering, list, keys, dan derived display.

Module 23

Membangun controlled form sederhana, menangani submit, menyusun component kecil, dan memindahkan state saat benar-benar perlu dibagi.

Module 24

Membuat, menjalankan, mengedit, menyimpan, dan menjelaskan React app pertama di perangkat sendiri dengan Vite, TypeScript ringan, Git, dan GitHub.

Module 25

Menentukan kapan useEffect benar-benar diperlukan, membersihkan subscription, dan mengekstrak behavior berulang menjadi custom hook kecil.

Module 26

Memilih lokasi state yang tepat, menghitung value turunan saat render, memakai reducer untuk transisi terkait, dan memakai context hanya saat sharing memang diperlukan.

Module 27

Membangun loading, error, empty, success, dan retry UI yang jelas agar React feature tetap membantu saat data belum siap atau gagal dimuat.

Module 28

Membuat React feature lebih tahan terhadap render error, memberi fallback yang membantu, memahami lazy loading dengan Suspense, dan menyediakan jalur recovery yang jelas.

Module 29

Memahami biaya render React, mengukur sebelum mengubah kode, lalu memakai memoization hanya untuk masalah yang benar-benar terbukti.

Module 30

Membangun composition, children, slot-like props, compound components, dan form field yang reusable tanpa membuat API component menjadi berlebihan.

Module 31

Memahami bagaimana folder dan file khusus di App Router membentuk page, layout, nested route, dynamic segment, dan route group.

Module 32

Menentukan batas server dan client pada App Router agar UI tetap interaktif tanpa menjadikan seluruh route sebagai Client Component.

Module 33

Menambahkan perilaku route App Router yang jelas melalui loading UI, error recovery, endpoint GET sederhana, metadata, dan environment variable yang aman.

Module 34

Membuat, menjalankan, mengembangkan, menyimpan, dan menjelaskan Next.js App Router project kecil di perangkat sendiri dengan Git dan GitHub.

Module 35

Mendesain UI login dan register, navigation berbasis session, akses route yang tepat, serta error state auth yang membantu user tanpa membocorkan detail sensitif.

Module 36

Menghubungkan Next.js app ke data user dengan client boundary yang tepat, RLS, service layer, persistence flow, dan profile row yang aman untuk tahap awal.

Module 37

Mendeploy Next.js app, menyiapkan environment production, membaca log, membangun mental model caching dasar, dan men-debug deployment secara terarah.

Module 38

Membangun form React yang terarah dengan registration, schema Zod, resolver, field errors, submit state, dan schema-derived type.

Module 39

Membuat feedback validasi form yang jelas, dapat dipulihkan, dan aksesibel melalui inline error, error summary, focus, pending state, serta success state.

Module 40

Memisahkan data milik server dari state UI lokal, menampilkan data-fetching state yang jujur, memetakan response API, dan memakai optimistic update secara hati-hati.

Module 41

Menguji function dan React component melalui behavior, interaksi user, serta accessible UI output tanpa bergantung pada detail implementasi.

Module 42

Menguji flow feature yang memakai data async dengan mock API yang jelas, tanpa bergantung pada backend atau credential asli.

Module 43

Memilih critical user journey, menulis dasar Playwright, dan menjaga browser test tetap bernilai serta tidak mudah flaky.

Module 44

Membaca sinyal loading, interaksi, dan stabilitas visual untuk memilih perbaikan performance yang benar-benar terasa oleh user.

Module 45

Mengurangi biaya image, font, dan JavaScript dengan memilih resource serta loading strategy yang sesuai kebutuhan user.

Module 46

Menjaga biaya browser tetap proporsional lewat boundary Server dan Client Component yang jelas serta perbaikan render yang terukur.

Module 47

Meninjau struktur UI, tab order, focus, dan jalan keluar keyboard agar halaman produk dapat dipakai tanpa mouse.

Module 48

Membangun component interaktif dengan focus, keyboard behavior, semantic structure, dan ARIA yang proporsional.

Module 49

Menguji issue accessibility umum dan menghormati preference user untuk contrast, form error, motion, serta feedback UI.

Module 50

Mengatur feature frontend agar component, service, type, content, dan dependency tetap mudah dipahami saat product berkembang.

Module 51

Memilih rumah yang tepat untuk data server, state URL, UI lokal, persistence, dan recovery tanpa menjadikan global state sebagai jawaban default.

Module 52

Merancang props, content contract, contoh penggunaan, dan documentation note agar reusable component tetap jelas bagi engineer berikutnya.

Module 53

Membuat token visual sederhana dan variants yang typed agar Button serta Card konsisten tanpa menumpuk nilai CSS satu kali pakai.

Module 54

Membangun form field, table, dialog, feedback, dan selection control dengan API jelas, state yang terlihat, serta accessibility expectation yang praktis.

Module 55

Mendokumentasikan component lewat Storybook, memeriksa state serta accessibility, lalu mengatur export dan changelog tanpa masuk ke publishing package.

Module 56

Membaca endpoint, request, response, status code, pagination, dan webhook dari sudut pandang frontend integration tanpa membangun backend baru.

Module 57

Memahami identity, session, cookie, CORS, CSRF, dan secure cookie behavior agar frontend dapat debug auth issue tanpa membuat asumsi keamanan yang berbahaya.

Module 58

Membaca data relational, backend platform, cache, dan file upload flow agar frontend dapat mengintegrasikan serta mendiagnosis product data dengan jelas.

Module 59

Mengenali risiko browser-facing dan memilih rendering, request, input, serta dependency boundary yang lebih aman dalam pekerjaan frontend.

Module 60

Menjaga secret tetap server-only, membaca trade-off session, serta membuat Permission UI tanpa memindahkan enforcement ke browser.