Javascript Tutorial and Projects Course

Install the live server extension in Visual Studio Code to preview HTML and JavaScript instantly in the browser without refreshing, speeding up your workflow.

Learn to add JavaScript to a project using the inline method first, then understand internal and external options, create a button, and trigger an alert with on click.

Learn how JavaScript uses statements and comments to instruct the computer, including console.log examples, semicolon usage, and line and multi-line comments for debugging.

Explore var, let, and const in JavaScript, compare function scope and block scope, and understand reassignment rules, missing initializers, and the common practice to use const for most variables.

Explore numbers in JavaScript, including integers and decimals, and learn how loosely typed variables and basic math operations like addition, subtraction, multiplication, and division work.

Explore JavaScript numeric operators, including plus equals, minus equals, divide equals, multiply equals, plus plus, minus minus, and the modulus operator, with pizza slice examples and basic math rules.

Practice with numbers by calculating total and average scores from three values, and use modulus and string concatenation to display how many plates are available.

Use return to pass calculated values from a function, such as converting inches to centimeters for wall dimensions stored in the dimensions array.

Create a car object with properties including make, model, year, colors array, and hybrid, plus drive and stop methods that log messages and reveal the first color and make.

Explore equality in JavaScript by comparing values with double and triple equals, and see how type affects results when numbers and strings differ.

Learn to apply logical operators in JavaScript, including or, and, and not (exclamation mark), through a name and age example that greets Bob or returns wrong values.

Explore how JavaScript strings expose properties and methods, use length and wrapper string objects, and apply methods like trim, toLowerCase, startsWith, includes, indexOf, and slice.

Explore how to access and modify global variables, and how local scope, name collisions, and inner functions influence program state.

Learn how local scope confines variables to functions and blocks in JavaScript, why var behaves differently than let and const in ES6, and how to prevent global leakage and name collisions.

Discover how map returns a new array from the original without changing its size, enabling you to transform items and render results in vanilla JavaScript or React.

Explore how find returns a single first match (object or value) versus filter returning an array, using IDs and names, and learn when to use either for unique values.

Learn how to use reduce with two parameters and an initial total to compute the average score from an array of students by summing scores and dividing by array length.

Explore using the JavaScript math object to perform rounding, roots, constants, and min/max operations, and generate range 1–10 with random numbers.

Master accessing an element’s text content with nodeValue and textContent, learn when nodeValue returns null, and use firstChild or childNodes or textContent.

Master how to insert dynamic elements with insertBefore, using createElement and createTextNode, and compare it with appendChild to place nodes before a target element such as the result div.

Explore the difference between the current target and the target property by handling clicks on multiple buttons, including nested elements, and changing the button text color to green.

Learn how event propagation, including bubbling and capturing, enables handling clicks on dynamically added elements through container-based event delegation.

Listen for form submit events, prevent the default page refresh, and read input values with the value property to handle form data on the front end.

Store complex data in local storage by using json stringify and json parse to preserve arrays or objects. Manage a fruits or friends array with get item and set item.

Set up a counter in app.js by selecting the value span and all buttons. Use for each to attach click listeners that update the count and color.

Learn to implement a fixed sidebar in a JavaScript project by using CSS transforms to hide and reveal it, toggling a show sidebar class with JavaScript.

Take on a hands-on modal challenge by selecting the modal button, modal overlay, and close button; add click event listeners to toggle the open modal class on the overlay.

Explore general concepts before adding JavaScript, learn to dynamically toggle visibility with a show text class, and swap plus and minus icons to control question visibility using CSS and JavaScript.

Develop a dynamic menu items display by populating items with JavaScript. Explore layout and filtering ideas while working with local data and preparing for external data.

Add a div with a btn container and four filter buttons—all, breakfast, lunch, shakes—to filter items on the index html page using the filter btn class.

Explore how to filter menu items by category using data attributes on filter buttons, then apply the JavaScript filter method to display breakfast, lunch, shakes, or all items.

Learn to replace hard coded filter buttons with a dynamic, data driven approach by extracting unique categories from items, generating category buttons, and updating filters accordingly.

Build a complete single-page HTML layout for a javascript project by scaffolding header, navigation, banner, sections with ids, smooth scrolling links, and a hidden back-to-top button.

Create a countdown timer in html showing days, hours, minutes, and seconds until a hard-coded deadline for a giveaway, using a structured section and gift elements prepared for JavaScript.

Learn to build a dynamic countdown by selecting dom elements, creating a future date, and displaying year, month, date, hours, minutes, and seconds using zero-based months and day arrays.

Build a JavaScript countdown that calculates days, hours, minutes, and seconds from a future date using milliseconds and modulus; update every second, displaying an expired message when time runs out.

Build a dynamic lorem ipsum generator using hipster ipsum, with a number input to set paragraph counts and display results, while practicing forms in JavaScript and number input gotchas.

Set up the grocery bud html with a section center, a form (id grocery) and submit button, an alert, a hidden grocery list, and item controls for edit and delete.

Set up a submit event listener for the grocery bud form. Prevent default submission, read the input value, and generate a time-based unique id for add or edit item logic.

Explore truthy and falsy values in JavaScript and learn how to use the not operator to shorten if conditions, checking value presence and edit flags to control logic.

Wire a clear items function to a clear button, remove all grocery items with querySelectorAll, update the UI and reset local storage for GroceryBud.

Explore wiring up edit and delete buttons for grocery list items that are created dynamically, using direct listeners or event bubbling on the parent container.

Explore GroceryBud's edit item flow, a two-step process that populates the form with the selected item, updates edit flags and id, and persists changes to local storage.

Retrieve local storage data with a get local storage function, then remove an item by filtering by id and update local storage with set item.

Explore objects in JavaScript in detail, covering object oriented programming basics, factory and constructor functions, prototype inheritance, and class syntax, while noting functional approaches and modern frameworks like React.

Explore how property and method lookup in JavaScript relies on an instance's own properties, then falls back to the prototype, with all values ultimately traced to the object constructor.

Explore call, apply, and bind to control this and run functions instantly. See how call lets greet execute for John, Susan, or any object by binding this to the target.

Explore core object oriented programming by building two projects: counters with multiple instances and a gallery, and learn about constructor functions.

learn to set up a javascript counter using constructor functions and classes, create two independent counters with initial values 100 and 200, and implement get element with robust error handling.

Attach click event listeners to counter buttons, ensure this points to the counter, not the button, and create instances bound to a counter for independent increase, decrease, and reset.

Explore gallery project in JavaScript tutorial and projects course, applying object oriented programming to create nature and city image galleries with a modal, set as main image, and prev/next navigation.

Implement an open modal gallery: select an image to set as the main image with its title, and render the remaining images using the spread operator and map.