4.03 out of 5
4.03
107 reviews on Udemy

Complete Modern JavaScript Firebase BootCamp the beginner

Master JavaScript and Firebase Firestore with Pure JavaScript!JavaScript ES6+, OOP, AJAX
Instructor:
Kim Chen
24,789 students enrolled
English [Auto]
Go from a total beginner to an advanced JavaScript developer
Asynchronous JavaScript: The event loop, promises, async/await, AJAX and APIs
OOP including ES5 prototypes & ES6 classes
ES6 features like arrow functions, classes, default and rest parameters, etc.

This is a JavaScript course for everybody.

JavaScript is everywhere

JavaScript is the most popular programming language out there, you need to know JavaScript no matter you are a frontend developer or backend developer.  YouTube tutorials are usually talking about a JavaScript features without showing how to use them.

Complete Modern JavaScript BootCamp from the beginning starts from scratch and builds up your knowledge of the JavaScript language. Yes, you’ll learn all the features of the language, but you’ll also learn how to use those features together to create a complete application.

Firestore -Real time database

Besides JavaScript, we will also learn to build web with Firebase. Cloud Firestore is also a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform.

Fundamentals

1
VsCode setup and file setup
2
Console
3
Variables

In this JavaScript lecture I will teach you about JavaScript variables.

4
let and const

In this video I cover two ways of creating a variable in JavaScript, let and const.

5
Data types
6
Primitive vs reference
7
Convert to string

JavaScript provides various ways to convert a other data types into a string. In this lecture, we will demonstrate how.

8
Convert to number

JavaScript provides various ways to convert a other data types into a number. In this lecture, we will demonstrate how.

9
Numbers and math model
10
String methods and concat

JavaScript automatically converts primitives to String objects, so that it's possible to use String object methods for primitive

11
Other string methods

In this part, we continue to talk about the string methods other than the previous lecture

12
Template literal

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. In this part, we will demonstrate how convenient it is compare with ancient ways

13
Arrays

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. In this lecture, we will talk about how to create a JavaScript and also its properties

14
Array methods

Many amazing JavaScript array methods available to us. In this lecture, we will learn some of the array methods

15
Object literals

In this lecture , we will talk about how to define (and create) a JavaScript object with an object literal, also how to access its properties.

16
Date objects

JavaScript Date objects represent a single moment in time in a platform-independent format. In this lecture, I will also teach methods of date objects

17
IF statement

The if/else statement executes a block of code if a specified condition is true. In this lecture, we will talk about this

18
Logical operator

Comparison operators are used in logical statements to determine equality or difference between variables or values. In this part, we will talk about this.

19
Switch case

In this lecture we will talk about JavaScript switch statement  to perform different actions based on different conditions. We will talk about switch case for string, date and also range of numbers

20
Function declaration

The function declaration (function statement) defines a function with the specified parameters. In this lecture, we will talk more about functions

21
IIFE (Immediately Invoked Function Expression)
22
General loop
23
Loop through array
24
Window object methods
25
Window object properties

DOM manipulation

1
Document Object Properties and Methods

The HTML DOM document object is the owner of all other objects in your web page. We will talk about the properties and methods can be used on HTML documents

2
Document Object Properties and Methods2

In this lecture, we will talk about document classList, classNames, DOM Token List and also scripts

3
Get element by ID

In this lecture, we will talk about using document.getElementById to get the single element. Then we use it to change the style and the text.

4
querySelector

In this lecture, we are going to use the querySelector to select single element to do manipulation

5
Child nodes

In this part, we will talk about the javascript child nodes. By using this , we are going to add the custom id to the element.

6
Child, Parent and Siblings

In JavaScript, we can select different elements or nodes , like their children, parent and siblings

7
Create element

In this part, we are going to create new list by using Javascript createElement method

8
Replace element

In this part, we are going to use Javascript replaceChild to replace the old element with new element

9
Event listener and event object

In JavaScript, we can add event listener to the element. We can also check the element object by using event.target. Use clientX clientY, offsetX and offsetY to check the coordinates.

10
Mouse Event: mouseover, mouseout, mouseleave, mouseenter

Javascript has mouse event, in this lecture, we will talk about the difference between mouseover, mouseenter, mouseleave and mouseout

11
Mouse Event: click, dblclick, mousedown, mouseup, mousemove

Javascript has another set of mouse event, in this lecture, we will talk about the click, dblclick, mousedown, mouseup, mousemove

12
Keyboard Event: keypress, keyup, keydown

In this lecture, we will talk about JavaScript keyboard events like keypress, keydown and keyup differences

13
Keyboard Event: cut, copy, paste, input, focus, blur

In this lecture, we will talk about JavaScript keyboard events like cut, copy, paste, input, focus, blur

14
Onchange event and submit event

In this lecture, we will talk about JavaScript other events like onchange and submit

15
Event bubbling and event stop propagation

In this lecture, we will introduce the event bubbling and event stop propagation

16
Event delegation
17
LocalStorage and SessionStorage

In JavaScript, there are localStorage and sessionStorage, in this lecture, we will talk about what is the difference between these two, how to store and get the items from these storages

18
JSON stringify and JSON parse

In this lecture, we will talk about how to stringify a JSON array and parse the string back to JSON array.

19
querySelector and querySelectorAll vs getElementsByClassName and getElementById

Object Oriented Programming

1
Constructor and this

In this lecture we will look at the constructor function and "this" keyword in JavaScript

2
Add function to the constructor

In this lecture, we will add a function to the constructor to calculate the age

3
Built in constructor and typeof variable

In JavaScript, actually there are some built in constructors. In this lecture, we will discuss these and also the difference between the  == and ===

4
Other built in constructors

In this lecture, we will demonstrate other JavaScript constructors

5
Why we need to use prototype?

In this lecture, we will talk about why we need to use JavaScript prototype instead of just adding the function directly inside  the constructor.

6
Other prototypes

Here we will show the use of hasOwnProperty of JavaScript

7
Inheritance
8
Object create

In this lecture, we demonstrate the use of Object.create to create an object

9
es6 classes

es6 classes formalise the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes.

10
es6 subclass

ES6 allows for inheritance, where one class uses another as a base, and then extends it by adding more features of its own. In this lecture, you will learn inherit properties by using subclasses

XHR, Ajax and fetch API

1
xhr object

In this lecture, we will talk about how to use the xhr object to get the data from a text file.

2
xhr different readystate

The XMLHttpRequest.readyState property returns the state an XMLHttpRequest client is in. An XHR client exists in different states and we will discuss in this lecture

3
xhr get json object

In this lecture, we will use the xhr to get the json object

4
xhr get json array

In this part, we will use xhr to get json array

5
xhr get remote data

In this part, we will use the xhr to get the remote data

6
synchronous and asynchronous by using callback

In this part, we will learn how to create asychronous function by adding a callback function. But first, we will demonstrate the problem of synchronous function

7
Custom http library

In this part, we will create our own http library to fetch the data

8
Modify the http library

In this part, we will modify the http library such that it can pop up an error when there is error occur

9
Create the post, put and delete request

In this part , we continue to create the post, put and delete request

10
es6 promises

In this part, we will convert the previous project from using callback function to using JavaScript es6 promises

11
fetch api to fetct text file

The Fetch API provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set. In this part, we will demonstrate how to fetch the text file

12
fetch api to fetch json

The Fetch API provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set. In this part, we will demonstrate how to fetch the json file

13
fetch remote api

The Fetch API provides an interface for fetching resources (including across the network). The new API provides a more powerful and flexible feature set. In this part, we will demonstrate how to fetch the remote data

14
arrow function

Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax

15
convert to arrow function

In the previous lecture, we already introduce the arrow function, so now we convert the old project by using arrow functions

16
Custom http with fetch api

This part we will use fetch api to create the custom http library

17
Async await

In this part we will talk about async await. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

18
Custom http with async await

In this part, we will apply the async await that we just learnt to modify the http library.

Error handling and regular expression

1
Try catch block

Error handling in JavaScript uses the keywords: try, catch, finally, and throw. In this part, we will focus on try and catch


2
Different types of errors

Error handling in JavaScript uses the keywords: try, catch, finally, and throw. In this part, we will focus on finally and throw. In addition, we will talk about different types of errors.

3
Regular expression
4
Regular expression (character selector)
5
Regular expression (symbol)

[Project] Regular Expression form

1
Create UI

In this project, we will apply the JavaScript regular expression that we just learnt. First, we need to create the form with the use of Bootstrap.

2
Validate first name, last name and email
3
Validate phone number and zip code

es6

1
Iterator & Generator

While custom iterators are a useful tool, their creation requires careful programming due to the need to explicitly maintain their internal state. Generator functions provide a powerful alternative. In this lecture, we will talk about both

2
User scroll with iterator
3
Symbol

Symbol is a primitive data type of JavaScript which is newly introduced in es6

4
Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

5
Map

The Map object holds key-value pairs and remembers the original insertion order of the keys. Let's explore how we can work around them.

6
Loop through map

We can also loop through the map object directly or  convert the map object into an array. Let's explore how we can do it.

7
Set

Set objects are collections of values. You can iterate through the elements of a set in insertion order. Let's explore it in this lecture.

8
Iterating Sets

Design Pattern

1
A good website about design pattern
2
Module & Reveal Module Pattern

In this lecture , we will implement our own JavaScript module pattern using an IIFE.

3
Singleton

Singleton pattern is a software design pattern that restricts the instantiation of a class to one "single" instance. In this lecture , we will implement our own JavaScript singleton pattern.

4
Factory Pattern

A Factory Pattern or Factory Method Pattern says that just define an interface or abstract class for creating an object but let the subclasses decide which class to instantiate. Let's learn more about it in this lecture.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4
4 out of 5
107 Ratings

Detailed Rating

Stars 5
38
Stars 4
39
Stars 3
24
Stars 2
3
Stars 1
6
8ba76a6a422b1f51d23f6e785b4096f9
30-Day Money-Back Guarantee

Includes

6 hours on-demand video
3 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Don't Miss Any Course Join Our Telegram Channel Join Channel
+ +