JavaScript from Zero: Build Interactive Web Pages

What's inside

1. Level 1: Where JavaScript Runs: Meet the Browser ConsoleFree
   Learn that JavaScript runs inside the browser alongside HTML, and use the DevTools console and a script tag to run your first code for the to-do project.
2. Level 2: Values, Types and Variables with let and constFree
   Store the to-do app's first pieces of data in variables, learn the basic value types, and choose between let and const.
3. Level 3: Strings and Template Literals
   Build readable text for to-do items using string methods and template literals instead of messy concatenation.
4. Level 4: Numbers and Maths
   Count and calculate with JavaScript numbers, convert text to numbers safely, and recognise floating-point and NaN surprises.
5. Level 5: Conditions and Comparison: === versus ==
   Make decisions in code with if/else, logical operators and strict comparison, and understand truthy and falsy values.
6. Level 6: Loops: Repeating Work
   Repeat actions with for, while and for...of loops to process several to-do entries without copy-pasting code.
7. Level 7: Functions and Arrow Functions
   Package repeated logic into reusable functions with parameters and return values, written both as function declarations and arrow functions.
8. Level 8: Arrays: Storing a List of To-dos
   Hold the to-do list in an array and add, read, update and remove items by index.
9. Level 9: Array Methods: map, filter, find and reduce
   Transform and query the to-do list with callback-based array methods instead of hand-written loops.
10. Level 10: Objects and JSON
    Model each to-do as an object with named properties and convert the whole list to and from JSON text.
11. Level 11: The DOM: Selecting and Changing the Page
    Find elements on the page with querySelector and change their text, classes and content from JavaScript.
12. Level 12: Events: Responding to Clicks
    Make the to-do list react to the user with addEventListener, the event object and event delegation.
13. Level 13: Forms: Adding Tasks from User Input
    Handle form submission to add new to-dos, stop the default page reload, and validate input before using it.
14. Level 14: Saving Data with localStorage
    Persist the to-do list in localStorage so it survives a page reload, and load it back safely on startup.
15. Level 15: Fetching Data with fetch and Promises
    Load starter to-dos or quiz questions from a real API using fetch and promise chains with then.
16. Level 16: Rewriting with async and await
    Rewrite the promise-based fetch code with async functions and await so it reads top to bottom.
17. Level 17: Handling Errors Properly
    Handle network failures, bad HTTP status codes and invalid JSON with try/catch and response.ok, and show the user a useful message.
18. Level 18: Splitting Code into ES Modules
    Organise the project into separate files with import and export and load them with a module script tag.
19. Level 19: Debugging with DevTools and Common Mistakes
    Track down bugs with breakpoints, the Sources and Network panels, and learn the beginner mistakes that cause most of them.
20. Level 20: Final Challenge: Build and Ship an Interactive App Exam
    Bring the whole course together by building, testing and debugging a complete to-do or quiz app with DOM rendering, forms, localStorage, async fetch with error handling and modules, then reviewing it honestly with an AI assistant and choosing your next step.

Access

The first 2 levels are free with a free account. Every level, the podcast edition and the AI tutor come with All Access at £4.99/month or any Creator plan — see pricing.

Start free →