JavaScript, ES6, Babel, NPM, Webpack – an entire JavaScript ecosystem in a one JavaScript Bootcamp course!
About This Video
In Detail
This course covers everything you need to know about JavaScript to become a frontend web developer, a full-stack web developer, or a backend …
JavaScript, ES6, Babel, NPM, Webpack – an entire JavaScript ecosystem in a one JavaScript Bootcamp course!
About This Video
In Detail
This course covers everything you need to know about JavaScript to become a frontend web developer, a full-stack web developer, or a backend developer. You'll start from the very beginning and learn the fundamentals and basic concepts of JavaScript. Then you will learn new features included in ES6, ES7, and more. Also, you'll explore the Node.js environment for JavaScript code execution and you will understand the difference between a web browser and Node.js.
In separate sections, we will discuss Babel, NPM, Webpack, and MongoDB. Also, you will master the most popular JavaScript framework: React. JavaScript Bible – JavaScript and ES6 Bootcamp 2019 was designed for developers with different levels of JavaScript knowledge. If you are a beginner in JavaScript, start with the very first section called JavaScript Basics. If you have some experience with JavaScript, jump directly TO the sections where I cover ES6 topics such as REST/spread parameters, arrow functions, ES6 Classes, and more. By the end of the course, you'll have hands-on experience in developing WITH JavaScript and in front-end development.
This course covers everything you need to know about JavaScript and become either Frontend Web developer, or Full-stack Web Developer, or Backend developer.
We will start from the very beginning and you will learn the fundamentals and basic concepts of JavaScript. Then you will learn new features included in ES6, ES7, etc. Also, we will dive into the Node.js - environment for JavaScript code execution and you will understand what is the difference between Web Browser and Node.js. In separate sections, we will discuss Babel, NPM, Webpack, and MongoDB. Also, you will learn the most popular JavaScript framework - React.
JavaScript Bible was designed for developers with different levels of JavaScript knowledge. Each challenge has a task and solution in separate Git branches.
Chapter 1 : Intro
Intro 00:03:30
Course Navigation 00:00:58
Chapter 2 : EXERCISE Files and SOFTWARE Setup
INTRO - Exercise Files and Software Setup 00:00:50
VIDEO - Software Setup Overview 00:03:35
PRACTICE - WINDOWS ONLY - Install “cmder” 00:00:28
PRACTICE - Visual Studio Code Setup 00:10:34
PRACTICE - Launch Node.js and execute test JavaScript file 00:04:43
PRACTICE - Git Overview - PART 1 00:10:03
PRACTICE - Git Overview - PART 2 00:06:56
PRACTICE - Clone remote GIT repository and switch Branches 00:06:50
PRACTICE - Use SourceTree for Git repositories management 00:06:18
Chapter 3 : JAVASCRIPT BASICS - Intro
INTRO - JAVASCRIPT BASICS - Intro 00:01:03
PRACTICE - Exploring Web Sites in the Browser 00:12:56
PRACTICE - Create first HTML file and start Live Server 00:06:18
PRACTICE - Add favicon to the HTML file 00:02:16
PRACTICE - JavaScript embedded into the HTML 00:04:05
DEMO - Git branches management 00:03:47
PRACTICE - JavaScript in the separate file 00:03:04
CHALLENGE - External Scripts 00:01:18
CHALLENGE - External Scripts - SOLUTION 00:02:36
PRACTICE - JavaScript in the Console of the Browser 00:02:35
Chapter 4 : JAVASCRIPT BASICS - Types and Variables
INTRO - JAVASCRIPT BASICS - Types and Variables 00:01:05
VIDEO - Object in JavaScript 00:03:54
VIDEO - Primitive vs Reference Value Types 00:11:29
PRACTICE - Exploring Primitive Value Types 00:13:46
PRACTICE - Exploring Reference Type - Object 00:05:56
VIDEO - Variable declaration using “var”, “let” and “const” 00:09:10
PRACTICE - Variable declaration and assignment 00:13:54
CHALLENGE - Variable Declaration and Assignment 00:03:57
CHALLENGE - Variables Reusage 00:14:29
VIDEO - Statically vs Dynamically typed Languages 00:07:54
PRACTICE - Dynamic typing in JavaScript 00:09:46
Chapter 5 : JAVASCRIPT BASICS - Objects
INTRO - JAVASCRIPT BASICS - Objects 00:01:01
VIDEO - Variety of Objects in JavaScript 00:05:30
VIDEO - Objects Modification 00:11:56
PRACTICE and CHALLENGES - Objects - PART 1 00:10:29
PRACTICE and CHALLENGES - Objects - PART 2 00:10:46
PRACTICE and CHALLENGES - Objects - PART 3 00:10:39
VIDEO - Global Objects - “window” and “global” 00:09:23
VIDEO - Methods of the Object 00:02:07
Chapter 6 : JAVASCRIPT BASICS - Functions
INTRO - JAVASCRIPT BASICS - Functions 00:01:19
VIDEO - Introduction to the Functions 00:06:26
VIDEO - Syntax of the Function 00:13:34
PRACTICE - Functions - PART 1 00:12:59
PRACTICE - Functions - PART 2 00:14:04
CHALLENGES - Functions - PART 1 00:09:02
CHALLENGES - Functions - PART 2 00:09:27
VIDEO - Function Expressions vs Function Declarations 00:07:02
PRACTICE - Function Expressions, setTimout(), setInterval() 00:11:26
CHALLENGE - Function Expressions 00:01:17
✔ CHALLENGE - Function Expressions - SOLUTION 00:08:29
Chapter 7 : JAVASCRIPT BASICS - Operators
INTRO - JAVASCRIPT BASICS - Operators 00:01:20
VIDEO - Operators 00:08:45
VIDEO - Operands, Unary vs Binary Operators and Notations 00:05:11
PRACTICE - Arithmetic Operators - PART 1 00:08:48
PRACTICE - Arithmetic Operators - PART 2 00:12:11
PRACTICE - Comparison Operators - PART 1 00:10:55
PRACTICE - Comparison Operators - PART 2 00:10:48
PRACTICE - Logical Operators - PART 1 00:12:31
PRACTICE - Logical Operators - PART 2 00:10:56
PRACTICE - Operators Precedence and Associativity 00:12:11
CHALLENGES - Operators - PART 1 00:09:41
CHALLENGES - Operators - PART 2 00:11:16
Chapter 8 : JAVASCRIPT BASICS - Expressions vs Statements
INTRO - JAVASCRIPT BASICS - Expressions vs Statements 00:01:20
VIDEO - Expressions vs Statements - PART 1 00:10:42
VIDEO - Expressions vs Statements - PART 2 00:11:12
PRACTICE - Expressions vs Statements - PART 1 00:08:49
PRACTICE - Expressions vs Statements - PART 2 00:11:57
CHALLENGES - Expressions vs Statements 00:15:50
Chapter 9 : JAVASCRIPT BASICS - Scopes
INTRO - JAVASCRIPT BASICS - Scopes 00:01:49
VIDEO - Scopes - PART 1 00:09:05
VIDEO - Scopes - PART 2 00:07:51
VIDEO - Undeclared Variables and “use strict” 00:05:19
PRACTICE - Scopes - PART 1 00:12:53
PRACTICE - Scopes - PART 2 00:14:58
CHALLENGES - Scopes 00:18:10
Chapter 10 : JAVASCRIPT BASICS - Arrays
INTRO - JAVASCRIPT BASICS - Arrays 00:01:45
VIDEO - Arrays 00:13:03
VIDEO - Array Methods 00:09:05
PRACTICE - Arrays - PART 1 00:10:49
PRACTICE - Arrays - PART 2 00:12:01
CHALLENGES - Arrays 00:11:26
Chapter 11 : JAVASCRIPT BASICS - Loops and Conditional Statements
VIDEO - Introduction to the Loops 00:06:33
VIDEO - “for” Loop 00:09:57
VIDEO - “while” Loop 00:03:42
VIDEO - “do while” Loop 00:02:41
VIDEO - “for in” and “for of” Loops 00:10:38
PRACTICE Loops - PART 1 00:13:33
PRACTICE Loops - PART 2 00:12:58
PRACTICE Loops - Looking for loops in a pubic JavaScript library 00:09:55
VIDEO - Conditional Statements - if, if else and switch 00:09:07
VIDEO - Ternary Operator 00:11:32
PRACTICE - Conditional statements and ternary operator - PART 1 00:11:36
PRACTICE - Conditional statements and ternary operator - PART 2 00:11:36
CHALLENGES - Loops and Conditions - PART 1 00:12:02
CHALLENGES - Loops and Conditions - PART 2 00:13:13
CHALLENGES - Loops and Conditions - PART 3 00:12:58
CHALLENGES - “for in” and Ternary Operator 00:12:05
Chapter 12 : JAVASCRIPT BASICS - Advanced Topics
PRACTICE - Mutable vs Immutable Values 00:10:25
PRACTICE - “typeof” and “instanceof” Operators 00:15:51
PRACTICE - “new Array”, “new String” 00:13:51
PRACTICE - “new Object”, “new Function” 00:07:45
PRACTICE - Execution contexts and Execution contexts stack 00:14:07
PRACTICE - “this” 00:18:03
PRACTICE - “call”, “apply” methods of the Function 00:14:36
PRACTICE - “bind” method of the Function 00:05:52
PRACTICE - “pass by value” vs “pass by reference” 00:17:12
PRACTICE - IIFE - Immediately Invoked Function Expression 00:12:51
PRACTICE - Synchronous Code Execution 00:08:46
PRACTICE - Events and Events queue 00:04:59
PRACTICE - Callbacks - PART 1 00:11:34
PRACTICE - Callbacks - PART 2 00:13:58
PRACTICE - Closures 00:11:55
Chapter 13 : ES6 Variables Lifecycles
VIDEO - Recap of the “var” 00:07:51
VIDEO - Scopes - Global, Function and Block 00:02:26
VIDEO - let 00:10:36
VIDEO - const 00:11:53
VIDEO - Variables Usage Guidelines 00:13:05
VIDEO - Var, Let or Const? 00:16:20
CHALLENGE 1-1 - let, var and const 00:03:01
✔ CHALLENGE 1-1 - let, var and const - SOLUTION 00:10:15
CHALLENGE 1-2 - let, var and closures 00:03:19
✔ CHALLENGE 1-2 - let, var and closures - SOLUTION 00:10:56
VIDEO - JavaScript Engine Phases 00:02:12
VIDEO - Variable Lifecycle Phases 00:06:09
VIDEO - Var lifecycle 00:07:34
VIDEO - Undeclared variable lifecycle 00:06:02
VIDEO - Let lifecycle 00:08:30
VIDEO - Const lifecycle 00:05:51
VIDEO - Function lifecycle - Part 1 00:06:16
VIDEO - Function lifecycle - Part 2 00:06:03
VIDEO - What is finally hoisting? 00:01:49
DEMO - Putting different variables lifecycles together 00:04:02
✔ DEMO - Putting different variables lifecycles together - SOLUTION, Part 1 00:07:00
✔ DEMO - Putting different variables lifecycles together - SOLUTION, Part 2 00:17:26
CHALLENGE 1-3 - Variable Lifecycles 00:01:32
✔ CHALLENGE 1-3 - Variable Lifecycles - SOLUTION 00:09:42
VIDEO - Variables Phases Section Summary 00:04:47
Chapter 14 : ES6 Arrow functions
VIDEO - Introduction to the Arrow Functions Section 00:00:34
VIDEO - Traditional JavaScript Functions Overview. 00:13:12
VIDEO - Introduction to the Arrow Functions 00:02:27
VIDEO - Arrow Functions syntax 00:08:47
PRACTICE - Arrow Functions 00:12:39
VIDEO - Arrow Functions and “this”. 00:12:13
VIDEO - Regular functions instead of Arrow Functions 00:09:44
CHALLENGE 2-1 - Regular vs Arrow Functions 00:01:17
CHALLENGE 2-1 - Regular vs Arrow Functions - SOLUTION 00:11:40
VIDEO - Arguments in the Functions 00:06:23
VIDEO - Arrow Functions Summary 00:02:04
Chapter 15 : ES5.1 Array Helper Methods
VIDEO - forEach() Overview 00:03:53
PRACTICE - forEach() 00:07:11
CHALLENGE 3-1 - forEach() with Index 00:00:43
✔ CHALLENGE 3-1 - forEach() with Index - SOLUTION 00:03:33
VIDEO - map() Overview 00:02:35
PRACTICE - map() 00:12:40
CHALLENGE 3-2 - map() JSON to Object 00:00:31
✔ CHALLENGE 3-2 - map() JSON to Object - SOLUTION 00:08:18
VIDEO - filter() Overview 00:01:32
PRACTICE - filter() 00:03:15
VIDEO - find() Overview 00:01:48
PRACTICE - find() 00:02:38
CHALLENGE 3-3 - find() Single Post 00:00:57
✔ CHALLENGE 3-3 - find() Single Post - SOLUTION 00:02:14
VIDEO - every() and some() Overview 00:02:37
PRACTICE - every() and some() 00:09:29
CHALLENGE 3-4 Is Array of Numbers Sorted? 00:02:01
✔ CHALLENGE 3-4 Is Array of Numbers Sorted? - SOLUTION 00:12:39
CHALLENGE 3-5 Are Arrays Equal or not? 00:02:14
✔ CHALLENGE 3-5 Are Arrays Equal or not? - SOLUTION 00:06:51
CHALLENGE 3-6 Check if Element is in Array 00:01:11
✔ CHALLENGE 3-6 Check if Element is in Array - SOLUTION 00:02:23
VIDEO - includes() Overview 00:01:37
PRACTICE - includes() 00:04:28
CHALLENGE 3-7 Includes() with Array or Object 00:04:01
✔ CHALLENGE 3-7 Includes() with Array or Object - SOLUTION 00:10:05
CHALLENGE 3-8 Push Element to Array if Not Exists 00:02:19
✔ CHALLENGE 3-8 Push Element to Array if Not Exists - SOLUTION 00:08:55
VIDEO - reduce() Overview 00:04:04
PRACTICE - reduce() 00:16:56
CHALLENGE 3-9 Reduce Array of Objects 00:01:21
✔ CHALLENGE 3-9 Reduce Array of Objects - SOLUTION 00:04:31
CHALLENGE 3-10 Reduce Array of Objects to Object 00:01:57
✔ CHALLENGE 3-10 Reduce Array of Objects to Object - SOLUTION 00:09:03
VIDEO - Do you know how sort() works? 00:03:17
VIDEO - Sorting Algorithms Overview 00:03:42
VIDEO - Stable vs Unstable Sort 00:02:24
VIDEO - sort() Overview 00:04:52
VIDEO - sort() without Arguments 00:02:38
VIDEO - sort() Analyze sorting algorithms 00:10:22
VIDEO - sort() Algorithms in different browsers 00:12:37
CHALLENGE 3-11 sort() Array of objects 00:01:44
✔ CHALLENGE 3-11 sort() Array of objects - SOLUTION 00:06:30
CHALLENGE 3-12 sort() Long Array of objects 00:01:33
✔ CHALLENGE 3-12 sort() Long Array of objects - SOLUTION 00:14:31
VIDEO - sort() Summary 00:02:35
VIDEO - Array helper methods Summary 00:05:02
Chapter 16 : ES6 Template Literals
VIDEO - Template Literals Overview 00:11:28
VIDEO - Tagged Templates Overview 00:11:35
CHALLENGE 4-1 Template Literals 00:01:02
✔ CHALLENGE 4-1 Template Literals - SOLUTION 00:04:06
CHALLENGE 4-2 Default tagged template 00:02:19
✔ CHALLENGE 4-2 Default tagged template - SOLUTION 00:14:35
Chapter 17 : ES6 Rest/Spread Operators and Default Function Parameters
VIDEO - Rest Parameters Overview 00:04:50
PRACTICE - Rest Parameters 00:11:55
VIDEO - Spread Operator Overview 00:01:23
PRACTICE - Spread Operator 00:17:19
CHALLENGE 5-1 Rest and Spread Operators 00:03:06
✔ CHALLENGE 5-1 Rest and Spread Operators - SOLUTION 00:14:19
VIDEO - Default Function Parameters Overview 00:03:24
PRACTICE - Default Function Parameters 00:15:58
CHALLENGE 5-2 Default value without default parameters 00:01:31
✔ CHALLENGE 5-2 Default value without default parameters - SOLUTION 00:05:44
CHALLENGE 5-3 Generate Missing Unique IDs 00:03:44
✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 1 00:05:03
✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 2 00:08:02
✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 3 00:15:56
✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 4 00:11:33
Chapter 18 : ES6 Enhanced Object Literals
VIDEO - Enhanced Object Literals Overview 00:03:01
PRACTICE - Enhanced Object Literals 00:14:02
CHALLENGE 6-1 Enhanced Object Literals 00:03:51
✔ CHALLENGE 6-1 Enhanced Object Literals - SOLUTION 00:11:57
Chapter 19 : ES6 Array and Object Destructuring
VIDEO - Destructuring Overview 00:05:17
PRACTICE - Array Destructuring 00:20:14
CHALLENGE 6-2 Array Destructuring 00:00:35
✔ CHALLENGE 6-2 Array Destructuring - SOLUTION 00:01:50
CHALLENGE 6-3 Destructure Result of the Function 00:01:19
✔ CHALLENGE 6-3 Destructure Result of the Function - SOLUTION 00:09:18
PRACTICE - Object Destructuring - PART 1 00:14:42
VIDEO - New Variable Names and Default Values in Object Destructuring 00:03:51
PRACTICE - Object Destructuring - PART 2 00:09:05
CHALLENGE 6-4 Object Destructuring 00:00:50
✔ CHALLENGE 6-4 Object Destructuring - SOLUTION 00:05:50
CHALLENGE 6-5 Object Destructuring and Array Helper Methods 00:01:50
✔ CHALLENGE 6-5 Object Destructuring and Array Helper Methods - SOLUTION 00:06:22
CHALLENGE 6-6 Delete Object Properties 00:00:50
✔ CHALLENGE 6-6 Delete Object Properties - SOLUTION 00:10:45
Chapter 20 : ES6 Classes, Prototypes and Function Constructors
VIDEO - Class-based vs Prototype-based 00:03:08
VIDEO - What is inheritance? 00:04:36
VIDEO - Prototype Chain 00:05:27
VIDEO - proto and [[Prototype]] 00:05:42
VIDEO - What is Prototype? 00:05:37
VIDEO - Don’t reassign proto 00:04:43
VIDEO - Native Prototypes - PART 1 00:10:34
VIDEO - Native Prototypes - PART 2 00:08:49
VIDEO - Prototypal Inheritance in JavaScript 00:07:35
PRACTICE - Function Constructors - PART 1 00:09:08
VIDEO - Function Constructors Overview 00:04:08
PRACTICE - Function Constructors - PART 2 00:03:18
PRACTICE - Function Constructors - PART 3 00:15:01
VIDEO - Object.create() Overview 00:03:25
PRACTICE - Object.create() 00:09:42
PRACTICE - Function Constructors - PART 4 00:17:40
VIDEO - Function Constructors - New Prototype in the Chain 00:03:30
CHALLENGE 7-1 Insert Prototype into the Existing Prototype Chain 00:01:32
CHALLENGE 7-1 Insert Prototype into the Existing Prototype Chain - SOLUTION 00:07:09
VIDEO - “instanceof” and “typeof” in the Prototype Chain 00:03:52
CHALLENGE 7-2 Fix Mistakes in the Function Constructors 00:00:59
CHALLENGE 7-2 Fix Mistakes in the Function Constructors - SOLUTION 00:14:48
VIDEO - Classes - Overview 00:05:52
VIDEO - Classes vs Function Constructors 00:10:32
PRACTICE - Classes - PART 1 00:13:26
PRACTICE - Classes - PART 2 00:20:55
PRACTICE - Classes - PART 3 00:12:34
CHALLENGE 7-3 Convert Function Constructors to Classes 00:01:45
CHALLENGE 7-3 Convert Function Constructors to Classes - SOLUTION 00:12:29
CHALLENGE 7-4 Extend Array 00:04:13
CHALLENGE 7-4 Extend Array - SOLUTION 00:11:10
CHALLENGE 7-5 Custom Push Method for Arrays 00:02:34
CHALLENGE 7-5 Custom Push Method for Arrays - SOLUTION 00:13:46
VIDEO - React and ES6 Classes 00:20:44
CHALLENGE 7-6 Classes in React - Additional Button 00:01:17
CHALLENGE 7-6 Classes in React - Additional Button - SOLUTION 00:07:25
Chapter 21 : Babel Introduction
Babel Module Introduction 00:00:23
VIDEO - What is Compiler? 00:01:16
VIDEO - Compiled vs Interpreted languages 00:04:19
VIDEO - Transpiler 00:01:28
VIDEO - Transpling vs Compiling 00:02:20
VIDEO - ES5, ES6 and JavaScript 00:03:57
VIDEO - What Babel does? 00:02:21
VIDEO - Why do we need Babel? 00:07:32
VIDEO - ES6 support by Browsers 00:06:50
VIDEO - How many browsers need compiled ES5 code? 00:02:26
PRACTICE - Babel in action - ES6 Rest operator 00:04:31
PRACTICE - Compare performance - ES6 Rest Operator(Node.js) 00:05:45
PRACTICE - Compare Performance - ES6 Rest Operator (Google Chrome) 00:02:59
CHALLENGE - Compare Performance - ES6 Destructuring 00:01:50
CHALLENGE - Compare Performance - ES6 Destructurng - SOLUTION 00:06:09
VIDEO - What is User Agent? 00:04:08
VIDEO - Serve different JS files to different browers 00:00:45
VIDEO - Different JS files on the server 00:02:07
PRACTICE - Browser detection on the client 00:04:39
CHALLENGE - Detect feature support in the Browser 00:00:29
CHALLENGE - Detect feature support in the Browser - SOLUTION 00:04:19
CHALLENGE - Insert different script tags into the DOM 00:03:09
CHALLENGE - Insert different script tags into the DOM - SOLUTION 00:06:44
VIDEO - How Babel Works? 00:01:37
PRACTICE - Online Babel Compiler 00:02:09
VIDEO - Install Babel Globally 00:03:10
PRACTICE - Compile JS file using Babel 00:02:04
VIDEO - Plugins and Presets 00:06:08
Chapter 22 : NPM - Node Package Manager
VIDEO - Introduction to the NPM 00:00:48
PRACTICE - Exploring NPM packages 00:01:32
VIDEO - Package.json and init 00:03:12
VIDEO - Semantic Versioning 00:04:46
VIDEO - Packages Installation 00:02:14
PRACTICE - Install package in the project 00:04:42
CHALLENGE - Install Semver package 00:00:37
✔ CHALLENGE - Install Semver Package - SOLUTION 00:11:04
PRACTICE - Install Browserslist - package with own dependencies 00:03:22
VIDEO - Dependencies and Development Dependencies 00:02:44
PRACTICE - Examine Development Dependencies 00:06:22
PRACTICE - Browser App vs Server Package 00:04:41
CHALLENGE - Clock Browser Application 00:01:42
✔ CHALLENGE - Clock Browser Application - SOLUTION 00:12:07
VIDEO - Clock Challenge Summary 00:02:19
VIDEO - Browser App vs Public Package 00:06:51
PRACTICE - Exploring Package Information and Versions 00:02:45
PRACTICE - Installing Specific Package Version 00:03:25
VIDEO - Why package-lock.json file is needed? 00:04:29
CHALLENGE - Reinstall old package version without lock file 00:00:59
✔ CHALLENGE - Reinstall old package version without lock file - SOLUTION 00:03:07
VIDEO - How lock file is handled 00:10:55
VIDEO - Lock file summary 00:00:38
VIDEO - Update NPM packages overview 00:01:33
CHALLENGE - Update project dependencies 00:00:41
✔ CHALLENGE - Update project dependencies - SOLUTION 00:05:07
VIDEO - Introduction to the NPM scripts 00:02:50
PRACTICE - Start npm script 00:02:21
CHALLENGE - Create prestart script 00:01:28
✔ CHALLENGE - Create prestart script - SOLUTION 00:07:13
PRACTICE - Custom NPM scripts 00:02:48
CHALLENGE - Run NPM scripts simultaneously 00:01:15
✔ CHALLENGE - Run NPM scripts simultaneously - SOLUTION 00:03:26
VIDEO - NPM .bin Folder with Executable Scripts 00:04:46
PRACTICE - Explore .bin Folder on the Mac 00:02:49
PRACTICE - Explore .bin Folder on Windows 00:01:29
VIDEO - NPM Scripts Wrap-Up 00:01:18