JavaScript
From your first console.log to a complete app that talks to an API and saves its data. 45 short lessons with runnable code, a step-by-step visualiser, diagrams, interview questions and games that make it stick.
Every chapter is an island. Finish its lessons, beat its challenge, and sail on ⛵
Island 1
Getting started
- What is JavaScript?Where it runs, and your first line of code.6 min3 🎮
- Variables: let, const and varHow to store a value for later, and pick the right keyword.9 min4 🎮
- Data typesThe 8 types, and how to tell a value's type.8 min4 🎮
- Type conversionNumber, String, Boolean, and the values that count as false.8 min3 🎮
Island 2
Operators and strings
- Arithmetic and assignmentAdd, subtract, remainder and powers, plus += and ++.7 min3 🎮
- Comparison and logic===, !==, &&, || and ??.8 min4 🎮
- Strings and template literalsWrite text and drop variables into it easily.7 min3 🎮
- String methodsSlice, search, replace and clean up text.8 min4 🎮
- Numbers and MathRounding, random numbers and formatting.7 min3 🎮
Island 3
Control flow
- Conditions: if and elseLet your code make decisions.8 min3 🎮
- switch and the ternary operatorShorter alternatives for many choices or just two.7 min3 🎮
- Loops: for and whileRepeat something without writing it again and again.9 min4 🎮
- Challenge: FizzBuzzThe most famous interview question, with conditions and loops.8 min2 🎮
Island 4
Functions
- FunctionsWrite code once, use it many times.9 min3 🎮
- Arrow functionsA shorter way to write functions, and when not to.6 min4 🎮
- Parameters: default, rest and spreadDefault values, any number of inputs, and spreading arrays.7 min3 🎮
- Scope and closuresWho can see a variable, and how a function remembers values.10 min3 🎮
- Callbacks and higher-order functionsFunctions that take functions: the basis of map, filter and events.8 min3 🎮
Island 5
Arrays
- Array basicsA list of values: add, remove and loop over it.8 min3 🎮
- map, filter and findTransform, filter and search lists without loops.10 min3 🎮
- reduce and sortingFold a list into one value, and sort correctly.9 min3 🎮
- DestructuringPull values out of arrays and objects in one line.7 min3 🎮
Island 6
Objects
- Object basicsGroup information about one thing in one place.8 min3 🎮
- Copies and referencesWhy changing a copy sometimes changes the original.8 min3 🎮
- Methods and thisFunctions inside objects, and what this points to.8 min3 🎮
- JSON and optional chainingHow data travels as text, and reading data that might be missing.8 min3 🎮
Island 7
Classes and OOP
- ClassesA template for making many objects of the same shape.9 min3 🎮
- InheritanceA class that takes everything from another and adds more.8 min3 🎮
Island 8
JavaScript in the page
- Controlling the page (DOM)Find an element on the page and change its text and style.9 min2 🎮
- Creating elementsBuild part of the page with code, from data.8 min2 🎮
- EventsMake the page react when someone clicks or types.9 min2 🎮
- Forms and validationRead form data, validate it, and show clear errors.8 min2 🎮
- Saving in the browser (localStorage)Keep data after the page is closed.7 min2 🎮
Island 9
Errors and async
- Handling errors: try and catchKeep the program alive when something goes wrong.8 min3 🎮
- Timers and the event loopsetTimeout, and why code doesn't always run in the order you expect.9 min2 🎮
- PromisesA promise of a value to come: then, catch and Promise.all.9 min2 🎮
- async and awaitWrite async code that reads like normal code.8 min3 🎮
- Fetching data from an APITalk to a server and show the data it sends.9 min2 🎮
Island 10
Practical tools and techniques
Island 11
Modern JavaScript and a project
- Map and SetKeys of any type, and lists without duplicates.7 min2 🎮
- Dates and localised formattingDate, and showing dates, numbers and money in Arabic and English.7 min2 🎮
- Modules: import and exportSplit code into small files, each doing one job.7 min2 🎮
- Project: a complete to-do appUse everything you learned in a real app that saves its data.15 min2 🎮