Overview

JavaScript Mastery is a progressive, project-based curriculum designed to guide learners from their first line of code to building professional-grade applications. Drawing from Marijn Haverbeke’s acclaimed Eloquent JavaScript (4th Edition), this curriculum transforms complex programming concepts into accessible, engaging weekly lessons.

📚 Table of Contents

Curriculum: JavaScript Adventurer (Level 1)

Curriculum: JavaScript Explorer (Level 2)

Curriculum: JavaScript Master (Level 3)

Curriculum: JavaScript Adventurer (Level 1)

Level: 1
Source: Eloquent JavaScript (4th Edition) by Marijn Haverbeke

Adventurer Term 1: The Basics and Your First Programs

Term Goal: To understand the very basics of computers and programming, learn what values are, and be able to write simple programs using variables, loops, and conditions.

Adventurer Week 1: What is Programming?

Pages Source: Introduction (Pages 1-4), “On Programming” (Pages 2-4)

Lesson Objectives:

  • Understand that a computer is a tool that needs precise instructions.
  • Explain what a program is in simple terms.
  • Learn how to run a simple program in the online sandbox.

Adventurer Week 2: Values, Types, and Numbers

Pages Source: Chapter 1 (Values, Numbers, Arithmetic - Pages 15-19)

Lesson Objectives:

  • Learn that computers work with different “types” of information (values).
  • Understand what numbers are in JavaScript.
  • Use basic arithmetic to make the computer do math for you.

Adventurer Week 3: Strings and Their Magic

Pages Source: Chapter 1 (Strings, Unary Operators - Pages 20-23)

Lesson Objectives:

  • Understand what a “string” is (text).
  • Learn how to use strings in a program.
  • Explore the typeof operator to find out the type of a value.

Adventurer Week 4: True or False? (Booleans)

Pages Source: Chapter 1 (Boolean Values, Comparison - Pages 24-25)

Lesson Objectives:

  • Learn about the Boolean values: true and false.
  • Use comparison operators to create Boolean values.
  • Write code that makes decisions based on a condition.

Adventurer Week 5: Making Choices (Conditional Execution)

Pages Source: Chapter 2 (Conditional execution - Pages 41-43)

Lesson Objectives:

  • Write code that executes only when a condition is true.
  • Use the if, else if, and else statements.
  • Create programs that can “think” and respond to different situations.

Adventurer Week 6: Repeating Actions (while Loops)

Pages Source: Chapter 2 (while and do loops - Pages 43-46)

Lesson Objectives:

  • Use a while loop to repeat a piece of code.
  • Understand the concept of a loop counter.
  • Create a program that counts numbers.

Adventurer Week 7: Repeating Actions (for Loops)

Pages Source: Chapter 2 (for loops - Pages 47-49)

Lesson Objectives:

  • Learn the for loop as a more compact way to repeat code.
  • Understand the three parts of a for loop: initializer, condition, and update.
  • Decide when to use a while loop vs. a for loop.

Adventurer Week 8: Variables (or “Bindings”)

Pages Source: Chapter 2 (Bindings, Binding names - Pages 34-37)

Lesson Objectives:

  • Understand what a variable (or binding) is.
  • Use let and const to create variables.
  • Store values in variables and use them in code.

Adventurer Week 9: Functions (Building Blocks)

Pages Source: Chapter 2 (Functions - Pages 38-39), Chapter 3 (Defining a function - Pages 59-60)

Lesson Objectives:

  • Understand what a function is.
  • Use built-in functions like Math.max and console.log.
  • Write your very own, simple function.

Adventurer Week 10: Project: A Simple Clock

Pages Source: Review Chapters 1 and 2.

Lesson Objectives:

  • Apply knowledge of variables, loops, and console.log.
  • Build a small, complete program.
  • Create a simple clock that counts seconds.

Adventurer Week 11: Project: FizzBuzz (Part 1)

Pages Source: Chapter 2 Exercises (FizzBuzz - Page 56)

Lesson Objectives:

  • Practice using loops and conditions.
  • Solve a classic programming problem (part one).
  • Write a program that prints special words for special numbers.

Adventurer Week 12: Term Review and Showcase

Pages Source: N/A

Lesson Objectives:

  • Review all concepts learned in Term 1.
  • Showcase a project of your choice.
  • Celebrate your progress!

Adventurer Term 2: Data Structures and Functional Programming

Term Goal: To learn how to group information into collections (arrays) and real-world things (objects), and to write flexible code using functions that can work with different kinds of data.

Adventurer Week 13: What are Data Structures?

Pages Source: Chapter 4 (Introduction, The Werequrrel - Pages 84-85)

Lesson Objectives:

  • Understand that programs need to organize information.
  • Learn that “data structures” are like special containers for data.
  • Explore the problem of tracking data (like the weresquirrel’s journal).

Adventurer Week 14: Your First List! (Arrays)

Pages Source: Chapter 4 (Datasets - Pages 86-87)

Lesson Objectives:

  • Create and use an array to store a list of values.
  • Access individual items in an array using their index.
  • Understand that array indices start at 0.

Adventurer Week 15: Playing with Arrays

Pages Source: Chapter 4 (Methods, Further Arrayology - Pages 88-89, 105-107)

Lesson Objectives:

  • Learn powerful methods to work with arrays.
  • Use push to add items and pop to remove the last item.
  • Use indexOf to find an item in an array.

Adventurer Week 16: Objects: Describing Things

Pages Source: Chapter 4 (Objects - Pages 90-93)

Lesson Objectives:

  • Understand that an object is a way to group related information.
  • Create an object using curly braces {}.
  • Access and change the properties of an object.

Adventurer Week 17: Mutability: Changing Things

Pages Source: Chapter 4 (Mutability - Pages 94-95)

Lesson Objectives:

  • Understand the difference between simple values (Numbers, Strings) and complex values (Objects).
  • Learn that you can change the properties of an object.
  • Understand why changing an object in one place can affect it in another.

Adventurer Week 18: The Weresquirrel’s Log (Project Part 1)

Pages Source: Chapter 4 (The lycanthrope’s log - Pages 96-97)

Lesson Objectives:

  • Apply knowledge of arrays and objects to a real problem.
  • Understand how to model a log entry as an object.
  • Build a small program to store journal entries.

Adventurer Week 19: Finding Data in the Log (Project Part 2)

Pages Source: Chapter 4 (Computing correlation - Pages 99-101)

Lesson Objectives:

  • Write a function to search through a log for specific events.
  • Use the includes method to check for an event in an array.
  • Practice building a table of counts (frequency table).

Adventurer Week 20: Functions are Values

Pages Source: Chapter 5 (Higher-Order Functions, Abstracting repetition - Pages 122-126)

Lesson Objectives:

  • Understand that functions can be used like any other value.
  • Learn how to pass a function as an argument to another function.
  • Understand the concept of “abstraction.”

Adventurer Week 21: ForEach and Filter

Pages Source: Chapter 5 (Higher-Order Functions - Page 126, Filtering arrays - Pages 130-131)

Lesson Objectives:

  • Use the forEach method to loop over an array.
  • Use the filter method to create a new array with only the items we want.

Adventurer Week 22: Map and Reduce

Pages Source: Chapter 5 (Transforming with map, Summarizing with reduce - Pages 131-134)

Lesson Objectives:

  • Use the map method to transform every item in an array.
  • Use the reduce method to combine all items into a single value.

Adventurer Week 23: Project: Build a Robot! (Intro)

Pages Source: Chapter 7 (The Task, Persistent Data - Pages 177-180)

Lesson Objectives:

  • Understand the concept of a persistent (unchanging) state.
  • Learn how to model a simple virtual world.
  • Simulate moving an object in a graph (road network).

Adventurer Week 24: Term Review and Showcase

Pages Source: N/A

Lesson Objectives:

  • Review all concepts learned in Term 2.
  • Showcase a project of your choice.
  • Celebrate your progress!

Adventurer Term 3: The Browser and Interactive Projects

Term Goal: To create an interactive, graphical project (like a mini-game, a drawing app, or a story generator) by combining programming logic with HTML and CSS. The primary focus is on the “Project: A Pixel Art Editor” from the book.

Adventurer Week 25: Introduction to the Browser World

Pages Source: Chapter 13 (JavaScript and the Browser, The Web, HTML - Pages 321-328)

Lesson Objectives:

  • Understand that JavaScript can also run in a web browser.
  • Learn what HTML is and how it structures a webpage.
  • Understand what a “tag” is and how it works (like <h1> and <p>).

Adventurer Week 26: Your First Interactive Page

Pages Source: Chapter 13 (HTML and JavaScript - Pages 329-330)

Lesson Objectives:

  • Learn how to add JavaScript to an HTML page using the <script> tag.
  • Use the alert function to create a pop-up.
  • Understand the difference between the HTML structure and the JavaScript behavior.

Adventurer Week 27: The Document Object Model (DOM)

Pages Source: Chapter 14 (Document structure, Trees - Pages 334-337)

Lesson Objectives:

  • Understand what the DOM is and how it represents a webpage.
  • Understand the concept of a “tree” structure.
  • Use document.body to access the body of a page.

Adventurer Week 28: Finding and Changing Elements

Pages Source: Chapter 14 (Finding elements, Changing the document - Pages 341-343)

Lesson Objectives:

  • Use document.querySelector and getElementById to find elements.
  • Change the content of elements using textContent.
  • Understand how to use appendChild to add new elements.

Adventurer Week 29: Handling Events

Pages Source: Chapter 15 (Event handlers, Events and DOM nodes - Pages 363-366)

Lesson Objectives:

  • Understand what an event is (like a click).
  • Use addEventListener to make code run when an event happens.
  • Make a button that responds to a click.

Adventurer Week 30: The Pixel Art Editor (Getting Started)

Pages Source: Chapter 19 (Components, The state - Pages 495-500)

Lesson Objectives:

  • Understand the goal of the Pixel Art Editor.
  • Understand the concept of “state” in an application.
  • Set up the basic structure of the editor.

Adventurer Week 31: The Pixel Art Editor (Drawing)

Pages Source: Chapter 19 (The canvas, The application - Pages 502-508)

Lesson Objectives:

  • Understand how the canvas is used to display the picture.
  • Explore the drawPicture function.
  • Learn about the “dispatch” function for updating the state.

Adventurer Week 32: The Pixel Art Editor (Tools)

Pages Source: Chapter 19 (Drawing tools - Pages 509-512)

Lesson Objectives:

  • Explore the code for different drawing tools.
  • Modify or create a new tool.
  • Understand the “flood fill” tool.

Adventurer Week 33: The Pixel Art Editor (Saving & Loading)

Pages Source: Chapter 19 (Saving and loading - Pages 513-517)

Lesson Objectives:

  • Understand how to save a picture as an image file.
  • Understand how to load an image from a file.
  • Explore the SaveButton and LoadButton components.

Adventurer Week 34: The Pixel Art Editor (Undo History)

Pages Source: Chapter 19 (Undo history - Pages 517-519)

Lesson Objectives:

  • Understand the importance of an undo feature.
  • Learn how to store a history of changes.
  • Understand the historyUpdateState function.

Adventurer Week 35: Putting it All Together & Final Polish

Pages Source: Chapter 19 (Let’s draw - Pages 519-522)

Lesson Objectives:

  • Launch a working Pixel Art Editor.
  • Understand how all the pieces fit together.
  • Make the project your own!

Adventurer Week 36: Term Review and Showcase

Pages Source: N/A

Lesson Objectives:

  • Review all concepts learned in Term 3.
  • Showcase a project of your choice.
  • Celebrate your progress!

Curriculum: JavaScript Explorer (Level 2)

Level: 2
Source: Eloquent JavaScript (4th Edition) by Marijn Haverbeke

Explorer Term 1: Core Concepts and Problem Solving

Term Goal: To solidify the understanding of fundamental JavaScript concepts and to develop strong problem-solving skills through algorithmic thinking and code organization.

Explorer Week 1: The Big Picture

Pages Source: Introduction (Pages 1-14)

Lesson Objectives:

  • Understand the history and purpose of JavaScript.
  • Learn what a programming language is and why it matters.
  • Get comfortable with the structure of the book and the online sandbox.

Explorer Week 2: The Building Blocks (Values, Types, and Operators)

Pages Source: Chapter 1 (Pages 15-31)

Lesson Objectives:

  • Master the different data types: Numbers, Strings, Booleans, and undefined/null.
  • Understand and use arithmetic, comparison, and logical operators.
  • Learn the rules of automatic type conversion and why it can be tricky.

Explorer Week 3: Program Structure (Statements and Control Flow)

Pages Source: Chapter 2 (Pages 32-57)

Lesson Objectives:

  • Understand the difference between expressions and statements.
  • Use if, else if, and else for conditional logic.
  • Master while and for loops for repetition.

Explorer Week 4: Functions (The Foundation)

Pages Source: Chapter 3 (Pages 58-83)

Lesson Objectives:

  • Understand how to define and use functions.
  • Learn about parameters, arguments, and return values.
  • Explore the concept of scope (global vs. local).

Explorer Week 5: Advanced Functions (Closures and Recursion)

Pages Source: Chapter 3 (Closure, Recursion, Growing functions - Pages 70-77)

Lesson Objectives:

  • Understand the concept of closures and their practical use.
  • Learn about recursion and when it’s a useful approach.
  • Write functions that are more flexible and powerful.

Explorer Week 6: Data Structures (Objects and Arrays)

Pages Source: Chapter 4 (Pages 84-117)

Lesson Objectives:

  • Master the creation and manipulation of arrays.
  • Master the creation and manipulation of objects.
  • Understand the difference between mutability and immutability.

Explorer Week 7: The Weresquirrel Project (Data Analysis)

Pages Source: Chapter 4 (The lycanthrope’s log, Computing correlation - Pages 96-104)

Lesson Objectives:

  • Write code to analyze a real-world dataset.
  • Calculate the correlation coefficient (phi) for different events.
  • Use loops and array methods to process data.

Explorer Week 8: Higher-Order Functions (Part 1)

Pages Source: Chapter 5 (Abstraction, Higher-Order Functions - Pages 122-129)

Lesson Objectives:

  • Understand the concept of abstraction and its benefits.
  • Learn what higher-order functions are.
  • Use forEach and filter in your own code.

Explorer Week 9: Higher-Order Functions (Part 2)

Pages Source: Chapter 5 (Transforming with map, Summarizing with reduce - Pages 131-136)

Lesson Objectives:

  • Use map to transform arrays.
  • Use reduce to combine arrays into a single value.
  • Learn about “composability” and why it’s powerful.

Explorer Week 10: Project: The Language Robot (Intro)

Pages Source: Chapter 7 (Meadowfield, The task, Persistent data - Pages 175-180)

Lesson Objectives:

  • Set up the project and understand its goals.
  • Build the graph of the village.
  • Create the VillageState class.

Explorer Week 11: Project: The Language Robot (Algorithms)

Pages Source: Chapter 7 (Simulation, The mail truck’s route, Pathfinding - Pages 182-188)

Lesson Objectives:

  • Implement a “route-following” robot.
  • Implement a pathfinding algorithm.
  • Understand the concept of a “search problem.”

Explorer Week 12: Term Review and Showcase

Pages Source: N/A

Lesson Objectives:

  • Review all concepts learned in Term 1.
  • Showcase a project of your choice.
  • Celebrate your progress!

Explorer Term 2: The Secret Life of Objects and Modularity

Term Goal: To understand the object-oriented nature of JavaScript (prototypes, classes, inheritance) and learn how to structure larger programs using modules.

Explorer Week 13: Methods and Prototypes

Pages Source: Chapter 6 (Methods, Prototypes - Pages 146-150)

Lesson Objectives:

  • Understand how methods work and the role of the this keyword.
  • Understand the prototype chain.
  • Use Object.create and Object.getPrototypeOf.

Explorer Week 14: Classes and Private Properties

Pages Source: Chapter 6 (Classes, Private properties - Pages 150-154)

Lesson Objectives:

  • Define classes using the class keyword.
  • Understand constructors and instance methods.
  • Use private properties (with #) for encapsulation.

Explorer Week 15: Overriding and Maps

Pages Source: Chapter 6 (Overriding derived properties, Maps - Pages 155-159)

Lesson Objectives:

  • Understand how to override properties from a prototype.
  • Learn about the Map data structure.
  • Understand the difference between an object and a Map for storing key-value pairs.

Explorer Week 16: Getters, Setters, and Symbols

Pages Source: Chapter 6 (Getters, setters, and statics, Symbols - Pages 161-164)

Lesson Objectives:

  • Use getters and setters to control access to properties.
  • Understand what symbols are and why they’re useful.
  • Learn about static methods.

Explorer Week 17: The Iterator Interface and Inheritance

Pages Source: Chapter 6 (The iterator interface, Inheritance - Pages 165-170)

Lesson Objectives:

  • Understand the iterator protocol (Symbol.iterator, next).
  • Use for/of with custom objects.
  • Understand inheritance and the extends keyword.

Explorer Week 18: Modules (ES Modules)

Pages Source: Chapter 10 (ES modules - Pages 251-253)

Lesson Objectives:

  • Understand the concept of modules and why they are important.
  • Use import and export to build a modular program.
  • Learn the difference between named exports and default exports.

Explorer Week 19: Packages and CommonJS

Pages Source: Chapter 10 (Packages, CommonJS modules - Pages 254-260)

Lesson Objectives:

  • Understand what a package is and how NPM works.
  • Understand the CommonJS module system (require, exports).
  • Learn how to use packages from NPM.

Explorer Week 20: Building and Bundling

Pages Source: Chapter 10 (Building and bundling, Module design - Pages 261-265)

Lesson Objectives:

  • Understand why we need build tools (transpilers, bundlers, minifiers).
  • Learn principles of good module design.
  • Apply these principles to the Robot project.

Explorer Week 21: Project: A Modular Robot

Pages Source: Chapter 7 (Exercises - Pages 189-190)

Lesson Objectives:

  • Refactor the Robot project into separate modules.
  • Apply module design principles.
  • Understand how modules help manage complexity.

Explorer Week 22: Error Handling (Bugs and Errors)

Pages Source: Chapter 8 (Pages 191-213)

Lesson Objectives:

  • Understand different types of errors and how to handle them.
  • Use try, catch, and finally.
  • Learn about strict mode and assertions.

Explorer Week 23: Asynchronous Programming (Intro)

Pages Source: Chapter 11 (Asynchronicity, Callbacks - Pages 269-272)

Lesson Objectives:

  • Understand the difference between synchronous and asynchronous code.
  • Understand the concept of a callback function.
  • Write simple asynchronous code with setTimeout.

Explorer Week 24: Term Review and Showcase

Pages Source: N/A

Lesson Objectives:

  • Review all concepts learned in Term 2.
  • Showcase a project of your choice.
  • Celebrate your progress!

Explorer Term 3: Advanced Topics and Real-World Applications

Term Goal: To understand advanced JavaScript concepts like Promises and the browser DOM, and to build a complete, interactive web application.

Explorer Week 25: Promises

Pages Source: Chapter 11 (Promises, Failure - Pages 273-279)

Lesson Objectives:

  • Understand what a Promise is and why it’s better than callbacks.
  • Use .then() and .catch() to handle asynchronous results and errors.
  • Chain promises together.

Explorer Week 26: Async Functions

Pages Source: Chapter 11 (Async functions - Pages 283-285)

Lesson Objectives:

  • Use the async and await keywords.
  • Write asynchronous code that looks and behaves like synchronous code.
  • Understand how to handle errors in async functions.

Explorer Week 27: The Browser Environment

Pages Source: Chapter 13 (Networks and the Internet, The Web, HTML - Pages 322-328)

Lesson Objectives:

  • Understand the basics of networks, the internet, and the World Wide Web.
  • Understand the structure of an HTML document.
  • Use the browser’s developer tools.

Explorer Week 28: The Document Object Model (DOM)

Pages Source: Chapter 14 (Document structure, Trees, Moving through the tree - Pages 334-341)

Lesson Objectives:

  • Master DOM navigation and manipulation.
  • Use properties like parentNode, childNodes, firstChild, nextSibling.
  • Understand the difference between NodeLists and arrays.

Explorer Week 29: DOM Manipulation and Styling

Pages Source: Chapter 14 (Changing the document, Creating nodes, Attributes, Layout, Styling - Pages 342-352)

Lesson Objectives:

  • Create, insert, and delete DOM elements.
  • Use createElement and appendChild.
  • Manipulate element attributes and styles.
  • Understand the concept of layout and how to read element positions.

Explorer Week 30: Handling User Input (Events)

Pages Source: Chapter 15 (Handling Events - Pages 363-389)

Lesson Objectives:

  • Write robust event handlers for mouse, keyboard, and touch events.
  • Understand event propagation (bubbling and capturing).
  • Prevent default behavior.

Explorer Week 31: Project: A Pixel Art Editor (Intro)

Pages Source: Chapter 19 (Pages 495-500)

Lesson Objectives:

  • Understand the project goals and architecture.
  • Set up the project and understand the core Picture class.
  • Implement the drawPicture function.

Explorer Week 32: Project: A Pixel Art Editor (Components)

Pages Source: Chapter 19 (Components, DOM building, The canvas, The application - Pages 495-509)

Lesson Objectives:

  • Implement the main application component (PixelEditor).
  • Implement the PictureCanvas component.
  • Implement the tool selection and color selection controls.

Explorer Week 33: Project: A Pixel Art Editor (Tools)

Pages Source: Chapter 19 (Drawing tools - Pages 509-512)

Lesson Objectives:

  • Implement the draw, rectangle, fill, and pick tools.
  • Understand how tools interact with the dispatch function.
  • Write code to draw lines and shapes.

Explorer Week 34: Project: A Pixel Art Editor (Saving, Loading, and Undo)

Pages Source: Chapter 19 (Saving and loading, Undo history, Let’s draw - Pages 513-521)

Lesson Objectives:

  • Implement the SaveButton and LoadButton.
  • Implement the undo history.
  • Launch and test the complete application.

Explorer Week 35: Project: A Pixel Art Editor (Polishing and Extending)

Pages Source: Chapter 19 (Exercises - Pages 522-525)

Lesson Objectives:

  • Add new features to the Pixel Art Editor.
  • Complete the “Keyboard shortcuts” and “Circle tool” exercises.
  • Make the project your own.

Explorer Week 36: Term Review and Showcase

Pages Source: N/A

Lesson Objectives:

  • Review all concepts learned in Term 3.
  • Showcase a project of your choice.
  • Celebrate your progress!

Curriculum: JavaScript Master (Level 3)

Level: 3
Source: Eloquent JavaScript (4th Edition) by Marijn Haverbeke

Master Term 1: Advanced Language Features and Problem Solving

Term Goal: To master advanced JavaScript language features including regular expressions, error handling, and modules, and to build a complex project (a platform game).

Master Week 1: Introduction to Regular Expressions

Pages Source: Chapter 9 (Creating a regular expression, Testing for matches, Sets of characters - Pages 214-218)

Lesson Objectives:

  • Understand what regular expressions are and why they are useful.
  • Create regular expressions using literals (/…/) and the RegExp constructor.
  • Use the test method to check for matches.
  • Use character sets ([abc], [a-z], \d, \w, \s) to match patterns.

Master Week 2: Repetition and Grouping in Regexps

Pages Source: Chapter 9 (Repeating parts of a pattern, Grouping subexpressions - Pages 220-224)

Lesson Objectives:

  • Use repetition operators (+, *, ?, {n,m}) to match patterns that occur multiple times.
  • Use parentheses to group parts of a pattern.
  • Understand the difference between greedy and nongreedy matching.

Master Week 3: Advanced Regexp Features

Pages Source: Chapter 9 (Matches and groups, The Date class, Boundaries and look-ahead, Choice patterns, The mechanics of matching - Pages 224-229)

Lesson Objectives:

  • Use the exec method to get detailed match information.
  • Use capturing groups to extract parts of a match.
  • Understand the ^ and $ boundary markers.
  • Use look-ahead assertions ((?=…)).
  • Use the operator for alternative patterns.
  • Understand the regexp matching algorithm (backtracking).

Master Week 4: Practical Regexp Applications

Pages Source: Chapter 9 (The replace method, Greed, Dynamically creating RegExp objects, The search method, The lastIndex property, Parsing an INI file - Pages 232-243)

Lesson Objectives:

  • Use replace with regular expressions to perform complex string transformations.
  • Understand and avoid common regexp pitfalls (greediness, lastIndex).
  • Dynamically create regular expressions.
  • Build a practical INI file parser using regexps.

Master Week 5: Error Handling and Debugging (Advanced)

Pages Source: Chapter 8 (Language, Strict mode, Types, Testing, Debugging - Pages 191-200)

Lesson Objectives:

  • Master the use of try/catch/finally for robust error handling.
  • Understand how to write and use assertions.
  • Learn advanced debugging techniques (using debugger, browser dev tools).
  • Understand the value of automated testing.

Master Week 6: Modules (Deep Dive)

Pages Source: Chapter 10 (ES modules, CommonJS modules, Building and bundling, Module design - Pages 251-265)

Lesson Objectives:

  • Understand the ES module system in depth (import/export syntax, default exports).
  • Understand the CommonJS module system (require/exports).
  • Learn about packages, NPM, and versioning.
  • Design modular programs with clear interfaces.

Master Week 7: Project: A Modular Robot (Refactoring)

Pages Source: Chapter 7 (Project: A Robot) and Chapter 10 (Exercises)

Lesson Objectives:

  • Refactor the Robot project into a set of well-designed modules.
  • Use ES modules to manage dependencies.
  • Apply module design principles in practice.

Master Week 8: Project: A Platform Game (Introduction)

Pages Source: Chapter 16 (The game, The technology, Levels - Pages 390-393)

Lesson Objectives:

  • Understand the architecture of a platform game.
  • Design levels using a string-based plan.
  • Read and parse level data into a structured format.

Master Week 9: Project: A Platform Game (Actors and Collision)

Pages Source: Chapter 16 (Actors, Drawing, Motion and collision - Pages 396-414)

Lesson Objectives:

  • Implement the actor classes (Player, Lava, Coin).
  • Implement collision detection between actors and the background grid.
  • Implement the game’s physics (gravity, jumping, movement).

Master Week 10: Project: A Platform Game (Display and Control)

Pages Source: Chapter 16 (Drawing, Tracking keys, Running the game - Pages 402-410, 417-421)

Lesson Objectives:

  • Implement the DOMDisplay class to render the game.
  • Handle keyboard input.
  • Run the game loop using requestAnimationFrame.
  • Manage game state (lives, levels).

Master Week 11: Project: A Platform Game (Canvas Display)

Pages Source: Chapter 17 (Back to the game - Pages 447-454)

Lesson Objectives:

  • Implement a canvas-based display system (CanvasDisplay).
  • Understand the trade-offs between DOM and canvas rendering.
  • Use sprites to make the game look more polished.

Master Week 12: Term Review and Showcase

Pages Source: N/A

Lesson Objectives:

  • Review all concepts learned in Term 1.
  • Showcase a project of your choice.
  • Celebrate your progress!

Master Term 2: The Browser, HTTP, and Full-Stack Development

Term Goal: To master the browser environment, understand how the web works (HTTP, forms), and build interactive web applications.

Master Week 13: HTTP and the Web (Deep Dive)

Pages Source: Chapter 18 (The protocol, Browsers and HTTP, Fetch - Pages 461-468)

Lesson Objectives:

  • Understand the HTTP protocol in detail (methods, status codes, headers).
  • Understand how browsers make requests and handle responses.
  • Use the fetch API to make HTTP requests from JavaScript.

Master Week 14: HTTP and Forms (Client-Side)

Pages Source: Chapter 18 (Form fields, Focus, Disabled fields, The form as a whole - Pages 472-479)

Lesson Objectives:

  • Master HTML forms and form fields (text, password, checkbox, radio, select, file).
  • Handle form submission and validation with JavaScript.
  • Use the FormData object.

Master Week 15: Advanced Form Fields and File Handling

Pages Source: Chapter 18 (Text fields, Checkboxes and radio buttons, Select fields, File fields - Pages 479-487)

Lesson Objectives:

  • Work with text fields, including selectionStart and selectionEnd.
  • Handle checkboxes and radio buttons.
  • Handle multiple-choice select fields.
  • Read and process files selected by the user.

Master Week 16: Client-Side Data Storage

Pages Source: Chapter 18 (Storing data client-side - Pages 487-491)

Lesson Objectives:

  • Understand the localStorage and sessionStorage APIs.
  • Use JSON to serialize and deserialize complex data.
  • Build a persistent, client-side application.

Master Week 17: Advanced Event Handling

Pages Source: Chapter 15 (Events and the event loop, Timers, Debouncing - Pages 382-387)

Lesson Objectives:

  • Understand the event loop and how it affects event handling.
  • Use setTimeout and setInterval to schedule tasks.
  • Implement debouncing and throttling for performance.

Master Week 18: Asynchronous Programming (Promises and Async)

Pages Source: Chapter 11 (Promises, Failure, Async functions, Generators - Pages 273-287)

Lesson Objectives:

  • Master Promises (creating, chaining, error handling).
  • Master async/await for writing clean asynchronous code.
  • Understand Generators and their relationship to async functions.
  • Complete the “Quiet Times” exercise.

Master Week 19: Project: A Skill-Sharing Website (Design)

Pages Source: Chapter 21 (Design, Long polling - Pages 552-555)

Lesson Objectives:

  • Understand the architecture of a full-stack web application.
  • Understand the concept of long polling for real-time updates.
  • Design the HTTP interface for the application.

Master Week 20: Project: A Skill-Sharing Website (Server)

Pages Source: Chapter 21 (The server - Pages 559-569)

Lesson Objectives:

  • Implement the server-side of the application using Node.js.
  • Build a router and serve static files.
  • Implement the HTTP interface for talks and comments.
  • Implement the long polling mechanism.

Master Week 21: Project: A Skill-Sharing Website (Client)

Pages Source: Chapter 21 (The client - Pages 570-579)

Lesson Objectives:

  • Implement the client-side of the application in the browser.
  • Use the fetch API to communicate with the server.
  • Implement the UI components and the polling loop.

Master Week 22: Project: A Skill-Sharing Website (Persistence)

Pages Source: Chapter 21 (Exercises - Page 580)

Lesson Objectives:

  • Add disk persistence to the server.
  • Save talks to a file and reload them on server restart.
  • Complete the “Disk persistence” exercise.

Master Week 23: Project: A Skill-Sharing Website (Polishing)

Pages Source: Chapter 21 (Exercises - Page 580)

Lesson Objectives:

  • Fix the comment field reset issue.
  • Add additional features (edit talks, delete comments, etc.).
  • Deploy the application.

Master Week 24: Term Review and Showcase

Pages Source: N/A

Lesson Objectives:

  • Review all concepts learned in Term 2.
  • Showcase a project of your choice.
  • Celebrate your progress!
<
Previous Post
How to Use Google Drive Images as a Source on Your Website
>
Next Post
Zen Text Reader · calm voice