Modern JavaScript From The Beginning 2.0 (Just Updated)

Explore the absolute basics of modern JavaScript, from console usage and variables to primitive versus reference types, type conversion, operators, the Math and Date objects, and string and number methods.

Discover the sandbox, a per-section code folder system with finished and starter packages, giving you console boilerplates (index.html and script.js) to start JavaScript learning.

Explore browser dev tools and the console to log data, debug errors, and test JavaScript with methods like console.log, console.error, console.table, and grouping, including styling with %c.

Learn how to comment JavaScript to document intent and safely disable code, and master VS Code shortcuts for navigating, selecting, and duplicating lines, with single-line and multi-line comments.

Explore variables and declarations in JavaScript, compare var, let, and const, and learn about scope, initialization, hoisting, camel case naming, and array/object manipulation.

Explore JavaScript data types, including primitive types (string, number, boolean, null, undefined, symbol, big int) and reference types (objects, arrays, functions), with notes on dynamic vs static typing and TypeScript.

Explore how primitive values live on the stack while reference types like objects and arrays reside in the heap, and how reassignments and shared references work in practice.

Master explicit type conversion in JavaScript by converting strings to numbers with parseInt or plus, and numbers to strings with toString. Understand Boolean conversion and NaN handling.

Explore JavaScript operators—from arithmetic and modulus to string concatenation and exponentiation—learn increment, decrement, assignment and comparison operators, and how type coercion impacts equals and not equals.

Explore type coercion in JavaScript, showing how operators implicitly convert values of different types with examples like 5 + '5' producing '55' and 5 * '5' producing 25.

Explore how strings work in JavaScript, from concatenation and template literals to key methods like length, toUpperCase, substring, slice, trim, replace, includes, and split.

Capitalize the first letter of a single word using string methods like charAt or bracket notation with substring or slice. Explore multiple solutions, including template literals, without loops.

Explore how JavaScript handles numbers with number primitives and the Number object, using toString, toFixed, and toLocaleString. Understand that numbers have no length; use Number.MAX_VALUE and Number.MIN_VALUE to understand limits.

Explore the JavaScript Math object and its common methods for numerical operations, including sqrt, abs, round, ceil, floor, pow, min, max, random, and the pi property.

Create random numbers X (1–100) and Y (1–50), then compute and log their sum, difference, product, quotient, and remainder using template literals and the modulus operator.

Explore how to work with JavaScript dates using the date object, create dates with new Date, handle zero-based months, and work with timestamps.

Explore creating and inspecting date objects in JavaScript, using new Date, toString, getFullYear, getMonth (zero-based), getDate, getDay, and locale aware formatting with Intl.DateTimeFormat or toLocaleString.

Explore arrays and object literals in JavaScript by learning how to create, manipulate, and nest them using essential methods taught at the start of the course.

Explore arrays as a data structure in JavaScript, learn to create them with literals or constructors, and access, mutate, and inspect length using zero-based indices.

Mutate arrays with push, pop, unshift, shift, and reverse in JavaScript, and retrieve values with includes, indexOf, slice, and splice.

Explore nesting arrays, concatenate items with concat or the spread operator, flatten nested arrays, and use array static methods is array, from, and of.

Explore array manipulation in JavaScript by transforming [1,2,3,4,5] into [6,5,4,3,2,1,0] using reverse, push, and unshift. Practice concatenating arrays with no duplicate five via slice/concat or spread and splice.

Define and manipulate object literals in JavaScript, using dot and bracket access, nested objects, and arrays. Update, add, and delete properties, attach functions as properties using this and template literals.

Learn to create and nest objects with literals or the object constructor, use the spread operator and Object.assign to merge properties, and explore keys, values, entries, and hasOwnProperty.

Master object naming shortcuts and destructuring in JavaScript, including shorthand properties, destructuring nested objects, renaming keys, and array rest patterns for cleaner code.

Explore JSON intro by comparing JavaScript objects to JSON, learn to stringify and parse data, and see how APIs and local storage use JSON strings and arrays of objects.

Build an array of book objects with a nested status, set all read flags using dot notation, destructure the first title as first book, and convert the library to json.

Explore core JavaScript concepts by examining basic functions, function declaration versus expressions, arrow functions, and IFIs (immediately invoked function expressions), then understand scope, execution context, and the call stack.

Master defining and invoking JavaScript functions with the function keyword, including parameters, arguments, and returning values. Grasp how scope and examples like hello world and add or subtract illustrate usage.

learn to define parameters and pass arguments, including default and rest parameters, with objects and arrays, illustrated by examples like register user and get random from an array.

Explore global and function scope in JavaScript, learn how the window object exposes global variables and browser properties, and understand variable shadowing and local vs block scope.

Discover block scope in JavaScript, contrast var with let and const, and learn how global, block, and function scopes govern variable access, including how var leaks to the window object.

Explore how scope works with nested functions and blocks, showing how a child function can access parent variables (x and y) but not vice versa, and how closures relate.

Compare function declaration and function expression, showing hoisting and pre-definition calls for declarations, vs runtime initialization for expressions, plus a preview of arrow functions.

Explore arrow functions introduced in ES6, learn implicit returns, lexical scope, and concise syntax for single-parameter functions, including returning objects and using them in callbacks like for each.

Explore immediately invoked function expressions (IIFE) to run a function at declaration, avoid global scope pollution, and manage local scope with examples of anonymous and named IIFEs.

Explore function challenges in modern JavaScript, including converting Fahrenheit to Celsius with get Celsius, creating a min max utility for arrays, and building an iffy to calculate rectangle area.

Explore JavaScript execution context, including the global execution context and function-specific contexts, memory creation versus execution phases, and how variables and functions move from undefined to values.

Examine execution context in action by tracing memory creation and execution phases, noting X and Y become undefined, the global memory holds get some, and breakpoints reveal function execution context.

Understand the call stack in JavaScript, a last-in, first-out data structure that manages function execution contexts and the global execution context, showing push and pop as functions run.

Explore logic and control flow, including if statements, switches, truthy and falsy values, logical operators, logical assignments, shorthand if statements, and the ternary operator.

Master if statements for flow control in JavaScript, using comparison operators like equals, triple equals, and greater than or equal, and appreciate block scope with let, const, and var.

Explains using if, else if, and nested if statements to test multiple conditions with a date hour example, yielding messages like good morning, good afternoon, wake up, or good night.

Explore how switches evaluate expressions and values, using months to demonstrate cases, break, and default. See how ranges and reducer-style patterns appear in front-end state management.

Create a calculator function that accepts two numbers and an operator (plus, minus, multiplication, division) and returns the calculation result. Return invalid operator for any other input.

Explore truthy and falsy values in JavaScript and how type coercion affects if statements, including the six falsy values and the caveat with empty arrays, objects, and strict equality.

Learn how the and (&&) and or (||) operators short-circuit, evaluate truthy and falsy values, and use the nullish coalescing operator with practical examples.

Explore logical assignment operators, including or equals and and equals, and the nullish coalescing operator, with examples showing how falsy and truthy values drive assignments.

Apply the ternary operator to replace if statements by evaluating a condition, such as age for voting, and assign values like true/false or dashboard/login redirects.

Explore loops and iteration with higher-order array methods that take a function to operate on each array element. Prepare to explore the document object model and events next.

Explore how for loops drive iteration in JavaScript, covering initialization, condition, and increment, with examples on counting, nested loops, and looping through arrays.

Learn how break exits a loop when a condition is met, such as stopping at 15 during a 0–20 run, and how continue skips the rest of the current iteration.

Master while and do while loops as essential fundamentals alongside for loops, for in, and for of, with syntax, conditions, nesting, and do while's at-least-once execution to prevent infinite loops.

Master the fizzbuzz challenge using loops and conditionals in JavaScript by printing 1–100, outputting fizz for multiples of three, buzz for multiples of five, and fizzbuzz for both.

Master the for of loop, a clean, modern way to iterate over arrays, strings, maps, and sets, often preferred to traditional for loops and enabling direct item access.

Learn to use the for in loop to iterate object keys and values, and log them. Then apply it to arrays and prep for array methods like for each.

Explore high-order array methods using for each to loop over arrays with a callback. Learn to access item, index, and the full array, and log results for strings and objects.

Learn how array.filter, a high-order method, returns a filtered array using a predicate. See examples filtering words by length, numbers by even numbers, and companies by category and dates.

Learn how array.map creates a new array by returning values from a function, with examples like doubling numbers, extracting company names, mapping to objects, and chaining maps with filter.

Use reduce to turn an array into a single value with an accumulator. Understand previous value, current value, and an optional initial value, then apply to a shopping cart total.

Practice array methods via challenges: filter young people under 25 to map to a name and email, then use reduce to sum positive numbers and capitalize words.

Explore the document object model, learn to select and traverse elements, and dynamically modify page content, styles, and attributes with JavaScript.

Explore the dom’s tree-like structure, from the window and document objects to html elements, text nodes, and attributes. Learn basic manipulation with innerHTML and selectors such as getElementById and querySelector.

Explore the document object model properties, such as head, body, forms, links, and images, and learn how to access and modify DOM elements with HTML collections and array conversion.

Explore selecting single elements of the document object model with getElementById and querySelector, inspect and set attributes with getAttribute and setAttribute, and update content and styles using textContent and style.

Learn to select multiple elements with document.querySelectorAll, compare it to getElementsByClassName and getElementsByTagName, and work with node lists and HTML collections in vanilla JavaScript.

Navigate from parent to children using the children collection, and move between siblings with next element sibling and previous element sibling; access parentElement to style the parent.

Explore the various DOM node types—element, text, and comment—and learn to traverse with childNodes, firstChild, lastChild, and siblings to access and modify content.

Create elements with document.createElement, set attributes with setAttribute, use createTextNode and appendChild to insert text, and append the result to the page or a ul.

Compare inner HTML and create element when building a list item with a title, button, and icon, and highlight their performance and maintainability implications.

Refactor your shopping list code by splitting tasks into multiple functions, creating separate create button and create icon utilities to improve clean code, reuse, and DOM manipulation.

Explore inserting content into the DOM with insert adjacent element, text, and HTML, using before begin, after end, and related methods, plus creating elements and selecting references.

Create a custom insert after function to place a new element after an existing DOM element by using the parent element and the nextSibling property, following an insert before pattern.

Replace elements in the DOM using replaceWith, outerHTML, innerHTML, and replaceChild, illustrated with a shopping list UI. Select elements with querySelector and querySelectorAll, loop with forEach, and update content accordingly.

Remove DOM elements using remove and removeChild, select targets with querySelector and querySelectorAll, and remove items by index or nth-child, exploring zero-based indexing.

Discover how to dynamically manipulate CSS with JavaScript by using classList methods (add, remove, toggle, replace), className, style, and event-driven updates.

Explore how user interactions trigger DOM changes by listening for events and creating event handlers, including mouse and keyboard events, form submissions, and the shopping list project.

Learn how to listen for events using inline event listeners, and the addEventListener method. Explore click events, multiple listeners, programmatic clicks, and removing listeners with setTimeout.

Explore essential mouse events in JavaScript, including click, double click, right click (context menu), mouse down/up, wheel, mouse over/out, and drag start, drag, and drag end.

Explore the event object in event listener callbacks, read properties like target, currentTarget, and type, track coordinates (clientX/Y, pageX/Y, screenX/Y), and use preventDefault and drag events.

Learn to handle keyboard events from an input, including key press, key up, and key down, using event properties like key, keyCode, code, and repeat.

Build a dynamic key code viewer that shows event.key, event.keyCode, and event.code on each key press, from an innerHTML approach to a DOM-driven for-in loop using a codes map.

Explore input events in JavaScript by reading values from text inputs, a priority select, and a checkbox, using event.target.value and event.target.checked, and update the heading in real time.

Master front-end form submission by handling the submit event, preventing default, and extracting values using element values and the FormData object, with basic validation for item and priority.

Explore how event bubbling moves a click from a button up through the DOM tree to parent elements, and how stop propagation and stop immediate propagation control the flow.

Learn event delegation by attaching a single listener to the parent ul to handle clicks on multiple items using e.target to delete items. Learn how to differentiate e.target from e.currentTarget.

Explore window events and the document object model loading concepts, including the load event and the defer attribute. Learn to handle resize, scroll, focus, and blur to build dynamic ui.

Build a shopping list app from start to finish: add, remove via the x button, clear, and filter items; persist with local storage and enable editing, and deploy to Netlify.

Build a vanilla JavaScript shopping list app that adds items to a list from a form, validates input, clears the field, and includes a delete icon button using Font Awesome.

Set up git and GitHub for version control by initializing a repository, staging and committing changes, and pushing to a remote repository with SSH keys.

Delete items by clicking the X with event delegation on the ul, then traverse to the li and remove it, and use a clear button to remove all items.

Manage a clear ui state with vanilla javascript by showing or hiding the filter and clear controls based on list items, using a check ui on load and after actions.

Implement a real-time item filter by wiring an input event to a filter function, lowercase text, loop through items with node list, compare via indexOf, and toggle display.

Learn how local storage and session storage hold string data in the browser; local storage persists, session storage ends on close, and objects must be stringified.

Implement local storage to persist an item list by stringifying the items array with JSON.stringify, storing it under items, and parsing it with JSON.parse on load to render the list.

Create a get items from storage function to read local storage and render items to the DOM on page load, then initialize the app and refresh the user interface.

Remove items from local storage by handling on click item events, confirming removal, and updating the DOM and storage accordingly.

Learn to set items to edit by entering edit mode, populating the form with the selected item, and updating the button appearance and icon to reflect editing state.

Implement edit mode in a vanilla JavaScript app by replacing an item: remove the old item from local storage and DOM, then add the updated item and reset the UI.

Detect duplicates by checking local storage with an includes-based function and alert when the item exists, then manage submissions in and out of edit mode before deploying to Netlify.

Deploy a simple html, css, and JavaScript app to Netlify via GitHub, with automatic updates on the main branch, and learn domain setup, form submissions, analytics, and serverless options.

Explore how asynchronous JavaScript works under the hood with diagrams, then learn callbacks, promises, and AJAX with XHR, and preview the fetch API and async/await.

Discover that JavaScript is synchronous and single threaded, with the execution context, thread of execution, call stack, and memory heap guiding execution; web APIs and NodeJS enable asynchronous behavior.

Explore how asynchronous JavaScript works behind the scenes, contrasting blocking and non-blocking code, and how the event loop, queues, and callbacks manage promises in NodeJS and the browser.

Explore how setTimeout schedules callbacks and how clearTimeout cancels them, using timer IDs, named functions, and DOM interaction to observe delayed execution and cancellation.

Explore setInterval and clearInterval by building a start/stop color changer that updates the page background every second, using an interval ID, a callback, and optional random colors.

Learn how to implement custom callbacks, avoid common invocation mistakes, and manage asynchronous data with setTimeout by sequencing createPost and getPosts, then introduce HTTP requests.

Learn how HTTP powers the web, using get, post, put, patch, and delete to fetch or submit JSON data via fetch API, with common status codes and devtools network insights.

Explore devtools network tab to inspect a page's requests and resources, filter by type, view headers and responses, simulate caching and slow connections, and inspect API data in JSON.

Explore the browser's XMLHttpRequest object for asynchronous HTTP requests, parsing JSON responses, and rendering data from local JSON files or APIs into the page; understand ready state and status handling.

Create a joke generator that fetches Chuck Norris jokes from an api's random endpoint via xhr, parses json to get the value, and updates the dom on load and click.

Analyze callback hell as nested xhr callbacks fetch movies, actors, and directors from json files, and see how order can break before promises are introduced.

Master promises in JavaScript by creating and handling asynchronous, non-blocking tasks with the promise constructor, resolve, and reject. Learn to chain then, catch, and finally for robust async flows.

Refactor the create post function from callback-based to promise-based, using then to run get post, and using resolve, reject, and catch for error handling and page updates.

Learn how to chain promises to sequence asynchronous tasks, pass values through then calls, handle errors with catch, and address callback hell with practical examples.

Replace callback hell with promises by wrapping data fetches in a promise and using then chaining to fetch movies, actors, and directors, with catch for errors and upcoming Promise.all.

Explore how to fetch data from multiple endpoints in a specific order using promise.all, replacing callbacks and promise chaining with a concise array of promises.