The Complete 2023 JavaScript MasterClass™: Beginner Friendly

Set up a practical sandbox to learn JavaScript fundamentals, including the Chrome DevTools console, variables, data types, numbers, strings, arrays, objects, conditionals, functions, loops, block scope, and HTML/JS integration.

Explore the chrome devtools console to test code, declare variables, and log data with console.log. Learn to manipulate the document object model with document.querySelector and apply style changes.

Learn how to declare variables in JavaScript using var, let, and const, explore scope and re-declaration rules, and master camelCase naming conventions for multi-word identifiers.

Explore primitive versus reference types in JavaScript, including strings, numbers, booleans, null, undefined, symbols, arrays, objects, functions, and dates, and learn dynamic typing.

Explore how to convert between data types in JavaScript, including string conversions for numbers, booleans, dates, arrays, and objects, and use a string extension method for cleaner code.

Discover strings in JavaScript: declare with quotes, escape with backslashes, join via plus and interpolation, and use methods like length, toUpperCase, replace, includes, and concat.

Explore numbers and the math library in JavaScript, including arithmetic operations, toFixed, and Math methods such as pi, e, round, floor, ceil, sqrt, pow, abs, min, max, and random.

Explore template strings in JavaScript using ES6 backticks to write multi-line HTML templates and interpolate data at runtime. See why it simplifies inserting server data over concatenation.

Learn how to use JavaScript arrays, mutate them with push, pop, shift, unshift, reverse, sort (including custom compare), concat, and find, covering length, isArray, indices, and mixed data.

Learn plain objects in JavaScript: store data with key-value pairs, access and mutate properties, add fields, and use this to implement simple object methods.

Explore dates and times in JavaScript: create current and custom dates with new Date(), format dates, extract day, month, year and time components, and modify them with set methods.

Explore conditional statements and comparison operators in JavaScript, including if-else logic, equality checks (== vs ===), type checks with typeof, template string, logical operators, and the ternary operator, with examples.

Explore switch statements in JavaScript as scalable alternatives to if-else, using cases, default handling, and breaks to control program flow.

Learn how to declare and call functions, assign default parameters, use function expressions and immediately invoked function expressions, and implement property methods in objects while observing scope behavior.

Master general loops in JavaScript to iterate arrays using for, while, do-while, for each, and map, while applying continue and break to control iterations.

Explore the window object and its properties and methods, including alert, prompt, and confirm. Learn to work with related objects such as document, history, location, local storage, and navigator.

Explore block scope in JavaScript by comparing let, const, and var across global, function, and block scopes inside conditionals and loops, preparing you for DOM manipulation topics.

Explore the DOM: learn how the browser builds the document object model from HTML, manipulate elements with JavaScript, and handle events, storage, and dynamic templates.

Explore the document object model and its key properties, access elements like head and body, and work with document collections such as links, scripts, and the all collection.

Master dom selectors for single elements by using getElementById and querySelector to retrieve and modify a single node. Access the class list and adjust colors with style.

Learn to select multiple DOM elements using class name, tag name, and query selector all, convert HTML collections to arrays, and update each item’s color and text content.

Master traversing the DOM by navigating parent and child relationships, next and previous siblings, and distinguishing text nodes from elements, via grocery list examples and childNodes and first element child.

Learn to replace and remove dom elements by creating a new heading and swapping it with the old one; manage removing items and attributes with classList and getAttribute/setAttribute.

Learn how events and event listeners connect the UI to JavaScript, using addEventListener, preventDefault, and the event object's target, type, and coordinates like clientX and offsetX.

Explore mouse events by wiring listeners for click, double click, mouse down and up, enter, leave, over, out, move, and display coordinates using e.offsetX and offset epsilon in the heading.

Explore javascript keyboard input and form events, including submit, keydown, keyup, keypress, focus, blur, cut, paste, input, and change, with preventDefault handling and event bubbling basics.

Explore event bubbling and delegation in JavaScript, showing how events bubble to parent elements and how a top-level listener targets child actions such as delete actions.

Learn to use local storage and session storage: set, get, remove, and clear items, understand the disk persistence versus browser-session clearing, and apply JSON for the grocery list.

Create new grocery list items by handling name and description input, validating fields, and building item elements with a template, while setting up DOM references and event listeners.

Master editing, removing, and filtering grocery list items through toggle edit mode, confirm deletions, and updating item details, plus clear list.

Learn to save, retrieve, edit, and remove grocery items with local storage in a complete grocery list project. Experience on load retrieval and persistent updates.

Explore object oriented programming in JavaScript, from ES5 prototypes to ES6 classes, covering constructors, this, built-in constructors, Object.create, inheritance, and extends with super.

Explore object oriented programming and how JavaScript implements objects, classes, and instantiation using object literals, ES6 classes, constructors, the this keyword, and the new keyword.

Explore creating class-like structures with constructors and the this keyword, building person objects using new, with name and birthday properties and a get age method.

Explore built-in string, number, boolean, and array constructors in JavaScript, compare primitive values with their object counterparts, and understand how type differences appear in comparisons.

Explore using the prototype inside a constructor to add extension methods to custom constructors and move methods to the prototype for shared inheritance and hasOwnProperty checks.

Explore inheritance using prototypes to extend one constructor from another with properties and methods. Build a person and an employee, wire prototypes with call and Object.create, then fix constructors.

Explore how to create objects from custom prototypes using object.create, including extension methods and property initialization with a properties parameter and object literals.

Explore creating classes with es6 syntax using the class keyword and constructor, set properties with this, and add methods, then instantiate with new and observe prototype behavior.

Explore ES6 inheritance by extending a person with an employee class using extends and super. Learn to use prototypes and static methods to manage class relationships and simple calculations.

Create a book library app using a book constructor and a user interface constructor to add books to a dynamic table, validate empty fields and numeric ISBN, and show alerts.

Add and remove books in a local storage backed library, manage state with a session manager, and load books on page load with event listeners and JSON storage.

Converts the book library project to ES6 JavaScript using classes, implementing book, UI, and session manager, handling local storage and add/remove operations.

Explore asynchronous JavaScript concepts, learn to fetch data from the server without interrupting the UI with Ajax and XMLHttpRequest, and use fetch, promises, and async/await to work with JSON APIs.

Master asynchronous programming in JavaScript by understanding the single thread, callback queue, event loop, and callbacks, and learn how promises and async/await enable non-blocking UI.

Learn how Ajax and XMLHttpRequest enable asynchronous data exchanges without page reload, and compare modern HTTP libraries like Fetch API, Axios, SuperAgent, and Node HTTP for sending and receiving JSON.

Master asynchronous data retrieval with XHR: send a get request to a local text file, handle status codes, and display the response while tracking progress and errors.

Learn to fetch employee data via ajax with json from local json files, using two buttons to display a single employee or all employees in a dynamic html template.

Build an interactive employee library that fetches data from a public API using an input field and submit button, handles invalid IDs and displays user-friendly messages.

Understand how rest APIs enable client–server communication through http requests like get, post, put, delete, and patch, using endpoints and json data.

Explore how callback functions enable asynchronous behavior by passing functions as parameters, demonstrated with forEach and setTimeout. See how a callback ensures all employees, including Josh, display after delays.

Explore promises in ES6 by turning asynchronous operations into promise objects with pending, resolved, and rejected states, and learn to use then, catch, finally, while converting callback-based code to promises.

Master the fetch API for JavaScript: retrieve text and JSON, fetch data from APIs, and post data with headers while handling promises with then and catch.

Learn lambda functions and returning values in one line. Refactor callbacks and fetch API patterns with arrow syntax, then explore async and await for asynchronous operations.

Master async and await by turning functions into asynchronous operations with the async keyword, awaiting promises, and using syntactic sugar for fetch and response.json with catch for errors.

Create a weather app that fetches current weather data from a free open weather API using an API key, and displays it in an HTML template.

Populate the user interface with API weather data, convert kelvin to Celsius and Fahrenheit, and save the location to local storage, creating a responsive, user-friendly weather experience.

Master error handling with try and catch and learn regular expressions, evaluation functions, and character sets, while building a weather app with api keys for authentication and form validation.

Learn to handle errors in JavaScript with try and catch, inspect error.message and error.name, differentiate reference, type, and syntax errors, and use finally blocks to keep code running.

Learn to use regular expressions as search and validation patterns in JavaScript. Apply evaluation functions like exec, test, match, search, and replace to build practical form validation.

Master regular expressions and metacharacter symbols, including the carrot and dollar signs, the dot wildcard, asterisk, optional characters, and backslash escapes, through hands-on string matching with hello world.

Learn to use character sets and quantifiers to group and match letters, digits, and symbols with case sensitivity options. Explore ranges, negation, anchors, and counts with {n}, {n,m}, and {n,}.

Master shorthand character classes in regular expressions, using backslash w, W, d, D, s, S and plus quantifiers to match word, non word, digit and whitespace characters.

Build a login form with email and password validation using regular expressions, bootstrap validation feedback, and live input validation, ensuring email format and password strength before submission.

Explore modern JavaScript features, including iterators and generators, object destructuring for extracting multiple key-value pairs, and using maps and sets for handling data and duplicates, with practical interview tips.

Explore iterators and generators in JavaScript, learning how to build an iterator that yields values and a generator using yield, plus document object model controls to navigate a names array.

Master array and object destructuring by assigning multiple values at once, using the rest pattern and the spread operator, and accessing keys like name, age, and job.

Learn how maps in ES6 store key-value pairs with keys of data type, create maps, and set or get values. Iterate, check size, and convert maps to arrays with Array.from.

Learn how to use sets (ES6) to store unique values, with the set constructor, add, delete, and size; explore has, iteration with for of, and Array.from.