Vanilla JS

The language of the browser, without frameworks: logic, the DOM, events and fetch. 16 modules of 10 minutes each, with questions that check your answers in the browser.

Start the track

Foundations

• 1. Variables (let/const), types, and operatorsFree
  Store values with const and let, meet JavaScript's basic types, and do maths and comparisons safely.
• 2. Functions and arrow functionsFree
  Package logic into reusable functions with parameters, defaults and return values, write compact arrow functions, and pass functions around as values.
• 3. Arrays and objectsFree
  Store lists in arrays and records in objects, read and update them, combine them into arrays of objects, and use destructuring and spread to work with them cleanly.
• 4. Conditionals and loopsFree
  Make decisions with if, else, the ternary operator and switch, understand truthy and falsy values, guard against missing data with ?? and ?., and repeat work with for, for...of and while.

Intermediate

• 5. The DOM: selecting and changing elementsFree
  Find elements with querySelector, change their text, classes and attributes, create and remove elements, and render lists of data safely without innerHTML pitfalls.
• 6. Events and event listenersFree
  React to clicks, typing, form submissions and key presses with addEventListener, use the event object, stop default browser behaviour, and handle many elements with one delegated listener.
• 7. Template literals and string handlingFree
  Build strings with template literals, clean and inspect text with trim, case, includes, startsWith, slice, split, join, replaceAll and padStart, and format numbers for Indonesian users.
• 8. Array methods (map, filter, reduce, forEach)Free
  Transform data declaratively with map, filter, reduce, find, some, every and sort, chain them into readable pipelines, and avoid the classic sort and mutation traps.

Advanced

• 9. Scope, closures, and thisPro
  Understand where variables are visible, how functions remember the variables around them (closures) to create private state, and what this means in methods, arrow functions and event handlers.
• 10. Asynchronous JS: callbacks and promisesPro
  Understand why JavaScript doesn't wait for slow work, how the event loop orders callbacks and promises, and how to create, chain, combine and handle errors in promises.
• 11. async/await and fetch (calling APIs)Pro
  Write asynchronous code that reads top to bottom with async and await, call JSON APIs with fetch, check response status, send data with POST, and show loading and error states.
• 12. JSON and localStoragePro
  Convert data to and from JSON with stringify and parse, handle what JSON can't represent, and keep small amounts of data in the browser with localStorage safely.

Expert

• 13. Modules (import/export)Pro
  Split a JavaScript app into ES module files with named and default exports, import what each file needs, load modules in the browser with type="module", and design small module interfaces.
• 14. Error handling and debuggingPro
  Catch and throw errors with try, catch and finally, create meaningful custom errors, handle failures in async code, read error messages and stack traces, and debug with the console and breakpoints.
• 15. Clean code: organizing a vanilla JS appPro
  Structure a framework-free app around one state object, pure update functions, a render function and thin event handlers, so the page always matches the data and every part stays small and testable.
• 16. A small project: interactive UI without a frameworkPro
  Build a complete coffee shop catalogue in plain JavaScript, with data loaded from an API, live search, a category filter, sorting, a cart with totals, saved cart contents, and loading and error states.

Track project

• JavaScript Project: Toko Kita's shop frontPro
  Three graded tasks that bring the shop's page to life. Load and search the product list from an API, keep a cart that survives a page reload, and send a checkout form that handles slow connections and failures gracefully.

Pro modules unlock with one payment of Rp 149.000, yours to keep.