Modern JavaScript Bootcamp - Beginner To Advanced

Set up your development environment by installing four tools—Chrome browser, Visual Studio Code, Node.js, and Git—and learn to verify installations and open projects with code . from the command prompt.

Install and configure essential VSCode extensions—life server, Quadron, Peter, and bracket polarizer—then enable Emmet and adjust settings for tab-triggered expansion to prepare your JavaScript workspace.

JavaScript is the most commonly used language and remains relevant long-term, enabling dynamic websites and apps across frontend, backend, mobile apps, and even machine learning, with React, Vue, and Angular.

Learn how to link JavaScript in a project, either inline in an HTML file or via an external script. View logs directly in the browser console.

Learn to view JavaScript outputs in the browser using the console, alert popups, and document writing, and understand running and commenting code for quick testing.

Learn how variables store data and how var, let, and const differ in declaration, assignment, and reassignment, including why redeclaring var can break code and const stability.

Master the rules for naming variables in JavaScript. Use letters, digits, underscores, and dollar signs, never start with a number, and prefer camelCase while avoiding reserved keywords.

Explore JavaScript data types by distinguishing primitive and non-primitive kinds. Learn about strings, numbers, booleans, null, undefined, symbols, arrays, and objects, and see how immutability differs.

Explore type conversion in JavaScript. Learn how to convert numbers to strings with String(), strings to numbers with Number(), and booleans to 1 or 0, including string-number interactions.

Learn how to manipulate strings in JavaScript with methods such as toUpperCase, toLowerCase, trim, indexOf, lastIndexOf, substring, and replace, and apply the length property in practical extraction and formatting examples.

Learn JavaScript string handling by mastering concatenation with the plus operator, managing spaces, and using template literals for cleaner interpolation with ${name} and expressions.

Explore numbers, math and arithmetic operators in JavaScript, including addition, subtraction, division, multiplication, and modulus; learn rounding with Math.round, Math.ceil, Math.floor, Math.min, Math.max, and random with Math.random.

Explore arithmetic operator shorthand in JavaScript, including plus-equals and minus-equals, and the increment and decrement operators, using practical X and Y examples to update values.

Learn to create and mutate arrays in JavaScript, using literals and new, access zero-based indices, length, and apply mutating methods like push, pop, shift, unshift, splice, reverse, concat, sort.

Explore conditionals in JavaScript using if-else statements and the ternary operator, with practical examples like age checks for site access and time-based greetings.

Master switch statements by evaluating a time variable against morning, afternoon, and evening cases, with break and a default that handles unknown times.

Learn JavaScript comparison operators, including not equal, double equals, and triple equals, and distinguish them from the assignment operator, with practical if and else examples.

Explore how the or, and, and not logical operators guide access within conditional statements, illustrated with name and age examples.

Explore the JavaScript date object: create new dates, get year, month, date, hours, minutes, seconds, milliseconds, time; practice set methods for year, month and date, with string, hyphen, forward slash formats.

Master JavaScript functions through declaration and expression, learn parameters versus arguments, default values, template literals and concatenation, and immediately invoked function expressions.

Apply a practical function to convert Celsius to Fahrenheit using the formula Celsius times nine fifths plus thirty-two, defining a convertTemperature function with a Celsius parameter and logging the result.

Explore JavaScript loops, including for, while, and do while, and learn to iterate arrays by index, using length, and control flow with continue and break.

Explore global, function, and block scopes in JavaScript and how variable accessibility changes across them. Learn why let and const are preferred over var for safer scoping.

Explore how the document object model, atop the window object, lets JavaScript access, manipulate, and dynamically update page elements, styles, and structure through events and DOM changes.

Explore the document object model, inspect document properties like body, domain, and title, and learn how document elements and methods let you access and manipulate the page.

Learn how to access single elements on a page using document methods by id and the query selector approach, selecting by id, class, or tag, and understanding first-match behavior.

Learn to select multiple elements with class name, tag name, and query selector all; compare HTML collections and node lists and convert to arrays for array methods.

Explore traversing the DOM by moving between related nodes, from parents and children to siblings, using selectors, logging, and index-based access to navigate the document structure.

Master manipulating dom elements by selecting a child, updating its text via text and textContent, and adjusting styles like color and font size to reflect changes.

Create and insert new elements and text nodes into the page, position them before a target child, and manage classes with classList add and remove.

Discover how to remove an element from the page and how to hide it with display: none, using the text.remove() method to remove from the DOM.

Explore how event listeners in JavaScript respond to browser events like clicks, using querySelector to target elements and addEventListener to run functions that modify text and styles.

Explore hoisting in JavaScript by comparing function declarations, function expressions, and arrow functions, and learn when calls occur before initialization and how variables hoist.

Explore common JavaScript events and how to listen for them, including click, change, mouseover, key down, and load, with practical examples using event listeners and functions.

Learn how to handle form events in JavaScript, prevent default submit, access form values like username and password, and inspect event target and class names to control behavior.

Explore event bubbling and event delegation in the dom by building interactive button examples, demonstrating how events bubble to parents and how delegation handles clicks with a single listener.

Learn to use a reusable template folder for starter projects, with an index HTML, optional bootstrap CDN, Open Sans fonts, and a 900px container, plus renaming guides.

Learn to build a counter app markup featuring an interactive circle and add, subtract, and reset buttons with color states (green for add, red for subtract, white for reset).

Learn to build a JavaScript counter app with add, subtract, and reset buttons using event delegation, updating a count, and changing the circle border color via a set color function.

Build a random number generator connected to the DOM, converting the counter up project into a generate-on-click tool and enabling page-load randomization. Update markup and remove extra buttons.

Learn to build a random number generator in JavaScript by wiring a click to a generate button, using Math.random and Math.floor to produce 1–10, and display the result.

Build a random hex color generator that updates the page background with each click, using an input field initialized to white, a copy button, and clipboard copy feedback.

Create a random hex color generator in JavaScript by converting a random number to a hex string, taking six characters, prefixing with #, and applying it to the page background.

Explore the window object as the global top-level object of the browser, its relationship to the document object model, and key properties like navigator and fetch.

Explore the window object properties, including innerHeight, innerWidth, location, history, and navigator, and see how these global properties interact with the document and browser as you build JavaScript projects.

Learn to use alert, confirm, and prompt popups through the window object, handling user input, conditions, and simple greetings with console output.

Learn JavaScript timing events, focusing on setTimeout to delay a function by milliseconds, illustrated by greeting a user after three seconds and showing a popup, with clearTimeout to cancel.

Explore how setInterval repeatedly executes a function at a chosen interval, unlike setTimeout that runs once, and build a live clock updating every second with clearInterval.

Explore what a callback function is in JavaScript by illustrating how functions can be passed as arguments, differentiating parameters from arguments, and explaining immediate versus asynchronous callbacks.

Explore higher order functions in JavaScript by using forEach to iterate arrays with a callback. See map transform data by doubling numbers and filter select ages 18 and up.

Discover arrow functions as a shorter, cleaner way to write JavaScript functions, compare with function expressions, and use them in callbacks like for each and map.

Learn the web storage API and local storage fundamentals, including setItem, getItem, removeItem, clear, and key methods, plus persistence and security considerations.

Master practical local storage using the Web Storage API, manipulating window.localStorage with setItem, getItem, removeItem, clear, and using JSON.stringify/JSON.parse for objects and arrays.

Explore JavaScript's use strict mode, which enforces declarations, catches undeclared variables, and prevents common bad practices, globally or locally inside a function.

Build a reusable coming soon landing page using HTML structure, a countdown section with four boxes, and a newsletter signup form to capture emails.

Build a responsive coming soon landing page with CSS, centering the hero, full-viewport background image, a dark overlay via a pseudo-element, and mobile-friendly typography and a newsletter form.

Build a landing page countdown using JavaScript: select elements, compute days, hours, minutes, seconds to end date with setInterval, format with leading zeros, update the DOM, and respond when complete.

Build a BMI calculator using markup that collects height in cm and weight in kg, computes BMI, and displays results with validation and reset options.

Students learn to structure a BMI calculator interface with a centered flex layout, responsive sizing using rem units, and styled form controls, buttons, and hover effects.

Build a JavaScript BMI calculator by validating height and weight inputs, preventing form reload, reading values, and preparing to compute BMI with four classifications: underweight, normal, overweight 25–29.9, obese 30+.

Create a JavaScript BMI calculator: convert height from cm to meters, compute weight over height squared, round to one decimal, and categorize results with color-coded HTML display.

Create color-coded results display function in JavaScript to show BMI with background using template strings for category messages (underweight, normal, overweight, obese), and plan a reset button and loading animation.

Implement a reset function to clear the BMI form, hide results, and reveal the loading animation with a delayed BMI calculation using setTimeout.