Modern JavaScript For Beginners

1. Introduction

A brief outline of the course content and what you will learn from this course.

2. Let's See What JavaScript Can Do

In this video, you will learn about the capabilities of JavaScript and why we need to use it as a programming language.

3. Download Starter Files

The author demonstrates how to download and set up the starter files to help complete the course with projects and samples.

1. Where to Add JavaScript

This video demonstrates the setup of JavaScript before we begin working on the course and outlays the capabilities of JavaScript in brief.

2. Async and Defer

In this video, we will briefly look at programming with Async and defer.

3. Working with Strings

Here, we will understand the concept of working with strings and manipulating variables.

4. Storing Data with Variables

In this lesson, we will look at storing data with variables.

5. Mixing Strings with Variables

After working with strings, you will learn about storing strings and data into containers called variables.

6. Datatypes: Numbers

This video introduces the different kinds of datatypes and focuses on the number datatypes.

7. Datatypes: Boolean, Null, and Undefined

In this lecture, we will explore the primitive values of JavaScript; namely, Boolean, the null value, and the undefined values.

8. Comments: Semicolons and ASI

Here, we will understand how to place comments in JavaScript, how the codes are executed from top to bottom, and the various separators and code executors.

9. Operators: Assignment and Comparison

In this lesson, you will learn how to use operators =, +=, *=, and /= assigned to constants to derive new values.

10. Operators: Logical and Arithmetic

This video will teach us to apply arithmetic and logical operators such as 6, -, /, *, + +, - -, and %.

11. Introduction to Arrays and Object Types

Here, we will explore the different kinds of object types and also get introduced to the concept of arrays.

12. Introduction to Objects

We will look at an object in detail, what values it can contain, and the size of an object in terms of values. You will also learn to create an object.

13. Introduction to Functions

A task or a set of tasks grouped together is called a function. We will create our functions and understand how they work.

1. The Array Constructor

We will create an array, assign random values in a list inside the array, and access them using the index code.

2. Introduction to Properties, Methods, and the Prototype

Here, we will look at the properties of an array; we will create multiple kinds of arrays and understand the different methods to access data in an array.

3. Modifying Arrays

We will look at the different characteristics of an array, such as array form, iteration, and loop. We will modify the arrays created to share additional features or set rules.

4. Returning New Values

In the previous video, you learned about modifying arrays; here, you will learn about creating different values in the arrays while keeping the original array intact.

5. Iteration Methods

We will look at methods that will loop over the items of an array and then run functions for each.

6. Reducers

Here, you will learn techniques to reduce an array to one single value using the reduce method.

7. Map and forEach

We will look at two more array methods, Map and forEach, which are iterations that loop over each array item and call back functions.

8. Array Destructing

In this video, we will look at destructing arrays and storing their values into variables.

9. Operators: Unique Values with Set

You will learn about creating a set that stores both primitive and object-type data of an array.

10. Two-Dimensional Arrays

We will create two-dimensional arrays and learn to populate and manipulate the data/values in these two-dimensional arrays.

1. The Global Object and Built-In Functions

Here, we look at the flexibility of JavaScript with built-in functions and create our functions or access the built-in ones provided with the language.

2. Function Expressions

You will learn about the slightly modified way of writing functions: function expressions.

3. Immediately Invoked Function Expressions

After learning how to create an expression, we will look at how to invoke an expression immediately.

4. Anonymous or Named

Here, we will look at the benefits of using an anonymous or nameless function or expression versus a named function.

5. A Function or Method

We understand the fundamental difference between a method and a function and the benefits of using either.

6. Arrow Functions

Learn about the shorter way to write functions, called the arrow functions that were added to the functions, and understand the difference from regular functions.

7. Default Parameter Values and Using Rest

This video focuses on all the functional parameters, which are value placeholders.

1. What Is the DOM?

This video explains the document object model concept and how to use it in our code.

2. Selecting Elements

We understand an element, the types of elements in the DOM, and how to use the elements in the DOM interface.

3. Changing Values and Attributes

After learning about elements, you will learn how to change an element's values and attributes.

4. Changing an Element's CSS

We will look at changing the styles of the elements or their attributes.

5. Creating New Elements

Instead of using the built-in elements, we will look at creating our elements.

6. Adding Elements to the Page

This is a continuation of the previous video, where you learned how to create elements; now, we will look at adding the elements we made to the page.

7. Cloning and Removing Elements

You will learn to clone and delete elements that we created.

8. Mini Challenge: Create a New Section

We will work on a mini challenge to create a new section.

9. Looping with DOM Elements

After adding sections to our objects, we will look at learning to use a loop to reduce the code for manipulating the objects.

10. Introduction to Events

From this video, we will focus more on events, what they are, and how they are created and used in our code.

11. Listening to Events

We will look at how to listen to the events after understanding what events are and how to create them.

12. Listening to Multiple Events and Event Data

In the previous video, we listened to one event or element; here, we will look at multiple events.

13. Event Propagation

We will add an event listener to our project called Event Propagation.

14. Running Events Once

In this video, we will look at running an event a single time.

15. Preventing Default Behavior and the Passive Option

After triggering an event in the browser, you will learn how to prevent the default behavior and the passive option.

16. Removing Event Listeners

You will learn how to add the "once" option to our listeners and how to remove event listeners manually.

17. HTML Collection or NodeList?

You will learn the fundamental difference between an HTMP collection and a NodeList.

18. Mini Challenge: Create a Dark Mode button

We will work on a mini-challenge, "Create a dark mode button".

1. Video Player Project: Creating the UI

In this video, you will learn to create our video player and create the user interface.

2. Events, Properties, and Methods

Here, we will look at the properties and methods used to create the events of our video player UI.

3. Shape-Drop Game - Creating the UI

We will create a fun game called the shape-drop game, and you will learn to make the user interface for the game.

4. Shape-Drop Game - Drag and Drop Events

You will learn to create drag-and-drop events and make the elements draggable.

5. Shape-Drop Game - Handling the Score and End of Game

With this video, let's learn how to prepare and handle the scoring system and game end.

1. For Loops

In this video, you will learn about the different types of loops and focus on the "for" loop and look at a basic for loop.

2. For-in and For-of Loops

You will learn about two more types of loops, the "for-in" loop and the "for-of" loop, and understand the critical differences.

3. While Loops

Here, we will look at a similar loop called the while loop, a conditional loop based on a statement, and understand the fundamental similarities between the "if" statements and the "for" loop.

4. if/else Statements

In this lesson, you will learn about a conditional statement called the if/else statement.

5. else/if Statements

After learning about the if/else statement, we will look at the else/if conditional statement.

6. The Switch Statement

earn the Switch statement, which provides as many outcomes as possible based on a single conditional statement.

7. The Conditional Operator (Ternary)

Here, you will learn about the single-line operative called the ternary or conditional operator.

8. Type Coercion and Conversion

We will discuss object type coercion and conversion to other datatypes.

9. Truthy and Falsey

Here, we will look at how JavaScript does actions using true or false statements.

10. Optional Chaining.

In this lesson, we will look at gaining access to certain kinds of promises and objects nested inside objects.

1. Creating and Modifying New Objects

You will learn about objects, their properties, and how to create and modify them.

2. Object Constructor Functions

Let's look into an object constructor function and how to create new objects with two different methods of creating variables.

3. Object Prototypes

In this lecture, we will see object prototypes in detail and in action with our project.

4. Inheriting Object Properties

Let's learn about inheriting properties of parent objects into newly created objects.

5. Copying Object Properties

Here, you will learn how to copy the object properties from one promise to another.

6. CSS Style Objects

Let's see how to add CSS styling to the elements we created in the DOM in the earlier lesson.

7. Looping with Objects

You will learn how to loop objects to use variables used repeatedly in the projects to avoid rewriting long codes.

8. Dynamic Objects

In this lesson, we will understand what dynamic objects are, how to create them, and how to use them to manipulate data types and variables.

9. Primitive and Reference Types

We will look at the primitive datatypes such as strings, Booleans, symbols, bigint, undefined, number, and null.

10. Comparing Objects

We will now compare and understand the behavior of objects.

1. Speedy Chef Project Introduction

We will begin to work on the Speedy Chef project using all the features learned so far.

2. Listing Orders

In this lesson, we will look at the listing and display all orders through the main browser after looping all the variables.

3. Listing Orders Refractor

You will learn about restructuring our code for the listing order to work correctly.

4. Element Helper Function

Let's learn how to save on much code and look at ways to outsource our functions to reusable functions.

5. Selecting the Current Order

You will learn how to create a new order and select the present orders on the Speedy Chef project.

6. Set the Current Pizza

Here, we will set the current pizza with all the options to create it.

7. Split and Join Methods

Here, you will learn how to split and join methods to divide or amalgamate an order based on preference.

8. Adding Pizzas to the Oven

The video takes us through creating the pizzas with various options and moving them from the kitchen area of the app to the oven part.

9. Starting and Ending the Game

You will learn to create functions that will start and end the game and clean up the interface to show the elements correctly.

1. Introduction to JavaScript Math

In this video, we will discuss passing an array rather than the actual value inside an object, using math to compare objects.

2. Generating New Pizzas and Orders with Math

In this video, you will learn to generate new pizzas and orders in the Speedy Chef project.

3. setInterval()

After learning how to place orders randomly, you will learn to set intervals at which the functions would operate.Video 10.4: SetTimeout()

4. SetTimeout()

We will look at another function that triangulates between each call: the setTimeout() function.

5. Clearing Timers

The setInterval and setTimeout functions have clearInterval and clearTimeout functions, and you will learn how to clear the timers for both functions when we do not need them.

6. Introduction to JavaScript Date

You will learn about the built-in objects in JavaScript that can help us introduce dates, called the date function.

7. Setting the Cooking Time with Date

We will set up the cooking time of the pizzas in the Speedy Chef game with the JavaScript date function.

1. Introduction to the Canvas and Coordinates

This video covers the canvas basics and how to draw the pizzas for the Speedy Chef project.

2. Setting Up the ingredients

In this video, we will look at populating the ingredients array and drawing the ingredients on the canvas.

3. Drawing Circular Ingredients

Here, we will use the Switch statement and handle which ingredients have been switched in the Speedy Chef project.

4. Drawing Multiple Pieces

You will learn to use arrays to define the multiple pieces of the ingredients on the pizza (the canvas drawing).

5. Clearing the Canvas

In this lesson, you will learn how to clear the canvas and be able to draw the next object on the canvas.

1. Wasting Pizzas

In this video, we will look at all the checks we need to complete in the Speedy Chef project before adding the pizzas to the oven, and if the pizza is wrong, it will be wasted.

2. Checking Steps

This lecture demonstrates how to take steps to correct the waste pizzas in the previous video by adding the right ingredients to the pizzas in the Speedy Chef project.

3. Completing Orders

Once the correct ingredients are checked, you will learn how to complete an order and move on to the following order.

4. Removing Orders from the Array

Here, we will remove the completed orders from the list to allow new orders to be placed.

5. Updating the UI and Stats

We will look at creating a stats section at the end of the Speedy Chef project and how to update the user interface.

1. Introduction to Scope

This lecture introduces the concept of a scope, how it behaves differently from a group, and what has access to the variables in a group.

2. Nesting Scope

Here, you will learn about nesting statements inside other scopes and how access is passed down to each level.

3. Block and Function Scope

We will look at how functions behave differently to a block and learn about the function scope.

4. Hoisting

This is a revisit of the brief hoisting lecture from earlier. You will learn to set functions in two or more different styles and function expressions.

5. Temporal Dead Zone

The temporal dead zone is a difficult concept that is explained in detail.

6. Closures

Here, we compare standalone and nested functions, and you will learn to create a simple function to demonstrate the effect of closure.

1. A Little Bit of Background

In this lesson, we discuss callbacks, synchronous and asynchronous. This video explains these terms and what exactly each term does.

2. Callbacks

This video introduces us to callback functions, a function that is the next step after a function has been completed.

3. Promises

You will learn how a promise handles the outcome of a function, irrespective of the time taken to complete the function.

4. The Promise Constructor

In this lecture, you will learn how to create or construct the promise to handle exceptions for the functions.

5. Handling Multiple Promises

We will understand how multiple functions running simultaneously are handled by the API such that it waits for one to complete before moving to the next.

6. Async/Await

We will briefly look into the asynchronous code, basically promises that run behind the scenes and are easier to read for developers.

7. Handling Multiple Awaits

We will look at the multiple await responses defined with promises that run in a particular sequence in the function.

8. Error Handling

This video is going to demonstrate ways to handle the errors in the promises code.

1. Leaving So Soon Project

This is the first project of the final section, which is an exit-intent popup to grab user attention.

2. Image Carousel: Setting the Images

In the next project, we will build an image carousel, which will combine all the skills learned through the course.

3. Image Carousel: Creating the Arrows

You will learn to make improvements to the image carousel in this video. We will also display the left and right arrows to move images.

4. Image Carousel: Reordering the Images

We will create new arrays by rearranging the order of all the images in the carousel using the left and right arrows that we created in the previous lesson.