JavaScript

What you will learn

• Understand basic program outputs and values.
• Store data with const and let and use text, numbers, and booleans.
• Map decisions using if/else and logical operators.
• Write reusable logic with parameters and return values.
• Systematically find syntax and logic errors in simple programs.
• Create, modify, and evaluate collections of data.
• Process lists using loops, map, and filter.
• Structure and model related values in objects.
• Select and modify HTML structures using JavaScript.
• Securely render catalog data into the user interface.
• React to clicks, inputs, and forms.
• Separate application state and build a shopping cart.
• Store data in the browser and handle invalid states.
• Load data asynchronously and manage loading and error states.
• Organize larger scripts into modules and coordinate them.
• Test, document, and ship the finished catalog.

Course content

1. Chapter 1 First Steps and Expressions

   Understand basic program outputs and values.

   1. Welcome to JavaScript
   2. Computing with Numbers
   3. Concatenating Strings
   4. Fixing Syntax Errors
   5. Logical Expressions and Comparisons
   6. Comments and Documentation
   7. Debugging Expressions
   8. Mini Project: Output Calculator

2. Chapter 2 Variables and Data Types

   Store data with const and let and use text, numbers, and booleans.

   1. Declaring Variables with let
   2. Constants with const
   3. Overview of Data Types
   4. Fixing Type Conflicts
   5. Booleans and Conditions
   6. Template Strings with Variables
   7. Debugging Variable Names
   8. Mini Project: Profile Generator

3. Chapter 3 Conditions and Rules

   Map decisions using if/else and logical operators.

   1. The if Condition
   2. Decisions with else
   3. Multiple Cases with else if
   4. Logical Operators (AND / OR)
   5. Negation with the Exclamation Mark
   6. Nested Conditions
   7. Debugging Conditions
   8. Mini Project: Age and Ticket Calculator

4. Chapter 4 Functions and Logic

   Write reusable logic with parameters and return values.

   1. Declaring and Calling Functions
   2. Parameters and Arguments
   3. Returning Results with return
   4. Fixing Faulty Function Calls
   5. Arrow Functions
   6. Combining Functions with Conditions
   7. Debugging Scope and Variables
   8. Mini Project: Modular Calculator

5. Chapter 5 Debugging and Code Quality

   Systematically find syntax and logic errors in simple programs.

   1. Understanding Types of Errors
   2. Using Console Output for Debugging
   3. Reading the Call Stack and Error Messages
   4. Code Formatting and Readability
   5. Validating and Securing Inputs
   6. Testing with Sample Data
   7. Debugging Complex Logic
   8. Mini Project: The Code Detective

6. Chapter 6 Arrays and Lists

   Create, modify, and evaluate collections of data.

   1. Introduction to Arrays
   2. Array Length and Properties
   3. Adding and Removing Elements
   4. Fixing Faulty Array Accesses
   5. Searching and Checking in Arrays
   6. Combining Arrays with Functions
   7. Debugging Nested Arrays
   8. Mini Project: Dynamic Task List

7. Chapter 7 Loops and Transformations

   Process lists using loops, map, and filter.

   1. The for Loop
   2. Looping Over Arrays
   3. The while Loop
   4. Avoiding Infinite Loops
   5. Array Transformation with map
   6. Filtering Arrays with filter
   7. Debugging Loops and Filters
   8. Mini Project: Data Pipeline

8. Chapter 8 Objects and Data Models

   Structure and model related values in objects.

   1. Introduction to Objects
   2. Accessing Properties
   3. Modifying and Extending Objects
   4. Fixing Faulty Object Access
   5. Methods in Objects
   6. Storing Objects in Arrays
   7. Debugging Data Models
   8. Mini Project: Product Catalog

9. Chapter 9 The DOM and Elements

   Select and modify HTML structures using JavaScript.

   1. Introduction to the DOM
   2. Selecting Elements with querySelector
   3. Modifying Text Content with textContent
   4. Fixing Faulty Selectors
   5. Reading and Writing HTML Attributes
   6. Controlling CSS Classes with classList
   7. Debugging DOM Manipulations
   8. Mini Project: DOM Greeting Box

10. Chapter 10 Dynamic Rendering

    Securely render catalog data into the user interface.

    1. Generating HTML Structures from Data
    2. Clearing and Filling Existing Containers
    3. Rendering Lists into the DOM with Loops
    4. Fixing Faulty DOM Insertions
    5. Security Considerations with innerHTML
    6. Creating Elements with createElement
    7. Debugging Dynamic Rendering
    8. Mini Project: Dynamic Product Catalog

11. Chapter 11 Events and Interaction

    React to clicks, inputs, and forms.

    1. Introduction to Event Listeners
    2. Using the Event Object
    3. Input Fields and Input Events
    4. Forms and preventDefault
    5. Processing Keyboard Events
    6. Attaching Events to Multiple Elements
    7. Debugging Event Bindings
    8. Mini Project: Interactive Form

12. Chapter 12 State and Application

    Separate application state and build a shopping cart.

    1. What is Application State?
    2. Keeping State and UI in Sync
    3. Modifying State with Actions
    4. Fixing Faulty State Updates
    5. Combining Multiple State Properties
    6. Implementing Shopping Cart Logic
    7. Debugging State Inconsistencies
    8. Mini Project: Interactive Shopping Cart

13. Chapter 13 Persistence with LocalStorage

    Store data in the browser and handle invalid states.

    1. Introduction to LocalStorage
    2. Serializing Objects with JSON
    3. Loading State on Startup
    4. Catching Corrupted JSON Data
    5. Fallback Values for Empty Storage
    6. Auto-Saving on Changes
    7. Debugging Persistence Conflicts
    8. Mini Project: Persistent Shopping Cart

14. Chapter 14 Asynchronous Code and Fetch

    Load data asynchronously and manage loading and error states.

    1. Introduction to Asynchronous Operations
    2. Working with Promises
    3. Fetching Data with the Fetch API
    4. Using Async and Await
    5. Error Handling in Network Requests
    6. Managing Loading and Status Indicators
    7. Debugging Asynchronous Operations
    8. Mini Project: API Data Loader

15. Chapter 15 Project Architecture and Modules

    Organize larger scripts into modules and coordinate them.

    1. Introduction to ES Modules
    2. Exporting Functions with export
    3. Importing Functions with import
    4. Default Exports and Aliasing
    5. Architecture and File Separation
    6. Avoiding Circular Dependencies
    7. Debugging Module Paths
    8. Mini Project: Modular Application

16. Chapter 16 Completion and Project Readiness

    Test, document, and ship the finished catalog.

    1. Frontend Quality Assurance
    2. Unit Tests for Logic Modules
    3. Edge Cases and Robustness
    4. Performance Optimization and Code Hygiene
    5. Documentation and JSDoc
    6. Deployment Preparation
    7. Debugging the Complete System
    8. CapStone Project: The Complete Web App

How each lesson works

No hour-long videos. Each lesson is a short loop you complete yourself, until the idea sits.

1. Read

   A short explanation and one clear task. Just enough to get going.

2. Write

   You type the code yourself, in a real editor right in the browser.

3. Run

   Run it and see what your program actually does, straight away.

4. Check

   Check tells you whether the task is solved, and what is missing if not.

Good to know

• Nothing to install: editor, output and checks run in your browser tab.
• Start as a guest without an account; your progress stays on this device.
• A free Ostrae account syncs progress and settings across devices and unlocks the MICA coach.

More courses

• C# Fundamentals
• HTML: Structuring Websites
• CSS: Styling Websites
• Python Fundamentals and Automation
• Git, GitHub and Hosting
• Design for Developers
• GSAP Animations