This course teaches modern JavaScript through short explanations, runnable examples, expected output and exercises. It begins with language fundamentals and gradually moves into functions, data structures, DOM interaction, browser APIs, asynchronous requests and maintainable project architecture.

The final project brings these skills together in an interactive application. You will also learn debugging, safe handling of user input and how to read documentation when you encounter unfamiliar APIs.

What You'll Learn

Write JavaScript using modern syntax and reliable programming patterns
Work with strings, numbers, arrays, objects, maps and sets
Build reusable functions and understand scope and closures
Manipulate the DOM and handle user events
Use modules, Fetch, Promises and async/await
Build, test and debug an interactive browser application

Requirements

Basic HTML familiarity recommended
A modern browser and code editor
No prior JavaScript programming experience required

Module 01 of 10

JavaScript Setup and First Programs

Run JavaScript in the browser and understand the execution environment.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 1.1 · Module 01

What JavaScript Does

Understand JavaScript's role in web pages and how it differs from HTML and CSS.

What you will learn

Understand JavaScript's role in web pages and how it differs from HTML and CSS.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

JavaScript can respond to events, update the DOM, calculate values and request data. Browser JavaScript and server-side JavaScript share the language but expose different APIs.

Code example

console.log("Hello, JavaScript!");

Expected result

Open DevTools and find the message in the console.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 1.2 · Module 01

Script Tags and External Files

Load JavaScript with script, defer and modules.

What you will learn

Load JavaScript with script, defer and modules.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

External files are easier to maintain. defer downloads scripts while HTML parsing continues and executes them after parsing; module scripts are deferred by default.

Code example

<script src="app.js" defer></script>

Expected result

Move an inline script into app.js.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 1.3 · Module 01

Console, Errors and Developer Tools

Use console output, source locations and breakpoints.

What you will learn

Use console output, source locations and breakpoints.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Read the first useful error line and inspect the source location. Breakpoints let you pause execution and inspect variables rather than guessing.

Code example

const course = "JavaScript";\nconsole.log({ course });

Expected result

Create an intentional typo, inspect the error, then fix it.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 1.4 · Module 01

Variables with let, const and var

Choose declarations and understand reassignment.

What you will learn

Choose declarations and understand reassignment.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Use const by default when a binding will not be reassigned, let when reassignment is needed, and understand var mainly for legacy code. const does not make object contents immutable.

Code example

const name = "Bigyan";\nlet lessonsCompleted = 0;\nlessonsCompleted += 1;\nconsole.log(name, lessonsCompleted);

Expected result

Declare values and predict which assignments are allowed.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 02 of 10

Data Types, Operators and Conversion

Work safely with primitive values and comparisons.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 2.1 · Module 02

Strings, Numbers, Booleans, null and undefined

Recognize common primitive types and their behaviour.

What you will learn

Recognize common primitive types and their behaviour.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

JavaScript has dynamic typing. typeof is useful but has historical quirks, including typeof null returning "object". Use explicit checks when type distinctions matter.

Code example

const title = "HTML Basics";\nconst hours = 12;\nconst published = true;\nlet summary;\nconsole.log(typeof title, typeof hours, summary);

Expected result

Log the types of several values.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 2.2 · Module 02

Arithmetic, Comparison and Logical Operators

Use operators and understand strict equality.

What you will learn

Use operators and understand strict equality.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Prefer === and !== to avoid implicit coercion surprises. &&, || and ! combine or invert boolean-like conditions; short-circuiting affects which expressions execute.

Code example

const age = 18;\nconsole.log(age >= 18);\nconsole.log(5 === "5");

Expected result

Predict comparison results and explain them.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 2.3 · Module 02

Type Conversion and Truthy Values

Convert values deliberately and understand truthiness.

What you will learn

Convert values deliberately and understand truthiness.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Boolean contexts treat values such as 0, empty string, null, undefined and NaN as falsy; empty arrays and objects are truthy. Avoid relying on surprising implicit conversion.

Code example

console.log(Number("42"));\nconsole.log(String(42));\nconsole.log(Boolean(""));

Expected result

Test truthy and falsy values in an array.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 2.4 · Module 02

Template Literals and Useful String Methods

Interpolate expressions and manipulate strings.

What you will learn

Interpolate expressions and manipulate strings.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Template literals use backticks and ${...}. String methods such as trim, includes, slice and toLowerCase return values rather than changing the original string.

Code example

const learner = "Asha";\nconst message = `Welcome, ${learner}!`;\nconsole.log(message.trim().toLowerCase());

Expected result

Build a formatted course summary.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 03 of 10

Conditions, Loops and Program Flow

Make decisions and repeat work with clear control flow.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 3.1 · Module 03

if, else if and else

Create branching logic for multiple conditions.

What you will learn

Create branching logic for multiple conditions.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Put the most meaningful conditions in a clear order. Avoid deeply nested branches when early returns or helper functions would make the logic easier to read.

Code example

const score = 82;\nif (score >= 80) console.log("Excellent");\nelse if (score >= 60) console.log("Passed");\nelse console.log("Keep practising");

Expected result

Write a grading decision with documented boundaries.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 3.2 · Module 03

switch and Conditional Expressions

Choose switch or a ternary when they improve clarity.

What you will learn

Choose switch or a ternary when they improve clarity.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Use switch for a set of discrete cases and a ternary for a concise expression. Do not compress complex branching into unreadable nested ternaries.

Code example

const role = "student";\nswitch (role) {\n  case "admin": console.log("Manage site"); break;\n  case "student": console.log("Learn lessons"); break;\n  default: console.log("Guest access");\n}

Expected result

Handle three user roles.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 3.3 · Module 03

for, while and for...of Loops

Repeat tasks and iterate over iterable values.

What you will learn

Repeat tasks and iterate over iterable values.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Choose the loop form that best communicates the task. Watch loop boundaries and update conditions to avoid infinite loops.

Code example

const topics = ["HTML", "CSS", "JavaScript"];\nfor (const topic of topics) {\n  console.log(topic);\n}

Expected result

Print each item and its position.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 3.4 · Module 03

break, continue and Error-Prone Loops

Control loop execution and debug off-by-one errors.

What you will learn

Control loop execution and debug off-by-one errors.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Use break to exit and continue to skip the rest of an iteration. Prefer loops with visible termination conditions and avoid mutating the collection unexpectedly while iterating.

Code example

for (let n = 1; n <= 5; n++) {\n  if (n === 3) continue;\n  console.log(n);\n}

Expected result

Predict the output and repair an off-by-one bug.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 04 of 10

Functions, Scope and Reusable Logic

Write functions with clear inputs, outputs and responsibilities.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 4.1 · Module 04

Function Declarations and Return Values

Define functions and distinguish return from console.log.

What you will learn

Define functions and distinguish return from console.log.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

A function can accept parameters and return a result. console.log displays a value but does not return it from the function.

Code example

function add(a, b) {\n  return a + b;\n}\nconsole.log(add(3, 4));

Expected result

Write functions for subtraction, multiplication and formatting.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 4.2 · Module 04

Function Expressions and Arrow Functions

Use function expressions and arrow syntax appropriately.

What you will learn

Use function expressions and arrow syntax appropriately.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Arrow functions have lexical this and are useful for callbacks. They are not interchangeable with every regular function, especially methods that depend on their own this.

Code example

const double = number => number * 2;\nconsole.log(double(6));

Expected result

Rewrite a callback using an arrow function.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 4.3 · Module 04

Parameters, Defaults and Rest Parameters

Handle optional inputs and variable numbers of arguments.

What you will learn

Handle optional inputs and variable numbers of arguments.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Default parameters apply when an argument is missing or undefined. Rest parameters gather remaining arguments into an array.

Code example

function greet(name = "learner") {\n  return `Hello, ${name}`;\n}\nfunction total(...values) { return values.reduce((sum, value) => sum + value, 0); }

Expected result

Create a function that totals an arbitrary list of numbers.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 4.4 · Module 04

Scope, Closures and Hoisting

Understand lexical scope and how functions retain access to outer variables.

What you will learn

Understand lexical scope and how functions retain access to outer variables.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

A closure is created when a function retains access to variables from its lexical environment. let and const are block-scoped; var has function scope and different initialization behaviour.

Code example

function makeCounter() {\n  let count = 0;\n  return () => ++count;\n}\nconst next = makeCounter();\nconsole.log(next(), next());

Expected result

Build a private counter and explain its state.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 05 of 10

Arrays and Objects

Represent collections and structured records with modern JavaScript.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 5.1 · Module 05

Arrays, Indexes and Mutating Methods

Create arrays and understand zero-based indexing.

What you will learn

Create arrays and understand zero-based indexing.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Arrays are ordered collections. Methods such as push and splice mutate arrays, while slice returns a portion without mutating the original.

Code example

const topics = ["HTML", "CSS"];\ntopics.push("JavaScript");\nconsole.log(topics[0], topics.length);

Expected result

Add, remove and inspect array values.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 5.2 · Module 05

map, filter, find, some and every

Transform and query arrays declaratively.

What you will learn

Transform and query arrays declaratively.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

map returns a transformed array, filter keeps matching items, find returns the first match, and some/every test predicates. Return values from callbacks matter.

Code example

const prices = [10, 20, 30];\nconst discounted = prices.map(price => price * 0.9);\nconsole.log(discounted);

Expected result

Filter published lessons and map their titles.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 5.3 · Module 05

Objects, Properties and Destructuring

Create objects and read properties safely.

What you will learn

Create objects and read properties safely.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Objects represent keyed data. Dot notation suits known property names; bracket notation supports dynamic keys. Destructuring extracts properties into variables.

Code example

const course = { title: "HTML", level: "Beginner" };\nconst { title, level } = course;\nconsole.log(title, level);

Expected result

Create a course object and destructure selected fields.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 5.4 · Module 05

Spread, Rest, Optional Chaining and JSON

Copy and combine values and safely access nested properties.

What you will learn

Copy and combine values and safely access nested properties.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Spread creates shallow copies; nested objects remain shared unless copied separately. Optional chaining handles nullish access, and JSON is a text format with serialization limitations.

Code example

const original = { title: "CSS", level: "Beginner" };\nconst updated = { ...original, level: "Advanced" };\nconsole.log(updated.level);\nconsole.log(JSON.stringify(updated));

Expected result

Update an object without mutating the original.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 06 of 10

Advanced Data Structures and Modern Syntax

Use maps, sets, classes and iteration where they solve real problems.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 6.1 · Module 06

Map and Set

Store keyed values and unique values with built-in collections.

What you will learn

Store keyed values and unique values with built-in collections.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Map supports keys of different types and preserves insertion order. Set stores unique values and is useful for deduplication.

Code example

const tags = new Set(["html", "css", "html"]);\nconsole.log([...tags]);\nconst lookup = new Map([["html", 10]]);\nconsole.log(lookup.get("html"));

Expected result

Remove duplicate tags and build a lookup.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 6.2 · Module 06

this, Methods and Binding

Understand this in regular functions, methods and callbacks.

What you will learn

Understand this in regular functions, methods and callbacks.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

The value of this depends on how a regular function is called. Arrow functions capture this from their surrounding lexical scope. bind can create a function with a chosen this value.

Code example

const user = { name: "Asha", greet() { return `Hi, ${this.name}`; } };\nconsole.log(user.greet());

Expected result

Compare a method call with a detached function reference.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 6.3 · Module 06

Classes, Constructors and Inheritance

Read and write class syntax without confusing it with a separate object model.

What you will learn

Read and write class syntax without confusing it with a separate object model.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Classes provide syntax for prototypes, constructors and inheritance. Prefer simple composition when inheritance adds unnecessary complexity.

Code example

class Course {\n  constructor(title) { this.title = title; }\n  describe() { return `Course: ${this.title}`; }\n}\nconsole.log(new Course("HTML").describe());

Expected result

Create a Course class and one instance.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 6.4 · Module 06

Modules, Imports and Exports

Split code into reusable ES modules.

What you will learn

Split code into reusable ES modules.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Modules have their own scope and explicit exports. In browsers, serve module files over HTTP during development rather than relying on file:// behaviour.

Code example

// math.js\nexport const square = n => n * n;\n// app.js\nimport { square } from "./math.js";\nconsole.log(square(5));

Expected result

Split a small utility into two files.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 07 of 10

DOM, Events and Browser Interfaces

Connect JavaScript to HTML and create responsive interactions.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 7.1 · Module 07

Selecting Elements and Reading Content

Use querySelector, querySelectorAll and DOM properties.

What you will learn

Use querySelector, querySelectorAll and DOM properties.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

DOM selectors return element references. querySelector returns the first match or null; check that an element exists before using it.

Code example

const heading = document.querySelector("h1");\nif (heading) console.log(heading.textContent);

Expected result

Select and inspect a heading.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 7.2 · Module 07

Changing Text, Classes and Elements

Update text safely and create elements dynamically.

What you will learn

Update text safely and create elements dynamically.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

textContent treats content as text, unlike innerHTML which parses markup. Prefer textContent for untrusted user values to reduce injection risk.

Code example

const message = document.createElement("p");\nmessage.textContent = "Lesson completed";\ndocument.body.append(message);

Expected result

Render a list of lessons from an array.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 7.3 · Module 07

Events, Event Objects and Delegation

Handle click, input, submit and other browser events.

What you will learn

Handle click, input, submit and other browser events.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Event listeners separate behaviour from markup. Event delegation can handle events from many child elements using a shared ancestor; check event.target carefully.

Code example

document.querySelector("button")?.addEventListener("click", event => {\n  console.log("Clicked", event.currentTarget);\n});

Expected result

Add a button handler and explain target versus currentTarget.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 7.4 · Module 07

Forms, Validation and Accessible Feedback

Read form values, prevent default submission when appropriate and show feedback.

What you will learn

Read form values, prevent default submission when appropriate and show feedback.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Use the submit event on the form, not only a click event on the button. Native validation helps, but applications should validate again on the server.

Code example

const form = document.querySelector("form");\nform?.addEventListener("submit", event => {\n  event.preventDefault();\n  const data = new FormData(form);\n  console.log(data.get("email"));\n});

Expected result

Build a form that displays a confirmation message.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 08 of 10

Asynchronous JavaScript and APIs

Work with timers, Promises, Fetch and asynchronous data.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 8.1 · Module 08

Call Stack, Event Loop and Timers

Understand synchronous execution and queued callbacks at a practical level.

What you will learn

Understand synchronous execution and queued callbacks at a practical level.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

JavaScript executes synchronous code on its call stack. Timers schedule callbacks; a timeout delay is a minimum scheduling delay, not a guarantee of exact execution time.

Code example

console.log("first");\nsetTimeout(() => console.log("timer"), 0);\nconsole.log("last");

Expected result

Predict the output order and explain why.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 8.2 · Module 08

Promises and Error Handling

Use then, catch and finally to handle asynchronous results.

What you will learn

Use then, catch and finally to handle asynchronous results.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

A Promise represents a future result. Handle rejection paths and avoid silently swallowing errors that should be reported to the user or developer.

Code example

Promise.resolve("Loaded")\n  .then(value => console.log(value))\n  .catch(error => console.error(error));

Expected result

Create a promise that resolves and one that rejects.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 8.3 · Module 08

async and await

Write asynchronous flows with readable control structures.

What you will learn

Write asynchronous flows with readable control structures.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

An async function returns a Promise. await pauses that function until a Promise settles; use try/catch to handle expected failures.

Code example

async function loadMessage() {\n  try { return await Promise.resolve("Ready"); }\n  catch (error) { console.error(error); }\n}\nloadMessage().then(console.log);

Expected result

Convert a Promise chain into async/await.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 8.4 · Module 08

Fetch API, HTTP and JSON

Request remote data and handle response status correctly.

What you will learn

Request remote data and handle response status correctly.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Fetch rejects for network-level failures but not automatically for HTTP 404 or 500. Check response.ok before parsing. Public APIs may impose CORS, rate limits or authentication requirements.

Code example

async function getData() {\n  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");\n  if (!response.ok) throw new Error(`HTTP ${response.status}`);\n  return response.json();\n}\ngetData().then(console.log).catch(console.error);

Expected result

Load sample JSON and display selected fields.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 09 of 10

Storage, Modules, Testing and Security

Persist small client-side state and build reliable browser code.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 9.1 · Module 09

localStorage, sessionStorage and JSON

Save simple preferences in browser storage.

What you will learn

Save simple preferences in browser storage.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Web storage stores strings and is scoped to an origin. It is not a secure vault; do not store passwords, secret API keys or sensitive data in localStorage.

Code example

localStorage.setItem("theme", "light");\nconst theme = localStorage.getItem("theme") ?? "light";\nconsole.log(theme);

Expected result

Save a theme preference and handle missing values.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 9.2 · Module 09

Dates, Numbers and Internationalization

Format dates and numbers using built-in internationalization APIs.

What you will learn

Format dates and numbers using built-in internationalization APIs.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Store machine-readable values consistently and format them for display with Intl APIs. Time zones and locale differences can affect date interpretation.

Code example

const price = new Intl.NumberFormat("en-NP", { style: "currency", currency: "NPR" }).format(1250);\nconsole.log(price);

Expected result

Format a date and price for a chosen locale.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 9.3 · Module 09

Debugging, Testing and Error Design

Use breakpoints, assertions and small tests to find problems.

What you will learn

Use breakpoints, assertions and small tests to find problems.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Small functions are easier to test. Test normal inputs, boundary values and invalid inputs. Errors should help diagnose failures without exposing private implementation details to visitors.

Code example

function sum(a, b) { return a + b; }\nconsole.assert(sum(2, 3) === 5, "sum should return 5");

Expected result

Write tests for a utility function and edge cases.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 9.4 · Module 09

Security: XSS, Input and Dependencies

Avoid unsafe DOM injection and understand trust boundaries.

What you will learn

Avoid unsafe DOM injection and understand trust boundaries.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Treat user input and remote API content as untrusted. Use textContent for text, validate data, apply server-side authorization, and keep dependencies updated. Client-side checks are not a security boundary.

Code example

const output = document.querySelector("#output");\noutput.textContent = userProvidedText;

Expected result

Identify and replace unsafe insertion patterns.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Module 10 of 10

Performance, Architecture and Final Project

Combine modern JavaScript into a maintainable interactive application.

Work through each lesson in order. Run the examples in your own browser or editor, then complete the practice task before moving on.

In This Module

Lesson 10.1 · Module 10

Project Structure and Separation of Concerns

Separate data, rendering, event handling and utility functions.

What you will learn

Separate data, rendering, event handling and utility functions.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Keep functions focused and avoid mixing network access, DOM updates and validation in one large function. Modules make dependencies clearer and testing easier.

Code example

// utils.js\nexport const formatTitle = value => value.trim();

Expected result

Refactor a single large script into smaller responsibilities.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 10.2 · Module 10

Debouncing, Throttling and Efficient DOM Updates

Reduce unnecessary work for frequent events and batch DOM changes.

What you will learn

Reduce unnecessary work for frequent events and batch DOM changes.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Debouncing waits until activity pauses; throttling limits execution frequency. Use DocumentFragment or efficient rendering patterns for large batches, and measure before optimizing.

Code example

function debounce(callback, delay = 250) {\n  let timer;\n  return (...args) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => callback(...args), delay);\n  };\n}

Expected result

Debounce a search input and test rapid typing.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 10.3 · Module 10

Build an Interactive Task or Lesson Tracker

Use arrays/objects, events, DOM rendering and storage together.

What you will learn

Use arrays/objects, events, DOM rendering and storage together.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

Represent each task as data, render from the data model and update state through explicit actions. Persist only the minimal data needed for the demonstration.

Code example

const tasks = [{ id: 1, title: "Learn arrays", done: false }];\nconst completed = tasks.filter(task => task.done);\nconsole.log(completed.length);

Expected result

Build add, complete, filter and persist functionality.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Lesson 10.4 · Module 10

Final Project: API-Powered Learning Dashboard

Create a dashboard with search, filters, loading states, errors and saved preferences.

What you will learn

Create a dashboard with search, filters, loading states, errors and saved preferences.
Recognize when and why to use this technique.
Apply it in a small practical task.

Explanation

A complete project should have a clear data model, accessible interactions, predictable empty and error states, and responsive rendering. Document API limitations and never expose private API credentials in browser code.

Code example

async function loadLessons(url) {\n  const response = await fetch(url);\n  if (!response.ok) throw new Error("Could not load lessons");\n  return response.json();\n}\n// Render loading, success, empty and error states in the UI.

Expected result

Deliver the dashboard with a README, screenshots and a final test checklist.

Practice task

Recreate the example without copying it line by line. Change at least one value, test the result, and write a short note explaining what changed and why. Check your work in the browser or runtime and fix any errors before continuing.

Key takeaway

Understand the purpose of the feature, use meaningful names, keep the code readable, and test both the expected case and a realistic edge case.

Your Instructor

Instructor

Bigyan Ghimire

Full-Stack Developer

Full-stack web developer from Kathmandu, Nepal, specialising in PHP, JavaScript and MySQL.

JavaScript Complete Masterclass: Beginner to Advanced

What You'll Learn

Requirements

JavaScript Setup and First Programs

In This Module

What JavaScript Does

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

Script Tags and External Files

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

Console, Errors and Developer Tools

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

Variables with let, const and var

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

Data Types, Operators and Conversion

In This Module

Strings, Numbers, Booleans, null and undefined

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

Arithmetic, Comparison and Logical Operators

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

Type Conversion and Truthy Values

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

Template Literals and Useful String Methods

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

Conditions, Loops and Program Flow

In This Module

if, else if and else

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

switch and Conditional Expressions

What you will learn

Explanation

Code example

Expected result

Practice task

Key takeaway

for, while and for...of Loops