JavaScript Zero to Expert Complete 2020 Guide + 50 Projects

JavaScript Zero to Expert Complete 2020 Guide + 50 Projects

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 63.5 Hours | 26.8 GB


Master Modern JavaScript by Building 50 Projects: Web Dev, Object Oriented & Asynchronous Programming, Game & AI Dev

Welcome to the most comprehensive JavaScript course EVER. This course offers a fresh perspective on one of the most popular programming languages of all time, JavaScript. In this course, I will walk you through the basics first. We will cover all the Data Structures of JavaScript in depth. Then, we will cover JavaScript Loops, Functions and the DOM. There are 100+ examples in this course and all of these examples have been strategically created to make sure you get the most out of this course.

There are 50 real world projects in this course. The projects will start from a beginner level and will go to an expert level. The first 27 projects cover beginner to intermediate skill levels and we will create amazing applications.

The Second Part of this course focuses more on the advanced part of JavaScript. Firstly, we will cover Regular Expressions and Advanced JavaScript Data Structures. Then, we will cover how JavaScript works extensively and exhaustively. I will teach you Scope, Hoisting and Closure. I will also teach you Object Oriented Programming (OOP) and Asynchronous Programming.

At this point in course, we will have 2 projects for Regular Expressions. Afterwards, we are going to create 1 large application using the OOP paradigm.

Then, we will have 8 projects for Asynchronous Programming for the Fetch API and the Async Await plus 1 project for the Web Speech API.

The Third Part of this course focuses on Game & AI development with JavaScript. I will introduce you to the HTML5 Canvas Element. I will also use OOP paradigm.

Firstly, we will create 4 projects, beginner to intermediate level, to master collision detection + OOP in game development.

Finally, we will create 7 games and we will code 3 complete AI Algorithms throughout these 7 projects.

So, without further ado, let’s dive into this course and master JavaScript once and for all.

What you’ll learn

  • You will learn JavaScript from scratch
  • You will master all the new features of JavaScript
  • You will master JavaScript Array Literal Data Structure
  • You will master JavaScript Object Literal Data Structure
  • You will master JavaScript Loops
  • You will master JavaScript Functions
  • You will master JavaScript DOM
  • You will master JavaScript Regular Expressions
  • You will master advanced JavaScript Data Structures
  • You will master JavaScript Object Oriented Programming
  • You will master JavaScript Asynchronous Programming
  • You will master Game Development with JavaScript
  • You will learn AI Algorithm Development with JavaScript


+ Table of Contents

Course Introduction
1 Welcome Welcome Welcome
2 Basic Course Setup

JavaScript – An Introduction to the Language
3 What is JavaScript
4 The Role of JavaScript in Web Development
5 JavaScript Versions
6 Creating a JS File and Linking To HTML

JavaScript Variables – Data Types – Basic Grammar
7 Data Types in JS Part -1
8 Data Types in JS Part -2
9 Variables in JS
10 String Methods Part -1
11 String Methods Part -2

JavaScript Logic & Flow Control
12 Comparison Operators Part -1
13 Comparison Operators Part -2
14 Conditionals Part -1
15 Conditionals Part -2
16 Ternary Operator
17 Logical Operators Part -1
18 Logical Operators Part -2

JavaScript Data Structures – Arrays
19 Introduction to Arrays
20 Arrays Methods Part -1
21 Arrays Methods Part -2

JavaScript Data Structures – Objects
22 Introduction to Objects
23 Modifying-Updating Objects
24 Nesting

JavaScript Loops
25 Introduction to Loops
26 Looping Through Arrays
27 While Loops

JavaScript Functions
28 Introduction to Functions
29 More Functions
30 The Return Keyword
31 Variable Function Scope – Variable Block Scope
32 Function Expressions Part -1
33 Function Expressions Part -2
34 Higher Order Functions Part -1
35 Higher Order Functions Part -2

JavaScript – The Document Object Model (DOM)
36 Introduction to DOM
37 DOM Properties and Methods Part -1
38 DOM Properties and Methods Part -2
39 DOM Properties and Methods Part -3
40 DOM Properties and Methods Part -4
41 DOM Properties and Methods Part -5
42 DOM Properties and Methods Part -6
43 DOM Events Part -1
44 DOM Events Part -2
45 DOM Events Part -3

Project #1 – Modal
46 Project Introduction + HTML-CSS Review
47 Making the Modal Dynamic

Project #2 – Image Gallery Pop up
48 Project Introduction + HTML-CSS Review
49 Making the Gallery Dynamic Part -1
50 Making the Gallery Dynamic Part -2

Project #3 – Navbar Effect
51 Project Introduction + HTML-CSS Review
52 Making the Navbar Dynamic Part -1
53 Making the Navbar Dynamic Part -2

Project #4 – Smooth Scroll Effect
54 Project Introduction + HTML-CSS & JavaScript

Project #5 – Cursor Effect
55 Project Introduction + HTML-CSS Review
56 Making the Cursor Dynamic

Project #6 – Color Switcher
57 Project Introduction + HTML-CSS Review
58 Making the Color Switcher Dynamic

Project #7 – Custom Animated Progress Bar
59 Project Introduction + HTML-CSS and JavaScript

Project #8 – Responsive Sidebar Menu
60 Project Introduction + HTML-CSS Review
61 Making the Sidebar Menu Dynamic

Project #9 – Dark Mode Toggle
62 Project Introduction + HTML-CSS Review
63 Making the Dark Mode Toggle Dynamic

Project #10 – Gallery Carousel
64 Project Introduction + HTML-CSS Preview
65 Arranging Images Next to Each Other
66 Making the Next Button Functional
67 Making the Previous Button Functional
68 Hiding & Showing Next & Previous Buttons

Project #11 – Testimonial Slider
69 Project Introduction + HTML-CSS Preview
70 Making the Testimonial Slider Functional

Project #12 – The Keyboard App
71 Project Introduction + HTML-CSS Preview
72 Accessing Each Individual Key Clicked
73 Printing Each Individual Key Clicked to the TextArea

Project #13 – Form Input Effect
74 Project Introduction + HTML-CSS Preview
75 Creating a Dynamic Element in JavaScript

Project #14 – CSS Property Changer
76 Project Introduction + HTML-CSS Review
77 Implementing the Vertical & Horizontal Positioning
78 Implementing the Size & Shape Manipulation
79 Implementing the Background Color Manipulation

Project #15 – The Drawing App
80 Project Introduction + HTML-CSS Review
81 Drawing Lines and Circles on the Canvas Part -1
82 Drawing Lines and Circles on the Canvas Part -2
83 Drawing Lines and Circles on the Canvas Part -3
84 Making the Toolbar Functional Part -1
85 Making the Toolbar Functional Part -2

Project #16 – The Piano App
86 Project Introduction + HTML-CSS Preview
87 Creating a Note Playing Function Part -1
88 Creating a Note Playing Function Part -2
89 Implementing the Pressed Key Functionality Part -1
90 Implementing the Pressed Key Functionality Part -2

Project #17 – Memory Card Game
91 Project Introduction + HTML-CSS Review
92 Implementing the Flip Card Functionality Part -1
93 Implementing the Flip Card Functionality Part -2
94 Implementing the Flip Card Functionality Part -3
95 Refactoring The Code
96 Implementing the LockBoard Functionality
97 Resolving the Double Click Issue
98 Shuffling the Deck of Cards

Project #18 – The Password Generator App
99 Project Introduction + HTML-CSS Review
100 Synchronizing Range & Number Inputs
101 Creating the Form Submission Event Listener
102 Creating Character Codes
103 Creating the generatePassword Function
104 Creating a Random Password

Project #19 – The To Do List App
105 Project Introduction
106 HTML-CSS Review
107 Creating an addToDo Function Part -1
108 Creating an addToDo Function Part -2 – Creating a Dynamic Element
109 Creating an addToDo Function Part -3 – Inserting the Dynamic Element
110 Creating Event Listeners for the Enter Key & Plus Icon
111 Targeting the Dynamically Created To Do Items
112 Removing a Bug from the UL Event Listener
113 Creating the completeToDo and removeToDo Functions
114 Implementing the Entire Local Storage Functionality

Project #20 – The Text Reader App
115 Project Introduction + HTML-CSS Review
116 Implementing the Reading Functionality
117 Implementing the Pausing Functionality
118 Implementing the Stopping and Speeding Functionalities

Project #21 – Simple Drag & Drop
119 Project Introduction + HTML-CSS Review
120 Creating the dragstart and dragend Event Listeners
121 Creating the dragover and dragenter Event Listeners
122 Creating the dragleave and drop Event Listeners

Project #22 – The Animal Trivia Quiz App
123 Project Introduction
124 HTML-CSS Review
125 Creating the Questions
126 Creating the renderQuestion Function
127 Creating the renderProgress Function
128 Creating the renderCounter Function
129 Targeting the User Clicked Answer
130 Creating the answerIsCorrect & answerIsIncorrect Functions
131 Creating the nextQuestion Function & the ScoreContainer

Project #23 – The Budget App
132 Project Introduction
133 HTML-CSS Review
134 Creating Variables & Storing HTML Elements
135 Hiding-Showing Budget Dashboard Tabs
136 Creating addExpense & addIncome Event Listeners Part -1
137 Creating addExpense & addIncome Event Listeners Part -2
138 Creating the updateUI & clearInput Functions
139 Updating the UI with the User Input
140 Creating the clearElement & showEntry Functions
141 Calling the showEntry Function
142 Creating the Chart Part -1
143 Creating the Chart Part -2
144 Storing Entries in the Local Storage + Fetching
145 Implementing the Entry Delete and Edit Functionalities Part -1
146 Implementing the Entry Delete and Edit Functionalities Part -2

Project #24 – The Temperature Converter App
147 Project Introduction + HTML-CSS Review
148 Implementing the Functionality Part -1
149 Implementing the Functionality Part -2

Project #25 – Horizontal Gallery Scroller
150 Project Introduction + HTML-CSS Review
151 Creating the mouseDown, mouseUp and mouseLeave Events
152 Scrolling the Gallery on mouseMove

Project #26 – The Video Speed Controller App
153 Project Introduction + HTML-CSS Review
154 Making the Speed Controller Functional

Project #27 – The Gallery Clicker
155 Project Introduction + HTML-CSS Review
156 Making the Gallery Clickable

JavaScript – Regular Expressions
157 Pattern Matching Part -1
158 Pattern Matching Part -2
159 Pattern Matching Part -3
160 Pattern Matching Part -4
161 Pattern Matching Part -5
162 Pattern Matching Part -6
163 Pattern Matching Part -7
164 Case 1 – Restricting Username
165 Case 2 – Password Strength
166 Capture Groups
167 The Replace Method

Advanced JavaScript – Data Structures & Functions
168 Arrow Functions
169 Array Sort Method
170 Array forEach Method
171 Array Map Method
172 Array Reduce Method
173 Array Filter Method
174 Array Find Method
175 Object Keys Method
176 Object Values Method
177 Object Entries Method

Advanced JavaScript – The Inner Workings Part -1 {Scope}
178 Lexical Scope & Compilation
179 Lexical Scope & Code Execution
180 Dynamic Global Variable & the Strict Mode
181 Nested Scope

Advanced JavaScript – The Inner Workings Part -2 {Advanced Scope}
182 Difference Between Function Expressions & Function Declarations
183 Lexical Scope Review
184 Function Scope & The IIFE Pattern
185 Block Scoping

Advanced JavaScript – The Inner Workings Part -3 {Hoisting}
186 Variable Hoisting
187 Function Hoisting
188 Temporal Dead Zone

Advanced JavaScript – The Inner Workings Part -4 {Closure}
189 Closure
190 Closing Over Variables

Advanced JavaScript – Object Oriented Programming
191 Introduction to The this Keyword
192 Implicit & Explicit Binding
193 The new Keyword
194 Default Binding
195 Arrow Functions & Lexical this
196 Resolving The this Keyword in Arrow Functions
197 ES6 class Keyword
198 The extends and super Clauses
199 Prototypes & Prototypal Class
200 The Prototype Chain
201 Dunder Proto
202 Prototypal Inheritance

Advanced JavaScript – Asynchronous Programming
203 Introduction to Asynchronous Programming
204 The Call Stack In The Browser
205 Web APIs
206 Ajax
207 Getting Data From a Text File
208 Getting Local JSON Data
209 Getting JSON Data From a URL
210 Callback Functions
211 Callback Hell
212 Promises Introduction
213 Cleaning up our Code with Promises
214 The Fetch API
215 Async Await
216 Error Handling

Project #28 – Form Input Validator – RegX
217 Project Introduction + HTML-CSS Review
218 Implementing The Validation Functionality

Project #29 – The Password Strengther App – RegX
219 Project Introduction + HTML-CSS Review
220 Creating The Password Input Event Listener
221 Creating The Character Length Assessment
222 Creating The Lowercase & Uppercase Character Assessments
223 Creating The Character Type Assessment
224 Creating The Special & Repeat Character Assessments

Project #30 – The Comic Buddy App – OOP
225 Project Introduction
226 HTML-CSS Review
227 Creating The Superhero Entry & Superhero List Classes
228 Creating The Form Submission Event Listener
229 Instantiating the Superhero Entry & Superhero List Classes
230 Creating the addSuperhero Function
231 Creating the clearSuperheroInputs Function
232 Form Inputs Validation Part -1
233 Creating Validation Error & Success Messages – Form Inputs Validation Part -2
234 Deleting Listed Superheros
235 Getting Superheroes From the Local Storage
236 Adding Superheroes to Local Storage
237 Displaying Superheroes From the Local Storage
238 Finding the Clicked Superhero
239 Creating the removeSuperhero Function

Project #31 – Random Animal Image Generator – Fetch API
240 Project Introduction
241 HTML-CSS Review
242 Getting Random Animal Images

Project #32 – City-State Finder – Fetch API + RegX
243 Project Introduction
244 HTML-CSS Review
245 Fetching the City-State JSON Data
246 Finding the Matched Words
247 Displaying Matches to The Screen

Project #33 – Jokes API – Async Await
248 Project Introduction
249 HTML-CSS Review
250 Fetching Jokes

Project #34 – Numbers API – Async Await
251 Project Introduction
252 HTML-CSS Review
253 Fetching Number Facts

Project #35 – Currency Companion – Async Await
254 Project Introduction
255 HTML-CSS Review
256 Going Over The Currency Conversion Concepts
257 Getting The Exchange Rate
258 Converting The Currency
259 Making The UI Functional
260 Simulating Errors

Project #36 – The Guardian News – Async Await
261 Project Introduction
262 HTML-CSS Review
263 Getting Set Up
264 Fetching News

Project #37 – Weather Forecast – Async Await
265 Project Introduction
266 HTML-CSS Review
267 Getting Set Up
268 Fetching Weather

Project #38 – Recipe Grabber – Async Await
269 Project Introduction
270 HTML-CSS Review
271 Getting Set Up
272 Fetching Recipes
273 Displaying Recipes

Project #39 – The Speech Transcriber – Web Speech API
274 Project Introduction
275 HTML-CSS Review
276 Transcribing The Speech

JavaScript Game Development – An Introduction to HTML5 Canvas
277 Introduction to HTML5 Canvas
278 Drawing Shapes Randomly Part 1 – Rectangles and Squares
279 Drawing Lines – Arcs – Circles
280 Drawing Shapes Randomly Part 2 – Lines, Arcs and Circles

Project #40 – Random Stars
281 Project Introduction
282 The Game Loop Introduction
283 Setting Up The Stars and The Velocity Sign
284 Creating The Vertical Velocity and Randomizing The Speed, Size and Location
285 Drawing The Stars
286 Repositioning The Stars When They Move Off The Screen

Project #41 – Move The Ball – Collision Detection Mastery Part -1
287 Project Introduction
288 HTML-CSS Review
289 Creating The Game Loop
290 Capturing The Arrow Keys Events
291 Collision Detection Part -1
292 Collision Detection Part -2

Project #42 – Bouncy Orange – Collision Detection Mastery Part -2
293 Project Introduction
294 HTML-CSS Review
295 Creating The Velocities
296 Creating The Game Loop
297 Collision Detection

Project #43 – OOP – Collision Detection Mastery Part -3
298 Project Introduction
299 HTML-CSS Review
300 Creating The Constructor
301 Creating The Balls
302 Implementing The Mouse Move Effect

Project #44 – The Pong Game vs AI – Advanced Level
303 Project Introduction
304 HTML-CSS Review
305 Drawing The Game Elements
306 Creating Properties For The Game Elements
307 Creating The Game Loop
308 Creating The Everything Manager Function
309 Detecting The Paddle Collision
310 Resetting The Ball At The Center
311 Fixing a Bug In The AI Paddle Angle

Project #45 – The Connect Four Game vs AI – OOP – Advanced Level – Responsive
312 Project Introduction
313 HTML-CSS Review
314 Setting The Dimensions
315 Creating The Cell Class
316 Implementing The Highlighting Functionality
317 Drawing The Text on The Screen
318 Checking For a Win
319 Creating The AI Algorithm
320 Fixing a Responsiveness Bug

Project #46 – The Breakout Game – OOP – Advanced Level – Responsive
321 Project Introduction
322 Setting Up The Game
323 Drawing The Walls and The Paddle
324 Moving The Paddle
325 Drawing, Moving and Bouncing The Ball
326 Implementing The Touch Functionality
327 Fixing a Responsiveness Bug
328 Creating The Bricks
329 Breaking The Bricks
330 Handling Score and Lives
331 Handling The GameOver and Speed Increment
332 Implementing The Audio Effects
333 Implementing The PowerUps Part -1
334 Implementing The PowerUps Part -2

Project #47 – The Dot Connector Game – Multiplayer – OOP – Advanced Level
335 Project Introduction
336 Setting Up The Game, Canvas and Context
337 Highlighting The Sides Part -1
338 Highlighting The Sides Part -2
339 Selecting The Highlighted Side
340 Filling The Owned Boxes
341 Drawing The Players and The Scores
342 Handling Game Over

Project #48 – The Dot Connector Game vs AI – OOP – Advanced Level
343 Project Introduction
344 Coding an AI Part 1 – Setting Up The AI Selection Options
345 Coding an AI Part 2 – Getting The Squares Coordinates
346 Coding an AI Part 3 – Getting The Neighboring Squares Coordinates

Project #49 – The Snake Game – OOP
347 Project Introduction
348 Setting Up The Game and Game Loop + Moving The Snake
349 Snack Collision Detection and Drawing The Snake Body
350 Drawing Score and Handling Game Over

Project #50 – The Tic Tac Toe Game
351 Project Introduction
352 HTML-CSS Review
353 Drawing The Board
354 Determining The Winner

Course Wrap Up
355 Congratulations