Modern JavaScript from The Beginning [Second Edition]

1. Welcome to the Course

In this video, we will be introduced to the course and get an idea of what we can expect from the course, including the topics we will cover and the projects we will build.

2. Course Outline and Projects

In this video, we will provide an overview of the course outline and the projects we will build. We will discuss the various sections of the course and what you can expect to learn from each one. Additionally, we will showcase the projects we will create and explain how they will help you solidify your understanding of the concepts.

3. What Is JavaScript?

In this video, we will cover the basics of JavaScript. We will discuss what is JavaScript used for and understand why we should learn JavaScript.

4. Tools and Setup

In this video, we will see the tools we will need to follow along with the course. We will cover text editor, web browser, and JavaScript console. We will also see how to set up our development environment and install any necessary software.

5. Running JavaScript in the Browser

In this video, we will explain how to run JavaScript code in the browser with a simple Hello World code.

1. Section Introduction

In this video, we will have an overview of the topics we will be covering in this section.

2. The Sandbox Files

In this video, we will introduce the "sandbox" files that we will be using throughout the course to test our code and explore new concepts.

3. Using the Console

In this video, we will explain how to use the browser console to test and debug our code.

4. Comments and Shortcuts

In this video, we will go over commenting in JavaScript and introduce some helpful keyboard shortcuts for our coding workflow.

5. Variables and Constants

In this video, we will cover variables and constants in JavaScript, how to declare them, and how to assign values to them.

6. Data Types

In this video, we will discuss the different data types in JavaScript, including strings, numbers, Booleans, null, undefined, symbols, and BigInt.

7. Primitive Versus Reference Types

In this video, we will explain the difference between primitive and reference types in JavaScript and how they are stored in memory.

8. Type Conversion

In this video, we will cover type conversion in JavaScript, including implicit and explicit conversion, and how to convert between data types.

9. Operators

In this video, we will introduce operators in JavaScript, including arithmetic, comparison, logical, and assignment operators, and how to use them in our code.

10. Type Coercion

In this video, we will cover type coercion in JavaScript, which is the process of converting one data type to another. We will explore implicit and explicit type coercion and learn how to avoid common pitfalls when working with type coercion.

11. Working with Strings

In this video, you will learn how to work with strings in JavaScript. We will cover the basics of strings, including how to create them, access individual characters, and concatenate strings. We will also explore some common string methods such as toUpperCase, toLowerCase, indexOf, slice, and substring.

12. Capitalize Challenge

In this video, we will tackle a coding challenge to capitalize the first letter of each word in a given string. We will walk through the problem step by step, discuss different approaches, and write a solution using JavaScript string methods.

13. Working with Numbers

In this video, we will cover the basics of working with numbers in JavaScript. We will explore number literals, operators, and common methods for working with numbers.

14. The Math Object

In this video, we will explore the Math object in JavaScript, which provides a set of built-in methods for performing mathematical operations. We will cover common methods such as round, ceil, floor, random, and more.

15. Number Challenge

In this video, we will tackle a coding challenge to reverse a given number in JavaScript. We will walk through the problem step by step, discuss different approaches, and write a solution using JavaScript math and string methods.

16. Dates and Times

In this video, we will cover working with dates and times in JavaScript. We will explore the Date object, which provides built-in methods for working with dates and times, as well as common date and time formats.

17. Date Methods and DateTimeFormat API

In this video, we will continue our exploration of the Date object in JavaScript, focusing on some of the built-in methods for working with dates and times. We will also cover the new Intl.DateTimeFormat API, which provides a powerful way to format dates and times in different locales.

1. Section Introduction

In this video, we will be introduced to this section and given an overview of what will be covered.

2. Creating Arrays

This video covers how to create arrays in JavaScript, including declaring an array, assigning values to an array, and accessing array elements.

3. Basic Array Methods

In this video, you will learn about some basic array methods in JavaScript, such as push(), pop(), shift(), unshift(), and splice().

4. Nesting, Concat and the Spread Operator

In this video, you will learn how to nest arrays and use the concat() and spread operator to manipulate arrays.

5. Array Challenges

This video presents some challenges related to arrays and requires students to apply their knowledge of array methods and manipulation.

6. Object Literals

In this video, you will learn about object literals in JavaScript, including creating objects, accessing object properties, and adding methods to objects.

7. Object Spread Operator and Methods

This video explains how to use the object spread operator and several object methods in JavaScript, such as Object.assign(), Object.keys(), and Object.values().

8. Destructuring and Naming

In this video, you will learn how to use destructuring to extract values from arrays and objects, and how to use naming conventions in JavaScript.

9. JSON Introduction

In this video, we will be introduced to JSON (JavaScript Object Notation), a lightweight data interchange format, and learn how to use it in JavaScript.

10. Object Challenges

This video presents some challenges related to objects and requires students to apply their knowledge of object manipulation and methods.

1. Section Introduction

This video provides an overview of the topics that will be covered in this section, which includes functions, scope, and execution context.

2. Creating a Function

In this video, you will learn how to create a function in JavaScript, and how to call it to perform a specific task.

3. More on Arguments and Parameters

This video discusses the differences between arguments and parameters in JavaScript, and how to use them effectively in our functions.

4. Global and Function Scope

Here, you will learn about global and function scope, and how JavaScript handles variable declarations within these scopes.

5. Block Scope

This video explains block scope, which was introduced in ES6, and how it differs from global and function scope.

6. Nested Scope

In this video, you will learn about nested scope, which is when a function is defined within another function, and how it affects variable scope.

7. Declaration Versus Expression

This video discusses the difference between function declarations and function expressions, and how to use them effectively in our code.

8. Arrow Functions

Here, you will learn about arrow functions, which provide a shorter syntax for writing functions and how they work.

9. Immediately Invoked Function Expressions (IIFE)

In this video, you will learn about immediately invoked function expressions (IIFE) and how they are used in JavaScript.

10. Function Challenges

This video provides challenges for us to test our understanding of the concepts covered in this section.

11. Execution Context

Here, you will learn about execution context, which is the environment in which JavaScript code is executed.

12. Execution Context in Action

This video demonstrates how execution context works in practice, using examples to illustrate the different stages of the execution context.

13. The Call Stack

Finally, this video explains call stack, which is the mechanism used by JavaScript to keep track of function calls and their respective execution contexts.

1. Section Introduction

This video introduces this section, which focuses on logic and control flow in JavaScript.

2. If Statements

This video covers the basic syntax and use of if statements in JavaScript, which allow us to execute different code blocks based on conditions.

3. Else-If and Nesting

Building on the previous video, this one shows how to use else-if statements to handle multiple conditions and how to nest if statements within each other.

4. Switches

This video introduces the switch statement in JavaScript, which provides an alternative way to handle multiple conditions and can make our code more concise and readable.

5. Calculator Challenge

In this video, we will be presented with a challenge to create a simple calculator using the concepts covered in this section.

6. Truthy and Falsy

This video explains the concept of truthy and falsy values in JavaScript, which can be used to simplify our code when checking for conditions.

7. Logical Operators

This video covers the logical operators in JavaScript, including AND (andand), OR (

8. Logical Assignment

This video introduces the logical assignment operators (andand= and

9. Ternary Operator

The ternary operator is a concise way to write if/else statements in JavaScript, and this video shows us how to use it effectively.

1. Section Introduction

In this video, we will introduce this section and discuss what will be covered.

2. For Loop

In this video, we will explore the for loop in JavaScript, which allows us to iterate over a set of values.

3. Break and Continue

In this video, you will learn how to use the break and continue statements to control the flow of our loops.

4. While and Do While Loops

In this video, you will learn about while and do-while loops in JavaScript and how they differ from for loops.

5. FizzBuzz Challenge

In this video, we will tackle a common coding challenge called FizzBuzz, which involves printing out certain words or numbers based on certain conditions.

6. For...of Loop

In this video, you will learn about the for...of loop in JavaScript, which allows us to iterate over the values of an iterable object.

7. For...in Loop

In this video, we will explore the for...in loop in JavaScript, which allows us to iterate over the properties of an object.

8. Array.forEach Method

In this video, you will learn about the Array.forEach method, which allows us to loop over the elements of an array and execute a function for each element.

9. Array.filter Method

In this video, we will explore the Array.filter method, which allows us to create a new array with only the elements that pass a certain test.

10. Array.map Method

In this video, we will explore the Array.map method, which allows us to create a new array by applying a function to each element of an existing array.

11. Array.reduce Method

In this video, we will discuss the Array.reduce method, which allows us to reduce an array to a single value by applying a function to each element of the array.

12. Array Method Challenges

In this video, we will put our knowledge of array methods to the test by tackling some coding challenges.

1. Section Introduction

This video introduces this section, which covers the topic of DOM (Document Object Model) manipulation. The video gives an overview of what the section will cover and what the viewer can expect to learn.

2. Introduction to the DOM

This video explains what the DOM is and how it works. It covers the concept of nodes and how they are used to represent the elements in an HTML document. The video also explains how JavaScript can be used to interact with the DOM.

3. Document Element Properties

This video covers the properties of the document object, which represents the entire HTML document. It explains how to access and manipulate properties such as the document title, URL, and body.

4. DOM Selectors - Single Elements

This video covers the different ways to select a single element in the DOM using JavaScript. It covers the methods getElementById(), querySelector(), and querySelectorAll().

5. DOM Selectors - Multiple Elements

This video covers the different ways to select multiple elements in the DOM using JavaScript. It covers the getElementsByTagName(), getElementsByClassName(), and querySelectorAll() methods.

6. Traversing the DOM - Elements

This video covers how to traverse the DOM to access child elements, parent elements, and sibling elements. It covers the firstChild, lastChild, nextSibling, and previousSibling properties.

7. Traversing the DOM - All Nodes

This video covers how to traverse the entire DOM, including text nodes and comment nodes. It covers the firstNode, lastNode, nextNode, and previousNode properties.

8. Create and Append Elements

This video covers how to create new elements using JavaScript and how to append them to the DOM. It covers the createElement(), createTextNode(), and appendChild() methods.

9. InnerHTML Versus createElement()

This video explains the difference between using innerHTML and createElement() to add HTML elements to the DOM. It covers the advantages and disadvantages of each method.

10. Refactor to Multiple Functions

This video covers how to refactor code into multiple functions to make it more organized and easier to read. It covers the concepts of function composition and separation of concerns.

11. Insert Elements, Text, and HTML

This video covers how to insert new elements, text, and HTML into the DOM using JavaScript. It covers the insertBefore(), insertAdjacentElement(), insertAdjacentText(), and insertAdjacentHTML() methods.

12. Custom insertAfter() Challenge

This video presents a coding challenge to create a custom function called insertAfter() that can insert an element after a specific element in the DOM.

13. Replace Elements

This video covers how to replace an element in the DOM with a new element using JavaScript. It covers the replaceChild() method.

14. Remove Elements

This video covers how to remove an element from the DOM using JavaScript. It covers the removeChild() method.

15. Manipulating Styles and Classes

This video covers how to manipulate CSS styles and classes in the DOM using JavaScript. It covers the style property and the classList property.

1. Section Introduction

In this section, you will learn about events and how to handle them in JavaScript. We will look at different types of events and how to register event listeners to respond to them.

2. Event Listeners

In this video, we will explore how to register event listeners to handle events in JavaScript. You will learn about different types of event listeners and how to attach them to HTML elements.

3. Mouse Events

In this video, we will look at how to handle mouse events such as click, double-click, hover, and drag in JavaScript. You will learn how to use event listeners to respond to mouse events and perform actions based on them.

4. The Event Object

In this video, you will learn about the event object in JavaScript. We will explore how to access and use properties of the event object to handle events more effectively.

5. Keyboard Events and Key Properties

In this video, we will look at how to handle keyboard events such as keydown, keyup, and keypress in JavaScript. You will learn how to use event listeners to respond to keyboard events and how to access key properties of the event object.

6. KeyCode Mini-Project

In this video, we will work on a mini project that uses keyboard events to create a simple game. You will learn how to use event listeners and key properties to detect user input and update the game state accordingly.

7. Input Events

In this video, we will explore how to handle input events such as change, input, and submit in JavaScript. You will learn how to use event listeners to respond to input events and how to access input values and form data.

8. Form Submission and FormData Object

In this video, we will look at how to handle form submissions in JavaScript. You will learn how to use the FormData object to collect form data and send it to a server using AJAX.

9. Event Bubbling

In this video, we will explore how event bubbling works in JavaScript. You will learn about the event propagation model and how to use it to handle events more efficiently.

10. Event Delegation and Multiple Events

In this video, you will learn about event delegation in JavaScript. We will explore how to use event delegation to handle events for multiple elements and how to register event listeners for different types of events.

11. Page Loading and Window Events

In this video, we will look at how to handle page loading and window events in JavaScript. You will learn how to use event listeners to detect when a page has finished loading and how to respond to window events such as resizing and scrolling.

1. Section Introduction

In this video, we will be introduced to the Shopping List project, which is the final project for the course.

2. Add Items to List (DOM Only)

In this video, you will learn how to add items to the shopping list using only the DOM (Document Object Model) without using local storage.

3. Setting Up Git and GitHub (Optional)

In this optional video, you will learn how to set up Git and GitHub for version control and collaboration.

4. Remove and Clear Items

In this video, you will learn how to remove items from the shopping list and how to clear the entire list.

5. Clear UI State

In this video, you will learn how to clear the UI state after removing an item from the shopping list.

6. Filter Items

In this video, you will learn how to filter the items in the shopping list by name.

7. Local Storage Crash Course

In this video, we will be provided with a brief overview of local storage and how it works.

8. Add Items to Local Storage

In this video, you will learn how to add items to the shopping list using local storage.

9. Display Items from Local Storage

In this video, you will learn how to display the items from local storage in the shopping list.

10. Remove Items from Local Storage

In this video, you will learn how to remove items from local storage when they are removed from the shopping list.

11. Set Item to Edit

In this video, you will learn how to set an item to edit and show its current value in the input field.

12. Update Item and Reset State

In this video, you will learn how to update an item in the shopping list and reset the UI state.

13. Prevent Duplicate Items

In this video, you will learn how to prevent adding duplicate items to the shopping list.

14. Deploy to Netlify

In this video, you will learn how to deploy the shopping list project to Netlify for hosting.

1. Section Introduction

In this section, you will learn about asynchronous JavaScript and how it works under the hood. We will see the difference between synchronous and asynchronous code execution, and how JavaScript uses the event loop to manage asynchronous tasks.

2. Under the Hood: Thread of Execution

In this video, you will learn about the thread of execution in JavaScript and how synchronous code execution works. We will see how JavaScript manages the stack, heap, and queue and how it executes code line by line.

3. Under the Hood: How Async JS Works

In this video, you will learn about how asynchronous JavaScript works. We will see how JavaScript uses the event loop to manage asynchronous tasks and how it avoids blocking the main thread of execution.

4. setTimeout and clearTimeout Functions

In this video, you will learn about the setTimeout and clearTimeout functions in JavaScript. We will see how to use these functions to schedule a task to be executed after a delay and how to cancel a scheduled task.

5. setInterval and clearInterval Functions

In this video, you will learn about the setInterval and clearInterval functions in JavaScript. We will see how to use these functions to execute a task repeatedly at a given interval and how to stop the interval.

6. Callbacks

In this video, you will learn about callbacks in JavaScript. we will see how to use callbacks to execute code after an asynchronous task is completed and how to handle errors and exceptions.

7. Crash Course on HTTP Requests

In this video, you will learn about HTTP requests and how they work. We will see the different HTTP methods, status codes, and headers and how to use them in our web applications.

8. DevTools Network Tab

In this video, you will learn about the Network tab in the Chrome DevTools. We will see how to inspect HTTP requests and responses and how to analyze network performance.

9. AJAX and XHR Object

In this video, you will learn about the Network tab in the Chrome DevTools. We will see how to inspect HTTP requests and responses and how to analyze network performance.

10. Joke Generator Project Challenge

In this video, we will be presented with a challenge to create a Joke Generator Project using the knowledge we have gained so far about asynchronous JavaScript. You will learn how to use the Fetch API to retrieve data from an API, and then use that data to display random jokes on our webpage. This project will help us practice our skills and build our confidence in working with asynchronous JavaScript.

11. Callback Hell

In this video, you will learn about the problem of Callback Hell, which can occur when working with asynchronous JavaScript. You will learn what it is, how it can make code difficult to read and maintain, and how to avoid it using Promises instead.

12. Promises

In this video, you will learn about Promises, which are a way to handle asynchronous JavaScript in a more readable and maintainable way than using callbacks. You will learn how Promises work, how to create them, and how to use them to handle asynchronous tasks.

13. Callback to Promise Refactor

In this video, you will learn how to refactor code that uses callbacks into code that uses Promises. We will see how using Promises can make code more readable and easier to maintain and how to handle errors when working with Promises.

14. Promise Chaining

In this video, you will learn how to use Promise chaining to handle multiple asynchronous tasks in a more elegant way. We will see how to chain Promises together and how to use the result of one Promise as the input for the next Promise.

15. Promises Versus Callback Hell

In this video, we will see a comparison of Promises and Callbacks, and how Promises can help us avoid the problems of Callback Hell. You will learn how Promises can make code more readable and maintainable and how to use Promises in real-world applications.

16. Handling Multiple Promises with promise.all()

In this video, you will learn how to use the Promise.all() method to handle multiple Promises at once. We will see how to wait for multiple Promises to resolve and how to handle errors if any of the Promises are rejected. This method can be particularly useful when working with APIs that return multiple datasets.

1. Section Introduction

In this section, we will cover the Fetch API and how to use it to make HTTP requests to remote servers. We will also dive into the world of asynchronous JavaScript programming, exploring the async/await syntax for handling promises.

2. Fetch Basics

In this video, we will introduce the basics of the Fetch API, including how to create a simple GET request and handle the response data. We will also explore the Response object and various methods for parsing and manipulating response data.

3. Random User Mini-Project

In this mini project, we will use the Fetch API to load data from the Random User API and display it in an HTML document. We will cover how to create a custom function for fetching data, how to handle errors and loading states, and how to dynamically create HTML elements.

4. Fetch Options - Method, Body Headers

In this video, we will explore the various options available when making a Fetch request, including the HTTP method, request body, and request headers. We will also cover how to set and use custom headers, such as authentication tokens.

5. Typicode Todos Mini-Project - Part 1

In this mini project, we will build a simple Todo list app using the Fetch API and the JSONPlaceholder API. We will cover how to make a POST request to add new todos and how to dynamically update the UI to reflect the current state of the data.

6. Typicode Todos Mini-Project - Part 2

In this video, we will continue building our Todo list app by adding the ability to delete todos and update their status. We will also cover how to use the PUT and DELETE methods in Fetch and how to handle success and error responses.

7. Fetch API Error Handling

In this video, we will explore various techniques for handling errors when working with the Fetch API, including how to check the response status code, catch network errors, and gracefully handle error responses.

8. Async and Await

In this video, we will introduce the async/await syntax for working with Promises in JavaScript. We will cover how to define an async function, use the await keyword to wait for a Promise to resolve, and handle errors using try/catch blocks.

9. Try...Catch Statements

In this video, we will take a closer look at the try/catch statement and how it works to catch errors in JavaScript. We will cover how to use multiple catch blocks, rethrow errors, and catch errors in async functions.

10. Error Handling with Async and Await

In this video, we will explore best practices for handling errors when using async/await in JavaScript. We will cover how to use the try/catch statement with async functions, how to handle errors thrown in Promises, and how to handle network errors.

11. Multiple Promises with Async and Await

In this video, we will cover how to work with multiple Promises using async/await in JavaScript. We will explore techniques for parallel and sequential execution of Promises and cover how to use Promise.all() and Promise.race() to handle multiple Promises.

1. Section Introduction

In this section, we will be building a movie app called Flixx using the Movie Database (TMDb) API. We will be using JavaScript and a library called Swiper to create a responsive and user-friendly interface.

2. Theme Overview and Prep

In this video, we will go over the theme of our movie app and prepare our environment by setting up our project files and installing the necessary dependencies.

3. API Overview and API Key

In this video, we will provide an overview of the TMDb API and how we can use it to get movie and TV show data for our app. We will also obtain an API key from TMDb that we will use to authenticate our requests.

4. Page Router and Active Link

In this video, we will set up a page router using the Page.js library to allow users to navigate between different pages of our app. We will also create an active link feature to highlight the current page in the navigation menu.

5. Display Popular Movies

In this video, we will fetch and display a list of popular movies from the TMDb API using JavaScript's fetch function and render them to the UI.

6. Spinner and Popular TV Shows

In this video, we will add a loading spinner to indicate when data is being fetched from the API. We will also fetch and display a list of popular TV shows using the same method we used for movies.

7. Movie Details Page

In this video, we will create a movie details page that displays more information about a selected movie. We will fetch additional data from the API and use a template literal to dynamically render the content.

8. Details Page Backdrop

In this video, we will add a backdrop image to the movie details page to provide a visual element that complements the movie information. We will use the Swiper library to create a responsive and dynamic backdrop.

9. TV Show Details Page

In this video, we will create a TV show details page that's similar to the movie details page. We will fetch TV show data from the API and use a template literal to render the content.

10. Swiper Slider

In this video, we will use the Swiper library to create a slider that displays additional movie and TV show content. We will fetch the data from the API and create a responsive and dynamic slider.

11. Search Functionality

In this video, we will create a search function that allows users to search for movies and TV shows. We will use JavaScript's Fetch function to query the API and render the results to the UI.

12. Display Search Results

In this video, we will display the search results on a separate page that's similar to the popular movies page. We will use a template literal to render the content and create pagination for large search result sets.

13. Add Pagination for Search

In this video, we will add pagination to the search results page to allow users to navigate between different pages of search results. We will use the Page.js library to create dynamic URLs and render the correct results for each page.

1. Section Introduction

In this video, we will be introduced to the web browser APIs section. You will learn what are Web Browser APIs and how they help us interact with web browsers.

2. GeoLocation API

In this video, you will learn about the GeoLocation API. We will see how to retrieve a user's location data and how to use it in our application.

3. Show Location on a Map

In this video, you will learn how to show the location data on a map using the Google Maps API. You will also learn how to customize the map according to your needs.

4. Canvas Element and API

In this video, you will learn about the Canvas element and the Canvas API. You will learn how to create shapes, draw paths, and add text to the canvas.

5. requestAnimationFrame() Method

In this video, you will learn about the requestAnimationFrame() method. We will see how to use this method to create smooth animations in our application.

6. Animated Clock - Part 1

In this video, you will learn how to create an animated clock using the Canvas API and the requestAnimationFrame() method.

7. Animated Clock - Part 2

In this video, we will continue creating the animated clock from the previous video. We will see how to add a minute hand, an hour hand, and a second hand to the clock.

8. Web Audio API

In this video, you will learn about the Web Audio API. We will see how to use this API to create audio effects in our application.

9. Music Player Project

In this video, you will learn how to create a music player using the Web Audio API. We will see how to load audio files, play and pause audio, and create audio effects.

10. Drum Machine Project

In this video, you will learn how to create a drum machine using the Web Audio API. We will see how to create different drum sounds and how to play them using a keyboard.

11. Video API

In this video, you will learn about the Video API. we will see how to load a video, play and pause it, and add video controls to it.

12. Video Player Project

In this video, you will learn how to create a video player using the Video API. We will see how to customize the video controls and add a progress bar.

13. Web Animations API - Ball Project

In this video, you will learn about the Web Animations API. We will see how to create animations using the Web Animations API and how to control them using JavaScript.

14. Speech Recognition API - Color Say Project

In this video, you will learn about the Speech Recognition API. We will see how to create a project that recognizes a user's speech and changes the background color of the page accordingly.

15. Speech Synthesis API - Text to Speech

In this video, you will learn about the Speech Synthesis API. We will see how to create a project that converts text to speech using the Speech Synthesis API.

1. Section Introduction

In this video, we will introduce the topic of Object-Oriented Programming (OOP) and explain its importance in modern web development.

2. What Is OOP?

In this video, we will define object-oriented programming and explore its fundamental concepts, including objects, classes, and inheritance.

3. Basic Principles of OOP

In this video, we will discuss the three main principles of OOP: encapsulation, inheritance, and polymorphism. We will explain what each of these principles means and how they are used in OOP.

4. More on Object Literals and this Keyword

In this video, we will review object literals and the 'this' keyword. We will discuss how the 'this' keyword refers to the current object and how we can use it to access object properties.

5. Constructor Functions

In this video, we will introduce constructor functions and explain how they are used to create objects. We will also discuss the 'new' keyword and how it is used to instantiate objects from constructor functions.

6. Literals Versus Built-In Constructors

In this video, we will discuss the difference between object literals and built-in constructor functions, such as String(), Number(), and Boolean(). We will also explain why it is generally better to use literals instead of constructors.

7. Working with Object Properties

In this video, we will explore different ways of adding and modifying object properties. We will also discuss property descriptors and how they are used to control the behavior of object properties.

8. Prototypes and the Prototype Chain

In this video, we will introduce prototypes and explain how they are used to share properties and methods between objects. We will also discuss the prototype chain and how it is used to look up properties and methods.

9. Adding Methods to the Prototype

In this video, we will demonstrate how to add methods to the prototype of an object. We will also discuss the benefits of using prototypes to share methods between objects.

10. Using Object.create()

In this video, we will explore the Object.create() method and demonstrate how it is used to create objects with a specific prototype.

11. Prototypical Inheritance and call()

In this video, we will discuss prototypical inheritance and demonstrate how to use the call() method to invoke a constructor function from another constructor function.

12. OOP Game Challenge

In this video, we will apply our knowledge of OOP to create a simple game using constructor functions and prototypes. We will demonstrate how to create game objects, add methods to their prototypes, and share properties and methods between objects.

1. Classes

In this video, you will learn about the basics of classes in JavaScript, including how to create classes, instantiate objects from classes, and use constructors to pass arguments to class methods.

2. Class Inheritance

In this video, you will learn about class inheritance in JavaScript, including how to use the "extends" keyword to create subclasses, how to override superclass methods in subclasses, and how to call superclass methods from within subclass methods.

3. Static Methods

In this video, you will learn about static methods in JavaScript classes, including how to define and use them, and how they differ from instance methods.

4. bind() and Defining this

In this video, you will learn about the "bind()" method in JavaScript, including how to use it to set the "this" keyword in class methods and how to define the "this" keyword explicitly using arrow functions.

5. Getters and Setters with Classes

In this video, you will learn about getters and setters in JavaScript classes, including how to define them and how to use them to get and set object properties.

6. Getters and Setters with defineProperty()

In this video, you will learn about how to define getters and setters for object properties using the "Object.defineProperty()" method in JavaScript.

7. Private Property Underscore Convention

In this video, you will learn about the convention of using underscores to denote private object properties in JavaScript classes.

8. ES2022 Private Class Fields

In this video, you will learn about the new private class fields feature in ES2022, including how to define private object properties using the "#" symbol.

9. Property Flags and Descriptors

In this video, you will learn about the different property flags and descriptors in JavaScript, including how to use the "Object.getOwnPropertyDescriptors()" method to inspect object properties.

10. Sealing and Freezing Objects

In this video, you will learn about how to use the "Object.seal()" and "Object.freeze()" methods to make objects read-only and prevent changes to their properties.

1. Project Introduction

This video provides an introduction to the Tracalorie App project, which is a meal and workout tracker built using object-oriented programming principles. The video outlines the purpose and goals of the project and provides an overview of what will be covered in the subsequent videos.

2. UI Theme Setup

This video focuses on setting up the user interface (UI) theme for the Tracalorie App project. The video covers how to create and implement a basic UI theme using CSS variables and demonstrates how to switch between light and dark themes using JavaScript.

3. Project Planning and Diagram

This video covers the project planning and diagramming phase of the Tracalorie App project. The video outlines the different components of the app and how they relate to each other and provides a visual diagram to help visualize the structure of the app.

4. Base Tracker, Meal, and Workout Class

This video introduces the concept of classes and demonstrates how to create base classes for the Tracalorie App project. The video covers the creation of the BaseTracker, Meal, and Workout classes and how to implement properties and methods for each class.

5. Display Tracker Stats

This video demonstrates how to display tracker stats in the Tracalorie App project. The video covers how to calculate and display total calories, total meals, and total workouts using the BaseTracker class and JavaScript DOM manipulation.

6. Progress Bar and Calorie Alert

This video focuses on adding a progress bar and calorie alert to the Tracalorie App project. The video covers how to create and update a progress bar based on the total number of calories consumed and how to display a calorie alert when the user exceeds their daily calorie limit.

7. App Class, New Meal, and Workout

This video covers the implementation of the App class for the Tracalorie App project. The video demonstrates how to create a new instance of the App class and how to add new Meal and Workout objects to the tracker using a form and event listeners.

8. Refactor to Single _newItem Method

This video focuses on refactoring the Tracalorie App project to use a single _newItem method for creating new meal and workout objects. The video covers how to use JavaScript classes and the 'this' keyword to create a more efficient and organized code structure.

9. Display New Meal and Workout

This video demonstrates how to display new meal and workout objects in the Tracalorie app project. The video covers how to create and update HTML templates for displaying the new items and how to use JavaScript DOM manipulation to display the new items in the app.

10. Remove Meal and Workout

In this video, you will learn how to remove meals and workouts from the Tracalorie app. We will add an event listener to each of the meal and workout items, which calls a removeItem method that removes the corresponding item from the UI and the data object. We will also update the total calories and progress bar after an item is removed.

11. Filter and Reset

In this video, we will implement a filter functionality for the meals and workouts in the Tracalorie app. We will add an input field that filters the items based on their name and update the UI accordingly. We will also add a reset button that clears the filter and displays all the items again.

12. Set Calorie Limit

In this video, we will add the ability to set a calorie limit in the Tracalorie app. We will also add an input field that allows the user to set the limit and update the progress bar and calorie alert accordingly. We will persist the calorie limit to local storage so that it is remembered even after the user closes the app.

13. Storage Class and Calorie Limit Persist

In this video, we will create a Storage class that handles all the interactions with local storage in the Tracalorie app. We will move all the local storage-related code from the App class to the Storage class. We will also update the code to persist the calorie limit to local storage using the Storage class.

14. Persist Total Calories to Local Storage

In this video, we update the Tracalorie app to persist the total calories to local storage. We will use the Storage class to save and retrieve the total calories from local storage so that it is remembered even after the user closes the app.

15. Save Meals to Local Storage

In this video, we will update the Tracalorie app to save the meals to local storage. We will use the Storage class to save and retrieve the meals from local storage so that they are remembered even after the user closes the app.

16. Save Workouts to Local Storage

In this video, we will update the Tracalorie app to save the workouts to local storage. We will use the Storage class to save and retrieve the workouts from local storage so that they are remembered even after the user closes the app.

17. Remove Meals and Workouts from Local Storage

In this video, we will update the Tracalorie app to remove meals and workouts from local storage when they are removed from the app. We will use the Storage class to remove the corresponding item from local storage so that it is not persisted after it is removed from the app.

18. Clear Storage Items

In this video, we will update the Tracalorie app to clear all the items from local storage. We will add a clear button that calls a method in the Storage class to clear all the items from local storage. This is useful when the user wants to start fresh with an empty Tracalorie app.

1. Project Introduction

In this section, you will learn about modules and tooling. We will understand the basics of using Node.js and NPM packages. You will learn about different module formats, such as CommonJS and ES Modules, and how to use them in our code. You will also learn about module bundlers, such as Webpack, and how to use them to bundle our code for production.

2. What Are Modules?

This video provides an overview of modules and why they are important in modern web development. It explains how modules help organize code and make it easier to maintain and reuse. The video also discusses the benefits of using modules, such as better encapsulation and reduced coupling.

3. Installing and Using Node.js

This video covers how to install and use Node.js, a JavaScript runtime environment that allows us to run JavaScript code outside of the browser. The video explains how to install Node.js on different operating systems and shows how to use the Node.js command-line interface to run JavaScript code.

4. CommonJS Modules

This video explains the CommonJS module format, which is a module format used in Node.js. The video covers how to create modules using the CommonJS format, how to export and import modules, and how to use modules in our code.

5. NPM Packages/Modules

This video covers NPM packages/modules, which are reusable code modules that can be installed and used in our projects. The video explains how to search for and install NPM packages, how to use NPM to manage project dependencies, and how to create and publish our own NPM packages.

6. ES Modules

This video covers ES Modules, which is a module format introduced in ES6 (ECMAScript 2015). The video explains how to create and use ES Modules in our code, how to export and import modules using the ES6 syntax, and how to use ES Modules in the browser.

7. Module Bundlers

This video explains what module bundlers are and why we need them. It covers how module bundlers work, how they help to optimize our code for production, and the benefits of using a module bundler such as Webpack.

8. Webpack Basic Setup

This video covers how to set up Webpack, a popular module bundler, for a basic project. The video explains how to install and configure Webpack, how to create a simple configuration file, and how to use Webpack to bundle our code.

9. CSS and Style Loaders

In this video, we will explore how to use CSS and style loaders in Webpack. We will look at the different types of style loaders available and how to configure them in our Webpack configuration file.

10. HTML Webpack Plugin

In this video, you will learn how to use the HTML Webpack plugin to generate an HTML file that includes our bundled JavaScript and CSS files. We will explore how to configure the plugin and how to add dynamic content to the generated HTML file.

11. Webpack DevServer Plugin

In this video, we will explore the Webpack DevServer plugin, which allows us to run a local development server that automatically rebuilds our project whenever we make changes. You will learn how to set up the DevServer plugin and how to use it to speed up your development process.

12. Babel Setup

In this video, we will look at how to configure Babel in Webpack to transpile our modern JavaScript code to be compatible with older browsers. You will learn how to install Babel and configure it to work with our Webpack setup.

13. CSS Minify Extract Plugin

In this video, we will explore the CSS Minify Extract plugin, which allows us to minify and extract our CSS code into a separate file. You will learn how to configure this plugin in our Webpack setup and explore how it can help optimize our website's performance.

14. Tracalorie Refactor to Use Webpack

In this video, we will refactor our Tracalorie project to use Webpack. We will explore how to configure Webpack to work with our project, including loading CSS files, transpiling our JavaScript with Babel, and optimizing our code with plugins.

15. Deploy Tracalorie to Netlify

In this video, you will learn how to deploy our Tracalorie project to Netlify, a popular platform for hosting static websites. We will explore how to set up a Netlify account, connect it to our GitHub repository, and deploy our project to the web.

1. Section Introduction

In this section, we will explore the concepts of iterators, generators, and data structures in JavaScript. These topics are essential for writing more efficient and effective code.

2. Symbols

Symbols are a new primitive type in JavaScript, introduced in ES6. In this video, you will learn what symbols are and how they can be used to create unique identifiers for objects.

3. Iterators

Iterators are objects that provide a way to iterate over collections of data. In this video, you will learn how iterators work and how to create custom iterators using the Symbol.iterator method.

4. Generators

Generators are a powerful tool for creating iterators in JavaScript. In this video, you will learn how generators work, how to define them, and how to use them to generate complex sequences of data.

5. Profile Scroller Project

In this project, we will use iterators and generators to create a profile scroller application that displays a list of profiles and allows the user to scroll through them.

6. Sets

Sets are a new data structure introduced in ES6 that allow us to store unique values. In this video, you will learn how sets work, how to create them, and how to perform basic set operations.

7. Maps

Maps are another new data structure introduced in ES6 that allow us to store key-value pairs. In this video, you will learn how maps work, how to create them, and how to perform basic map operations.

8. Poll Project

In this project, we will use sets and maps to create a poll application that allows users to vote on different options and displays the results in real-time.

9. Stacks

Stacks are a data structure that allows us to store and retrieve data in a last-in, first-out (LIFO) manner. In this video, you will learn how stacks work and how to create them.

10. Queues

Queues are a data structure that allows us to store and retrieve data in a first-in, first-out (FIFO) manner. In this video, you will learn how queues work and how to create them.

11. Linked Lists

Linked lists are a data structure that allows us to store data in a sequence of nodes. In this video, you will learn how linked lists work, how to create them, and how to perform basic operations on them.

1. Introduction and What Are Algorithms?

In this video, we will introduce the concept of algorithms and why they are important in programming. We will discuss what an algorithm is, the different types of algorithms, and why it's crucial to have good algorithms in software development.

2. What Is Unit Testing?

In this video, we will explain what unit testing is and why it's important. We will talk about the benefits of unit testing, the difference between unit testing and other types of testing, and the principles of good unit testing.

3. Getting Started with Jest

In this video, we will get started with Jest, a popular testing framework for JavaScript. We will install Jest, set up a basic test suite, and write our first test.

4. Grouping Tests Together

In this video, you will learn how to group tests together using Jest. We will organize our tests into test suites and describe blocks, making our test code more readable and easier to maintain.

5. Reverse String Algorithm

In this video, we will write a unit test for a simple string reversal algorithm. We will use Jest to test our algorithm and make sure it works correctly.

6. Palindrome Algorithm

In this video, we will write a unit test for a palindrome checking algorithm. We will use Jest to test our algorithm and ensure that it correctly identifies palindromes.

7. Array Chunking

In this video, we will write a unit test for an array chunking algorithm. We will use Jest to test our algorithm and ensure that it correctly splits an array into smaller chunks.

8. Anagram Algorithm

In this video, we will write a unit test for an anagram checking algorithm. We will use Jest to test our algorithm and ensure that it correctly identifies anagrams.

9. Get Elements by Tag - jsdom

In this video, we will write a unit test for a function that gets all elements with a particular tag name in a web page. We will use jsdom, a JavaScript implementation of the DOM, to simulate a web page and test our function.

10. Has Duplicate IDs - jsdom

In this video, we will write a unit test for a function that checks whether a webpage has any duplicate IDs. We will use jsdom to simulate a webpage and test our function.

1. Section Intro

In this bonus module, we will explore the Node.js modules that allow us to perform various tasks in our Node.js applications. We will cover the different modules available in Node.js and how to use them effectively to build robust and scalable applications.

2. fs (filesystem) Module

The filesystem (fs) module is one of the most commonly used modules in Node.js. In this video, we will explore the various methods available in the fs module and how to use them to read, write, and manipulate files and directories.

3. path Module

The path module provides methods for working with file paths and directories. In this video, we will explore the different methods available in the path module and how to use them to manipulate file paths in our Node.js applications.

4. os Module

The os module provides methods for working with the operating system. In this video, we will explore the different methods available in the os module and how to use them to retrieve information about the operating system and the computer running our Node.js application.

5. url and querystring Modules

The url and querystring modules provide methods for working with URLs and query strings. In this video, we will explore the different methods available in these modules and how to use them to parse and manipulate URLs and query strings in our Node.js applications.

6. http Module

The http module provides a way to create HTTP servers and clients in Node.js. In this video, we will explore how to create an HTTP server using the http module and how to handle HTTP requests and responses. We will also cover how to create an HTTP client using the http module and how to make HTTP requests to other servers.

1. Section Introduction

In this section, we will work on a bonus project called RandomIdeas, which will involve building a RESTful API using Node.js, Express, and MongoDB. The project will allow users to create and store random ideas, as well as update and delete them. We will start by setting up our project and creating a basic API.

2. Express Setup and Basic API

In this video, we will set up our project using Express and create a basic API with GET and POST routes. We will also use middleware to parse incoming JSON data and handle errors.

3. Nodemon and Route Clean-Up

In this video, we will use Nodemon to automatically restart our server whenever changes are made, making development more efficient. We will also clean up our code by moving our route handlers into separate modules.

4. Handle POST Requests - Add Idea

In this video, we will handle POST requests to add a new idea to our database. We will use Mongoose to create a new idea and save it to the database, and also include validation to ensure that the required fields are present.

5. PUT and DELETE Requests - Update and Remove Ideas

In this video, we will handle PUT and DELETE requests to update and remove existing ideas from the database. We will use Mongoose to find and update or remove the idea and return an appropriate response to the client.

6. What Is MongoDB?

In this video, we will introduce MongoDB, a popular NoSQL database used in many web applications. We will discuss the differences between SQL and NoSQL databases, and the advantages of using MongoDB.

7. MongoDB Atlas Setup

In this video, we will set up a MongoDB Atlas account, which will provide us with a free cloud-based MongoDB database. We will also create a new database and user and configure our project to connect to the database.

8. Mongoose Connect and Dotenv

In this video, we will use the Mongoose library to connect to our MongoDB database. We will also use the dotenv library to manage our environment variables, such as the database connection string.

9. Mongoose Schema and Model

In this video, we will define a Mongoose schema for our ideas collection, which will specify the fields and their data types. We will also create a Mongoose model based on the schema, which will allow us to perform database queries.

10. Database Queries

In this video, we will write database queries using Mongoose to retrieve ideas from the database based on various criteria. You will also learn about the different query methods available in Mongoose, such as findOne, find, and findById.

1. Fullstack Workflow

In this video, we will go over the full-stack workflow and what we need to do in order to build a complete app with a backend and frontend.

2. Client Folder Setup

In this video, we will set up the client folder where we will build the frontend of our app.

3. Modal Component

In this video, we will create the Modal component that will be used for displaying the form to add new ideas.

4. IdeaForm Component

In this video, we will build the IdeaForm component that will handle the form to add new ideas.

5. IdeaList Component

In this video, we will create the IdeaList component that will display all the ideas.

6. API Service - Fetch Ideas

In this video, we will create an API service that will be used to fetch the ideas from the backend.

7. Create Idea through Form

In this video, we will implement the ability to create a new idea through the form and send it to the backend.

8. Save Username to Local Storage

In this video, we will save the username entered by the user to local storage.

9. Add Username Validation to Server

In this video, we will add username validation to the server to ensure that a username is provided when a new idea is created.

10. Delete Ideas

In this video, we will implement the ability to delete ideas from the list.

11. Deploying a Fullstack App

Finally, in this video, we will go over the process of deploying a full-stack application to a server.