This is the mission briefing. We will define our objective: to master the fundamentals of JavaScript for adding interactivity to websites. This lesson outlines the course structure and the project we will enhance.

HTML is the skeleton and CSS is the style; JavaScript is the brain that adds behaviour. This lesson defines JavaScript's role as the language of interactivity on the web, making pages responsive and dynamic.

This lesson covers the first practical steps. We will create our first JavaScript file, connect it to our HTML document using the script tag, and use the console to verify that our setup is working correctly.

This final project makes your portfolio dynamic. You will learn to host your project data online as a live API endpoint using a GitHub Gist, then use fetch to load this data and dynamically generate your project cards.

This lesson introduces variables, the fundamental way JavaScript stores information. We will cover the let and const keywords and discuss the professional standard for when to use each.

All information in JavaScript has a type. This lesson introduces the three most common primitive data types: strings for text, numbers for mathematics, and booleans for true or false logic.

This lesson covers the basic operators for performing calculations and making comparisons. We will explore arithmetic operators for math and comparison operators for evaluating logical statements.

This lesson introduces conditional logic, the primary way a program makes decisions. You will learn to use if and else statements to execute different blocks of code based on a condition.

Functions are reusable blocks of code that perform a specific task. This lesson covers how to define and call your own functions, a core principle for writing organized and efficient code.

To manipulate a webpage, you must first select the element you want to change. This lesson introduces the powerful document.querySelector() method for precisely targeting any HTML element on your page.

Once an element is selected, you can change it. This lesson covers how to modify an element's text content, alter its inner HTML, and dynamically add or remove CSS classes to change its style.

Interactivity begins when your code responds to the user. This lesson covers the addEventListener() method, showing you how to listen for user actions like clicks and run a function in response.

This lesson covers how to retrieve data that a user has typed into a form. We will use the .value property to access the input from form fields, a key skill for interactive applications.

This first project brings your CSS to life. You will use your knowledge of DOM selection and event listeners to make the mobile navigation menu fully functional, toggling its visibility when the user clicks the menu icon.

This lesson makes your contact form fully functional. You will learn to use a third-party service to handle submissions and apply JavaScript for client-side validation, ensuring the form works as a live, professional component.

This lesson introduces the array, JavaScript's fundamental tool for storing ordered lists of data. You will learn how to create an array, add items to it, and access specific items using their index number.

This lesson covers JavaScript objects, the primary way to structure related data with key-value pairs. You will learn the syntax for creating an object and how to access its properties using dot notation.

This lesson introduces iteration, the process of performing an action on every item in an array. You will learn the forEach method, a simple and readable way to loop through data collections without a complex setup.

This lesson covers the powerful .map() and .filter() methods. You will learn how to transform each item in an array into something new and how to create a new array containing only the items that meet a specific condition.

This lesson focuses on template literals, the modern JavaScript syntax for creating multi-line strings. You will learn how to embed variables and expressions directly into a string to build dynamic HTML content efficiently.

This project combines the chapter's concepts to make your skills section dynamic. You will create an array of skill objects, then use the .map() method and template literals to automatically generate the HTML for your skills list.

JavaScript is single-threaded, meaning it can only do one thing at a time. This lesson explains why long-running tasks like network requests require asynchronous code to avoid freezing the webpage.

This lesson defines two critical concepts. We will explain what an API is and its role in web communication, and introduce JSON as the standard format for exchanging data on the web.

This lesson introduces the modern, professional standard for making network requests. We will use the fetch() function with the async and await keywords to cleanly request data from an API.

Once you request data, you must process it. This lesson covers how to handle the response from a fetch() call, check for errors, and parse the JSON Data so it is ready for use in your application.

This final project makes your portfolio dynamic. You will learn to host your project data online as a live API endpoint using a GitHub Gist, then use fetch to load this data and dynamically generate your project cards.

This lesson introduces localStorage, a browser feature for storing data across sessions. You will learn how to save and retrieve simple key-value pairs, a crucial skill for remembering user preferences.

This project applies your knowledge of DOM manipulation and localStorage. You will build a functional dark mode toggle that saves the user's choice, so their preferred theme persists even after the page is reloaded.

This lesson walks you through the final step of making your project public. You will learn how to prepare your code for production and deploy it live to the web for free using GitHub Pages.

This final lesson provides a clear roadmap for your continued development. You will receive project ideas for practice and an introduction to advanced JavaScript concepts and libraries to explore next.