Javascript Tutorial and Projects Course

Set up your JavaScript workspace by choosing a color scheme, browser, and essential extensions, and learn the recommended text editor settings to speed up your workflow, including playback speed.

Install Google Chrome on mac by downloading the official installer and dragging it to the applications folder. Set Google Chrome as the default browser.

Download and install Visual Studio Code on Mac, navigate to the download page, run the installer, drag the app to Applications, and launch from the dock with a dark theme.

Explore Visual Studio Code basics, including the explorer, extensions, and editor, while learning how to customize font size and settings for JavaScript and React.

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

Install the prettier extension to automatically format code on paste and on save, set prettier as the default formatter, and update settings.json for consistent JavaScript formatting.

Explore Emmet extensions in Visual Studio Code to speed up web development with HTML abbreviations and boilerplate snippets. Learn the syntax and access live suggestions from the documentation.

Explore the JavaScript course setup by visiting the repo and resources linked in this lecture, review the recommended extensions and the settings JSON file, and learn how to ask questions.

Start by learning how to add JavaScript to your projects, then explore loops and other core concepts in JavaScript.

Create a new JavaScript project by setting up a folder and index.html in Visual Studio Code, then view live updates in the browser using live server.

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 to implement internal JavaScript to manage many buttons from a single script, using document.querySelectorAll, forEach, and addEventListener, with script tags placed at the bottom.

Learn how to move external JavaScript to a dedicated file to manage functionality across multiple pages, using relative paths and one source of truth.

Clean up the workspace by removing the js folder and the about HTML, then simplify index.html and reset to a fresh start in app.js for the upcoming JavaScript tutorials.

Explore three essential JavaScript methods: console.log, document.write, and alert, and learn how they reveal results and debug code across the browser console and the DOM.

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.

Discover how to use variables in JavaScript by declaring with let, assigning values, and accessing them with console log; see how changing one variable updates all uses.

Discover how to assign a variable's value later with let, declare multiple variables, and reassign values like a name or address, including undefined when not assigned yet.

learn JavaScript variable naming rules, including allowed characters (letters, digits, underscore, and dollar sign), not starting with a digit or keyword, and case sensitivity with camel case or underscores.

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.

Build projects to learn JavaScript and grasp the major building blocks by practicing after each topic through challenges, with steps reviewed before attempting and a pause to try independently.

Create first name, last name, and address variables in camelCase, assign values, reassign the address with let, and log all three values to the console.

Learn how to control prettier rules for code formatting by adjusting semicolon and single and double quote settings and previewing changes in your JavaScript files.

Choose between single and double quotes for strings in JavaScript, and learn to escape quotes when needed. Preview how template strings will simplify quotes in upcoming sections.

Learn string concatenation in JavaScript by using plus to join name parts, manage spaces, and build dynamic URLs with variables.

learn string concatenation by building a full mailing address from two variables, street and country, such as Main Street and United States, and logging the result in JavaScript.

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.

Explore implicit type conversion in JavaScript, showing how strings and numbers interact, how adding strings yields concatenation, how to convert strings to numbers, and common bugs from HTML inputs.

Explore the seven JavaScript data types, distinguish primitives from objects, and use the typeof operator to inspect strings, numbers, booleans, null, undefined, and symbols.

Explore how arrays in JavaScript store lists of items, access them with zero-based indexes, and modify values using square bracket notation.

Explore an array challenge in JavaScript, accessing the first and last items with zero-based indexing, reassigning the last item, and logging the first fruit and the full fruits list.

Declare and invoke functions to reduce redundancy and reuse code across your JavaScript application. Learn the function keyword, naming, empty or parameterized parentheses, and the function body.

Explore parameters and arguments with a single greet function, using a name parameter and passing different arguments, while learning placeholders and undefined values.

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

Learn how to define functions as expressions by assigning them to variables, including anonymous forms, compare with traditional declarations, and see practical examples like adding numbers.

Explore a step-by-step JavaScript function challenge: create a calculate total function with subtotal and tax parameters, test with logs, and refactor into a function expression.

Explore how JavaScript objects are key-value collections with properties and methods, illustrated by a person and a car, using dot notation and ES6 method shorthand.

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 the basics of JavaScript conditional statements by using if and else, evaluating true or false conditions, and executing code blocks with booleans, comparisons, and console output.

Practice conditional statements in JavaScript by comparing two numbers using if, else, and else if, cover greater than, less than, and equality, plus the not operator and upcoming switch statements.

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.

Explains switch statements in JavaScript as an alternative to if and else, using a dice value example to map 1–6 with cases, break, and a default.

Practice building two person objects and applying an if-else condition to determine voting eligibility based on age and status as resident or tourist, with console logs for outcomes.

Explore while loops, do while loops, and for loops in JavaScript, learning to control flow with conditions, update variables, and print outcomes while avoiding endless loops.

Demonstrate the do while loop by writing the code block before the condition, illustrating it runs at least once and logs money with string concatenation and console.log.

Learn for loops in JavaScript, including initialization inside or outside the loop, start and end conditions, and incrementing or decrementing, with logs showing 0 to 9 and 11 to 0.

Advance your JavaScript skills by exploring string methods, global and local scope, array iterators, and global objects in the next section.

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 template literals in JavaScript (ES6), using backticks for strings, interpolation with ${...}, and easier alternatives to string concatenation, including examples with name and age.

Create a full name function that concatenates first and last names with a template literal, uppercases the result, and test via console logs. Refactor to accept an object parameter.

Explore JavaScript arrays using length, index access, and methods like concat, reverse, shift, unshift, push, and pop. Note how splice mutates the original array and why immutability matters in React.

Combine arrays with a for loop and template strings to create a new array of names with shake and bake, using push and array length to adapt.

Learn to write a reusable calculateTotal function that sums any numeric array using a for loop, returns the total, and reports gas and food totals as an object.

Compare primitive values with objects to show that primitives copy by value while non-primitives copy by reference. Learn how the spread operator copies object values to avoid shared references.

Compare null and undefined in JavaScript, where null is a developer-set value and undefined signals a missing value, such as unpassed parameters or missing object properties.

Explore truthy and falsy values in JavaScript, showing how non-boolean values like strings, empty strings, zero, and NaN evaluate to true or false in conditions.

Explore how the ternary operator shortens if-else logic in JavaScript by evaluating a condition and selecting one of two expressions in a single line.

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.

Learn how JavaScript resolves variables through global and local scopes, including function scope and nested functions, with examples of reference errors and scope fallback.

Explore functions as first-class objects in JavaScript, learn how to create higher-order functions that accept callbacks, and understand the role of callback functions by building reusable greeting logic.

Master array iteration with forEach, map, filter, find, and reduce using callbacks, enabling faster vanilla JavaScript and React app development.

Master the for each array method, learn its callback-based iteration, and see that it does not return a new array. Practice on a sample people array using a callback.

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 the JavaScript filter method, which returns a new array based on a condition and can shrink or empty the result, illustrated by young people age <= 25 and developers.

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.

Discover how the reduce method turns an array into a single value via a callback with an accumulator and current item, illustrated by a daily salary total.

master array methods with the array challenge intro, learn the steps before each video, and recognize that these methods are the bread and butter for building apps across JavaScript frameworks.

Create a JavaScript array of student objects with name, score, and favorite subject, populate sample data (0–100 scores), log to the console, and prepare for map, filter, and reduce.

Explore splitting data and logic across multiple JavaScript files, loading them in the correct order, and using the map method to process arrays, with optional functions to demonstrate data access.

Explore using the map method to iterate over an array of student objects, add a new property to each object, and return the updated array for logging and further use.

Explore the array filter method by creating a high scores filter returning items with scores greater than or equal to 80.

Explore alternative syntaxes for the array filter in JavaScript, including if-then refactors and concise one-liner returns. Compare explicit and implicit truthy checks to achieve the same results.

Learn how to use the array find method to locate a single object by id, compare it with filter, and handle truthy results versus undefined.

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 JavaScript's square bracket notation to dynamically create and assign object properties based on a variable, enabling flexible surveys that tally subjects like math, history, and art.

Apply reduce to accumulate student favorites into an object of subject counts, creating dynamic properties like math and history as you iterate through the array.

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

Explore the JavaScript date object, create dates with new Date, extract day, date, month and year with get methods, and format a date such as Monday 15th June 2020.

Explore the document object model and learn to interact with web page elements using JavaScript, including selecting elements, styling, and handling events to create dynamic pages.

Master the DOM workflow: select an element, then apply changes with JavaScript, using body and button examples, and understand node objects, node lists, and the role of document and window.

Explore the window object and the document object, which provide browser APIs and access to the current tab and body. Use console.log and console.dir to inspect their properties and methods.

Learn to select elements by tag name with document.getElementsByTagName, observe the HTMLCollection, and use indexing and length. Convert to an array via spread to apply methods, and compare with querySelectorAll.

Learn how to select elements by class name with getElementsByClassName, access HTML collections, and modify the last item's color to blue using index-based targeting.

Learn to use querySelector and querySelectorAll to select single elements or whole lists with any css selector, then apply forEach to style items like those with special or last classes.

Navigate the dom tree by traversing from a result element to its children using the children property. Compare childNodes with the actual children to avoid whitespace text nodes.

Navigate the dom upward using parentElement to reach ancestors from heading2 to the div, then body and html, chaining until null, and apply color to a parent.

Learn how to navigate the DOM using nextSibling and previousSibling, select list items with querySelector or getElementById, handle whitespace and null results, and apply styles like color.

Learn to navigate the DOM with nextElementSibling and previousElementSibling, grab adjacent elements, and apply styles such as setting color to red with concise code.

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

Explore getAttribute and setAttribute to read and write attributes (class, href), select elements with querySelector/getElementById, and dynamically update a list item's class and text.

Demonstrate adding, removing, and checking CSS classes on elements with JavaScript using className and classList, with three headings and getElementById, plus contains.

Create and insert elements dynamically in the DOM using createElement, createTextNode, and appendChild, then use classList to add blue and place content in the body or a result container.

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.

Learn to dynamically insert a heading using the prepend method and innerText property by creating a heading two element and placing it before the first heading with template text.

Learn to remove elements from the DOM using remove and removeChild, selecting targets with querySelector or getElementById on the node or its parent.

This lecture explains innerHTML and textContent, compares their differences and uses, and shows how template strings and dynamic values speed up building HTML structures in JavaScript projects.

Discover how to change CSS with the style property, explore its drawbacks, and leverage classList for cleaner styling, faster updates, and separation of concerns between HTML, CSS, and JavaScript.

Explore how JavaScript events drive interactivity by handling mouse clicks, scrolls, and form submissions, and learn the principles behind events with practical hover and click examples that add css classes.

Learn to set up a click event by selecting the element, adding an event listener, and using a callback to update the DOM, such as adding a red class.

Learn to toggle a heading's red class on button click by checking and updating classList with contains, add, and remove, using a named function reference and a callback.

Learn to handle mouse events with JavaScript using listeners for click, mouse down, mouse up, and mouse enter and leave to add or remove a blue class on a heading.

Explore key events in JavaScript by wiring an input to key press, key down, and key up listeners, then console log the input value on key up.

Explore the event object passed to callbacks, access currentTarget and type, and use preventDefault to control behavior with addEventListener.

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.

Explore event propagation in JavaScript, mastering bubbling and capturing to handle clicks on dynamic elements through parent listeners, and learn how currentTarget and target differ.

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.

Use the web storage API to persist data with local storage via setItem, getItem, removeItem, and clear, while session storage lasts only while the tab is open.

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.

Learn how to use setTimeout to run a function after a delay, passing a function reference and millisecond duration, with optional arguments and the ability to clear the timeout.

Learn how setInterval repeatedly runs a function at fixed intervals, compare it to setTimeout, and practice with arguments, console logs, and canceling via clearInterval.

Master how the DOMContentLoaded event fires when the initial HTML document is loaded, and set up a window.addEventListener callback to run code after content loads.

Learn how the window load event fires after the whole page and resources finish loading, unlike DOMContentLoaded. Use window.addEventListener('load', ...) to run code when images and stylesheets are ready.

Listen for the window scroll event with addEventListener, logging scrollY and scrollX as you scroll, and note that pageYOffset and pageXOffset are deprecated.

Explore how to measure element sizes and window dimensions using getBoundingClientRect, log dimensions on button clicks, and observe how height, width, and viewport positions update as you resize.

Learn how to respond to viewport changes by attaching a window resize event listener with a callback that logs the window width as the size changes.

Build multiple JavaScript projects from your starter, using your existing JS knowledge and the project website to explore and follow along at your own pace.

Set up all JavaScript projects using a repeatable setup folder from the GitHub repo, pairing a text editor with a browser. Use the final project for reference, not direct copying.

Build the color flipper in HTML and JavaScript, changing the body background on button clicks and displaying the current color, with fixed colors and a hex generator.

Set up index.html and app.js, define a four-item colors array with green, red, rgba, and hex, and change the body's background color on button click while updating the color text.

Generate random hex colors on each button click, applying them to the page background and color display, and build a hex color generator with a loop and random number function.

Build a counter with increase, decrease, and reset to zero using HTML and JavaScript. Color shows green above zero, red below, and black at zero with buttons: decrease, reset, increase.

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.

Explore the reviews project by looping over reviews with JavaScript, display review cards, and add a random review button within a structured HTML container.

Learn to build a reviews widget from an array of person objects. Initialize on dom content loaded, then navigate with next, prev, and random via show person.

Build a navbar by starting with HTML, including a nav header and logo, plus a toggle button to display links on small screens, then test on bigger and smaller sizes.

Explore the general concepts of a nav toggle by measuring the links height, hiding overflow, and toggling a class on the links when the nav button is clicked.

Implement a responsive navbar toggle by wiring a click event to the nav toggle, using classList to toggle the show links class on the links, including a one-liner alternative.

Build and control a sidebar with JavaScript, toggling and closing it, with responsive 100% width on small screens and fixed width on large screens, including links and social icons.

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.

Learn how to implement a sidebar with a toggle and close button in app.js using querySelector, event listeners, and classList.toggle to control the show sidebar state.

Create an interactive modal in a hero section by wiring an open modal button to a modal overlay and container, with a heading, modal content, and a close button.

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.

Target three elements: a modal button, a modal overlay, and a close button—and toggle an open modal class with click event listeners to show or hide the modal.

Explore an interactive questions section in a JavaScript tutorial that uses plus/minus buttons to reveal answers, demonstrates DOM traversal and element selection, and builds from a structured index.html layout.

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.

Traverse the DOM to select all question buttons, attach click events, and move to the question container via parent elements, then toggle the show text class to reveal the answer.

Use selectors inside the element and querySelectorAll to gather questions, then attach click listeners to toggle the show text class. Close other items so only the clicked one stays open.

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.

Dynamically populate the menu on page load by mapping a menu array to HTML, then inject the result into the section center using innerHTML after the dom content loaded event.

Refactor your code by encapsulating the filtering logic into a dedicated function, parameterizing it with the menu items array, making the setup faster and easier to maintain.

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.

Extract unique categories from a menu using map, then refactor with reduce to include an all option, using includes and an initial value while preparing category buttons.

Create dynamic filter buttons from a categories array using map and template strings, render them in the button container, and attach event listeners after dom updates.

Learn to embed video in HTML, apply dark overlay for readable white text, and use JavaScript to add play and pause controls and a preloader.

Learn how to set up HTML video playback using a video element with a source tag for an MP4 file, and apply controls, muted, autoplay, and loop attributes.

Apply a CSS overlay on the image to darken the background and improve text visibility, then remove video controls to build a custom play/pause button with HTML, CSS, and JavaScript.

Select the switch button and video container, attach a click event, toggle the slide class to move the container, and control playback with video.pause() and video.play().

Implement a fixed preloader that shows a loading gif while the page loads, then hide it on the window load event by toggling a hide preloader class with JavaScript.

Learn to handle scroll events to toggle a nav bar from static to fixed, enable smooth scrolling to sections, and dynamically set the year with JavaScript.

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.

Set up the date dynamically in JavaScript by creating a Date object, selecting the element by id, and using getFullYear to update innerHTML.

Toggle navigation links by selecting the links container, the links, and the toggle; use a click event to switch the show links class. Explore dynamic height versus hardcoded height.

Learn to implement a dynamic nav toggle in javascript by measuring the links height with getBoundingClientRect and toggling inline styles to reveal or hide links, starting from height zero.

Learn to implement a fixed navigation bar and a back to top button that appear after scrolling past the nav height, using the window scroll event, pageYOffset, and class toggling.

Set up precise smooth scrolling by wiring nav links to section IDs, preventing default behavior, calculating offsets, and closing the toggle nav on small screens.

Learn to implement complete smooth scrolling by calculating nav bar height and container height, handling fixed nav state, and subtracting heights for accurate section navigation.

Create a tabs interface in HTML that switches content for history, vision, and goals using data-id attributes and an active class, within a two-column layout.

Master dynamic tabs by selecting tab buttons and content articles, using event bubbling and event.target, reading data-id via dataset, and showing the matching content with getElementById while toggling active class.

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.

This lecture teaches implementing a dynamic future date by adding ten days to current date on app startup, using new Date to derive year, month, and date for the counter.

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.

Learn to display lorem ipsum paragraphs from a nine-item array by handling form input, preventing default submit, parsing values, and rendering selected paragraphs.

Explore grocery bud, a glorified to-do list that adds, edits, deletes, and clears items with local storage to persist data after refresh.

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.

Master selecting elements with query selectors, wiring a grocery form, and managing edit flag and edit ID with event listeners for a grocery list interface.

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.

Learn to implement a reusable display alert function for GroceryBud, handling empty inputs with a danger alert and auto-hide using setTimeout, and apply dynamic classes with a template string.

Gain hands-on with GroceryBud addItem by creating dynamic elements with class grocery item and data-id, appending to the list, showing alerts and container, and wiring placeholders for local storage.

Explain how to implement a robust setBackToDefault function that clears the grocery value and resets editing state, including edit flag, edit id, and submit button text, preparing for multiple uses.

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 deleting a grocery item in GroceryBud by using event object and current target to locate the item, remove it from the list, and update local storage with its id.

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.

Learn how to use the browser localStorage API to persist a list by setItem, getItem, and removeItem, storing strings with JSON.stringify and JSON.parse, including arrays of objects.

Learn to add items to local storage for a grocery app by building a grocery object, using ES6 shorthand, and persisting items with JSON.parse and JSON.stringify, with a list key.

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 editing GroceryBud items in local storage, including removing items, testing getItem returning null, and updating items by id with map, setItem, and JSON.stringify.

Load items from local storage on page load and display them, preserving groceries across sessions while supporting edit and delete actions.

Demonstrate a simple JavaScript slider and compare two navigation options: hide end buttons or wrap around from end to start.

Create a flexible image slider using a slider container with multiple slides, each containing optional images and headings, plus a separate button container with pre and next controls.

Explore the general concept of a JavaScript slider: a relative container with absolute slides, overflow hidden, and translateX shifts, using grid layout to prepare for interactive navigation.

Set up a JavaScript powered slider by selecting slides with querySelectorAll, wiring next and previous buttons, and positioning slides with style.left using each index to create an editable, scalable carousel.

Create a JavaScript slideshow with a zero-based counter and next/previous buttons that move slides with translateX by 100%, enabling circular navigation from end to beginning and back, with overflow hidden.

Learn a button based slider approach that hides and shows the prev and next buttons as you navigate slides, using a counter and display styles to manage end navigation.

Deploy your projects and share them by adding project links to your portfolio, using Netlify's generous free tier and intuitive interface for a fast, simple setup.

Sign up to access your dashboard and publish projects using drag and drop or continuous deployment, then deploy manually to take a project online and share it.

Set up git and GitHub to enable continuous deployment by creating a repository, pushing changes from Visual Studio Code or the terminal, and auto-deploying updates to the site.

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 JavaScript objects as collections of key-value pairs, using object literals, dot notation, and methods to create, access, modify, add, and delete properties such as name, age, and city.

Explore how to create and access nested objects using dot and bracket notation. Learn about setting property values from variables, handling undefined, and using ES6 shorthand for clean access.

Explore the this keyword in JavaScript using object literals and dynamic this. See how left of the dot determines the object context with John and Bob examples.

Explore how this in regular JavaScript functions is determined by invocation, including the global window when there is no left of the dot, with object and button examples.

Learn to use factory and construction functions to create dynamic objects with a single, reusable setup, passing first and last names to generate a configurable full name method.

Explore how constructor functions create object blueprints using this and the new keyword, contrasting them with factory functions, and show how instances gain a full name method.

Explore how every JavaScript object has a constructor property pointing to its creator, and see built-in constructors like Object, Array, and Function, plus creating new instances with new.

Explore prototypal inheritance and how a shared prototype stores properties and methods for all accounts. Implement a bank account constructor and move deposit to the prototype to avoid duplicates.

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.

Learn how ES6 classes provide a cleaner syntax that acts as syntactic sugar for prototypal inheritance, using constructors, the new keyword, instances, and methods to set up properties and behaviors.

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 how call and apply run instantly, comparing passing arguments as a list versus an array, using a greet function to show this object, city, and country parameters.

Learn how bind differs from call and apply by binding a function to an object, assigning it for later invocation with an arguments list to greet Susan.

Wire a button to an event listener, increment a counter, and fix this with bind to make this reference the counter while exploring edge cases for removing listeners.

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

Download the repository zip, unzip it, and access the object oriented programming project folders; copy the counter and gallery from the main repo and set the star project as workspace.

Set up two counter components in index.html with a shared structure: a div with class counter, a value span starting at 0, and decrease, reset, and increase buttons.

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.

Bind a single counter to each element to manage its own value and its increase, decrease, and reset buttons inside, updating the DOM text content for every instance.

Define prototype methods for increase, decrease, and reset on a constructor function, update the DOM with this.value, and wire button clicks to trigger these actions.

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.

Refactor a counter app from constructor to a class in JavaScript, preserving functionality with constructor-based setup, event listeners, and methods for 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.

Build a gallery project with nature and city sections in html, connect index.html to app.js, enforce unique data-id attributes, implement modal with open, close, prev/next controls and font awesome icons.

Build a gallery component using getElement, create city and nature galleries, gather images into a spread array, and configure a shared modal with close and next/previous buttons.

Bind click events on gallery containers to open a modal when an image is clicked, manage this binding to the gallery, and explore a self-reference alternative for context.

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.

Wire up the gallery modal by binding close, next, and prev handlers to the gallery, then add listeners on open and remove them on close to prevent duplicate events.

Learn to implement next and previous image navigation in a modal gallery by identifying the selected image, wrapping to the first or last item, and updating the main display.

Learn how to implement a modal image gallery in JavaScript by selecting a clicked image as the main image, managing event listeners, and updating the selected state.

Learn how to refactor constructor function code to class based syntax in a gallery project, and check the final folder for the app-class file as a reference.

Switch to functions and explore topics such as iffy, hoisting, and the closure, explaining what they are and why they are useful.

Learn about immediately invoked function expressions (iife) as an older approach to avoid global scope pollution, compare to modules, and see how to invoke, pass arguments, and return values.

Explore how hoisting moves function and var declarations to the top, and learn why const and let cannot be accessed before initialization, encouraging you to access them only after initialization.

Explore JavaScript closures by examining how an inner function accesses the outer function's scope and how returning a function preserves private variables for later invocation.

Learn closure with a basic JavaScript example that creates a new account function taking a name and initial balance, and a show balance function that remembers each account’s starting balance.

Explore closures by building a bank account api that returns a function or an object with show balance, deposit, and withdraw. Demonstrates per-account state and safe balance access.