The Modern Javascript Bootcamp Course (2021)

The Modern Javascript Bootcamp Course (2021)

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 52 Hours | 19.6 GB

The most up-to-date JS resource online! Master Javascript by building a beautiful portfolio of projects!

Always bet on Javascript!

For years, top recruiters in industry have hired fresh engineers based solely on their knowledge of Javascript. If you want to get a programming job, this is the language to learn! But learning Javascript is complicated! There’s fancy syntax, weird design patterns, and a billion resources online that might be giving you wrong – or even be out of date – information.

We built this course to solve your problems. This is the best and most up-to-date resource online for becoming a Javascript professional as quickly as possible. Every minute of this course has been created with one goal in mind: teaching you how to become a great engineer.

The Modern Javascript Bootcamp (2020) focuses on cutting through unnecessary information and giving you just the facts, plain and simple. You won’t work with outdated frameworks, learn old styles of programming, or build boring apps. Instead, you’ll only spend time writing practical code that can be used today and in the future on your own projects. You’ll learn – from very early on in the course – how to write beautiful and reusable code that you’ll be proud to show to a future employer.

Two of Udemy’s greatest instructors – Colt Steele and Stephen Grider – collaborated to create this course. Between the two of us, we have taught over one million engineers how to program. Rest assured, you will be learning from the best. We know how challenging it can be to understand a new programming from scratch, so we designed this course to offer you a step-by-step, guaranteed approach to becoming a Javascript master.

This course is divided into two parts. The first half of the course focuses on teaching you the basic syntax of Javascript. Colt will walk you through core topics effortlessly, imparting jewels of JS wisdom along the way. Included in the first half of the course are many programming exercises and small projects, so you can test your new-found knowledge out. Each of these videos can be easily referenced in the future, so you can always come back and brush up on some topic whenever needed.

The second half of the course is focused on building some amazing projects. Stephen will show you how to build some production-ready Javascript applications, including a fully-featured E-Commerce web app! These projects are all styled to be absolutely beautiful, visually stunning apps that you will be proud to feature on your own personal portfolio. The main goal of these projects is to highlight design patterns, and show you the ‘right’ and ‘wrong’ ways of writing code. By the end, you’ll be confident enough to work on your own personal projects with speed and finesse.

This is a long course, with just about every fact about Javascript you could ever hope to know. Here’s a brief subset of the topics you’ll cover:

  • Master the basics of the language, easily understanding variables, objects, arrays, and functions
  • Understand how to design the structure of the code you write, leading to beautiful and easy-to-read programs
  • Leverage Javascript’s built-in methods to increase your productivity regardless of what libraries or frameworks you use
  • Develop practical skills around higher-order functions that you will utilize for years to come
  • Observe how the Javascript and browser work together, and how to increase the performance of JS code
  • Build awesome projects to fill your personal portfolio
  • Build command line tools from scratch using Node JS
  • Fetch and manage information from third-party API’s
  • Build a fully-featured E-Commerce application from scratch – including production-grade authentication!

This is the ultimate Javascript course. There are many resources online for learning Javascript, but this is the only one that covers everything you need to know, from ‘A’ to ‘Z’, and a couple letters after that. Master the basics with Colt, then build awesome projects with Stephen. We’ve taught a million other engineers how to code, and now it is your turn!

What you’ll learn

  • Learn everything there is to know about Javascript – from scratch!
  • Build beautiful web apps to add to your portfolio
  • Get job ready with a deep understanding of the internals of JS
  • Work with Node JS and Express
  • Create a full E-Commerce app complete with authentication
  • Automate testing your code by creating your own custom testing framework!
  • Build your own physics-based JavaScript game
  • Understand how Javascript developers work on a day-to-day basis
  • Master the latest JS features like async and arrow functions
Table of Contents

1 How This Course Works
2 JS, ECMA, TC39 What Do They Mean
3 The Tools You Need
4 Customizing VSCode & Extensions
5 A Quick Note About MDN

JS Values & Variables
6 Goals & Primitives
7 Variables Quiz
8 Running Code in the JS Console
9 Introducing Numbers
10 NaN & Infinity
11 Numbers Quiz
12 Variables & Let
13 Unary Operators
14 Introducing Const
15 The Legacy of Var

How to Model Data Efficiently
16 Booleans Intro
17 The Math Object & Random Numbers
18 typeof operator
19 parseInt & parseFloat
20 Strings
21 String Indices
22 String Methods
23 More String Methods
24 Strings Quiz
25 String Escape Characters
26 String Template Literals
27 Null & Undefined

Controlling Program Logic and Flow
28 Making Decisions in JS
29 Truthy & Falsy Values
30 Logical AND (&&)
31 Logical OR ()
32 NOT Operator (!)
33 Operator Precedence
34 The Switch Statement
35 Ternary Operator
36 Comparison Operators
37 Double Equals (==)
38 Triple Equals (===)
39 Running Code From a Script
40 If Statements
41 Else If
42 Else
43 Nesting Conditionals

Capture Collections of Data with Arrays
44 Creating Arrays
45 Splice
46 Sorting (Part 1)
47 Intro to Reference Types
48 Using Const with Arrays
49 Working with Nested Arrays
50 Array Indices
51 Modifying Arrays
52 Push and Pop
53 Shift and Unshift
54 Concat
55 Includes and IndexOf
56 Reverse and Join
57 Slice

Objects – The Core of Javascript
58 Intro to Objects
59 Creating Object Literals
60 Accessing Object Properties
61 Adding and Updating Properties
62 Nested Arrays & Objects
63 Objects and Reference Types
64 ArrayObject Equality

The World of Loops
65 Intro to Loops
66 Comparing For and For…Of
67 For…Of with Objects
68 For…In Loops
69 For Loops
70 Infinite Loops!
71 For Loops & Arrays
72 Nested For Loops
73 Intro to While Loops
74 More While Loops
75 Break Keyword
76 For…Of Intro

Writing Reusable Code with Functions
77 Our First Function!
78 Function Challenge 4 Get Playing Card
79 Dice Roll Function
80 Introducing Arguments
81 Functions With Multiple Args
82 The Return Statement
83 More on Return Values
84 Function Challenge 1 passwordValidator
85 Function Challenge 2 Average
86 Function Challenge 3 Pangrams

An Advanced Look at Functions
87 Function Scope
88 Block Scope
89 Lexical Scope
90 Function Expressions
91 Higher Order Functions
92 Functions as Arguments
93 Functions as Return Values
94 Callbacks
95 Hoisting

Apply Functions to Collections of Data
96 Intro to Array Callback Methods
97 Reduce Intro
98 Reduce Pt. 2
99 Even More Reduce!
100 forEach
101 Map
102 Arrow Functions Intro
103 Arrow Functions Implicit Returns
104 Array.find
105 Filter
106 Some & Every
107 Revisiting Sort!

A Few Miscellaneous JS Features
108 New JS Features Intro
109 Nested Destructuring
110 Destructuring Parameters
111 Default Parameters
112 Spread for Function Calls
113 Spread in Array Literals
114 Spread in Object Literals
115 The Arguments Object (not new)
116 Rest Parameters (new!)
117 Destructuring Arrays
118 Destructuring Objects

Object Methods and the ‘This’ Keyword
119 Shorthand Object Properties
120 Creating A Deck Factory
121 Computed Properties
122 Adding Methods to Objects
123 Method Shorthand Syntax
124 Intro to Keyword THIS
125 Using THIS in Methods
126 THIS Invocation Context
127 Annoyomatic Demo
128 Putting It All Together Deck Of Cards

JS In the Browser – DOM Manipulation
129 Introduction to the DOM
131 Taste of the DOM
132 Another Fun DOM Example
133 The Document Object
134 getElementById
135 getElementsByTagName
136 getElementsByClassName
137 querySelector & querySelectorAll

Twisting the DOM to Our Will!
138 Working with innerText & textContent
139 Creating Elements
140 Append, Prepend, & insertBefore
141 removeChild & remove
142 NBA Scores Chart Pt1.
143 NBA Scores Chart Refactor
144 innerHTML
145 value, src, href, and more
146 Getting & Setting Attributes
147 Finding ParentChildrenSiblings
148 Changing Multiple Elements
149 Altering Styles
150 getComputedStyle
151 Manipulating Classes

Communicating with Events
152 Intro to DOM Events
153 Input & Change Events
154 Ways NOT to Add Events
155 addEventListener
156 The Impossible Button Demo
157 Events on Multiple Elements
158 The Event Object
159 Key Events keypress, keyup, & keydown
160 Coin Game Demo
161 Form Events & PreventDefault

Asynchronous Code, Callbacks & Promises
162 The Call Stack
163 Refactoring w Promises
164 Call Stack Debugging w Dev Tools
165 JS is Single Threaded
166 How Asynchronous Callbacks Actually Work
167 Welcome to Callback Hell
168 Introducing Promises!
169 Returning Promises from Functions
170 ResolvingRejecting w Values
171 The Delights of Promise Chaining

Making HTTP Requests
172 Intro to AJAX
173 JSON & XML
174 XMLHttpRequests The Basics
175 XMLHttpRequests Chaining Requests
176 A Better Way Fetch!
177 Chaining Fetch Requests
178 Refactoring Fetch Chains
179 An Even Better Way Axios
180 Sequential Axios Requests

Async & Await JS Magic
181 A Quick Overview of Async Functions
182 The Async Keyword
183 The Await Keyword
184 Error Handling in Async Functions
185 Multiple Awaits
186 Parallel Vs. Sequential Requests
187 Refactoring with Promise.all

Prototypes, Classes, & The New Operator
188 What on Earth are Prototypes
189 An Intro to OOP
190 Factory Functions
191 Constructor Functions
192 JS Classes – Syntactical Sugar
193 A Bit More Practice with Classes
194 Extends, Super, and Subclasses

Drawing Animations
195 Welcome to Part 2!
196 Starting and Pausing the Timer
197 Where to Store Data
198 DOM-Centric Approach
199 Getters and Setters
200 Stopping the Timer
201 Notifying the Outside World
202 OnTick and OnComplete
203 Extracting Timer Code
204 Introducing SVG’s
205 Rules of SVG’s
206 App Overview
207 Advanced Circle Properties
208 The Secret to the Animation
209 First Pass on the Animation
210 Smoothing the Animation
211 Adjusting by an Even Interval
212 Using Icons
213 Styling and Wrapup
214 Project Setup
215 Event-Based Architecture
216 Class-Based Implementation
217 Binding Events in a Class
218 Reminder on ‘This’
219 Determining the Value of ‘This’
220 Solving the ‘This’ Issue

Application Design Patterns
221 Application Overview
222 Implementing a Reusable Debounce
223 Extracting Utility Functions
224 Awaiting Async Functions
225 Rendering Movies
226 Handling Errored Responses
227 Opening a Menu
228 Style of Widget Creation
229 Moving HTML Generation
230 Quick Note
231 Repairing References
232 Starter Kit Setup
233 Handling Broken Images
234 Automatically Closing the Dropdown
235 Handling Empty Responses
236 Handling Movie Selection
237 Making a Followup Request
238 Rendering an Expanded Summary
239 Expanded Statistics
240 Issues with the Codebase
241 Making the Autocomplete Reusable
242 Displaying Multiple Autocompletes
243 Big Challenges
244 Extracting Rendering Logic
245 Extracting Selection Logic
246 Removing Movie References
247 Consuming a Different Source of Data
248 Refreshed HTML Structure
249 Avoiding Duplication of Config
250 Hiding the Tutorial
251 Showing Two Summaries
252 When to Compare
253 How to Compare
254 Fetching Movie Data
255 Extracting Statistic Values
256 Parsing Number of Awards
257 Applying Parsed Properties
258 Updating Styles
259 Small Bug Fix
260 App Wrapup
261 Fetching a Single Movie
262 AutoComplete Widget Design
263 Searching the API on Input Change
264 Delaying Search Input
265 Understanding Debounce

Javascript with the Canvas API
266 Application Overview
267 More on Maze Generation
268 Configuration Variables
269 Grid Generation
270 Verticals and Horizontals
271 Abstracting Maze Dimensions
272 Guiding Comments
273 Neighbor Coordinates
274 Shuffling Neighbor Pairs
275 Determining Movement Direction
276 Updating Vertical Wall Values
277 Project Setup
278 Updating Horizontal Wall Values
279 Validating Wall Structure
280 Iterating Over Walls
281 Drawing Horizontal Segments
282 Drawing Vertical Segments
283 Drawing the Goal
284 Drawing the Playing Ball
285 Handling Keypresses
286 Adding Keyboard Controls
287 Disabling Gravity
288 Matter Terminology
289 Detecting a Win
290 Adding a Win Animation
291 Stretching the Canvas
292 Understanding the New Unit Variables
293 Refactoring for Rectangular Mazes
294 Adding Fill Colors
295 Displaying a Success Message
296 Getting Content to Appear
297 Boilerplate Overview
298 Drawing Borders
299 Clicking and Dragging
300 Generating Random Shapes
301 Maze Generation Algorithm

Make a Secret-Message Sharing App
302 Application Overview
303 Displaying the Message
304 App Deployment
305 Project Setup
306 Handling Form Submission
307 Base64 Encoding
308 Encoding the Entered String
309 Parts of a URL
310 Generating the URL
311 Toggling Element Visibility
312 Decoding the Message

Create Node JS Command Line Tools
313 JavaScript with Node vs the Browser
314 The Callback Pattern in Node
315 The Process.cwd Function
316 Running a Node Program as an Executable
317 Linking a Project
318 Is it a File or a Folder
319 A Buggy Initial Implementation
320 Optional Solution #1
321 A Callback-Based Solution
322 Callback-Based Functions Using Promises
323 Issues with Sequential Reads
324 Executing JavaScript
325 Promise.all-Based Solution
326 Console Logs with Colors
327 Accepting Command Line Arguments
328 Joining Paths
329 App Wrapup
330 Working with Modules
331 Invisible Node Functions
332 The Require Cache
333 Files Get Required Once!
334 Debugging with Node
335 App Overview
336 Accessing Standard Library Modules

Create Your Own Project Runner
337 App Overview
338 It Works!
339 More on StdIO
340 [Optional] More on Child Process
341 App Wrapup
342 Project Setup
343 Big Application Challenges
344 Watching Files with Chokidar
345 Issues with Add Event
346 Debouncing Add Events
347 Naming Require Statements
348 Handling CLI Tools with Caporal
349 Ensuring Files Exist

Project Start – E-Commerce App
350 App Overview
351 Globally Applying Middleware
352 App Architecture
353 Package.json Scripts
354 Creating a Web Server
355 Behind the Scenes of Requests
356 Displaying Simple HTML
357 Understanding Form Submissions
358 Parsing Form Data
359 Middlewares in Express

Design a Custom Database
360 Data Storage
361 Deleting Records
362 Updating Records
363 Adding Filtering Logic
364 Exporting an Instance
365 Signup Validation Logic
366 Different Data Modeling Approaches
367 Implementing the Users Repository
368 Opening the Repo Data File
369 Small Refactor
370 Saving Records
371 Better JSON Formatting
372 Random ID Generation
373 Finding By Id

Production-Grade Authentication
374 Cookie Based Authentication
375 Testing the Full Flow
376 Creating User Records
377 Fetching a Session
378 Signing Out a User
379 Signing In
380 Hashing Passwords
381 Salting Passwords
382 Salting + Hashing Passwords
383 Comparing Hashed Passwords

Structuring Javascript Projects
384 Project Structure
385 Extracting Validation Chains
386 Displaying Error Messages
387 Validation Around Sign In
388 Password Validation
389 Template Helper Functions
390 Adding Some Styling
391 Exposing Public Directories
392 Next Steps
393 Product Routes
394 The Products Repository
395 Structure Refactor
396 Code Reuse with Classes
397 Creating the Products Repository
398 Building the Product Creation Form
399 Some Quick Validation
400 HTML Templating Functions
401 HTML Reuse with Layouts
402 Building a Layout File
403 Adding Better Form Validation
404 Validation vs Sanitization
405 Receiving Validation Output
406 Adding Custom Validators

Image and File Upload
407 Exploring Image Upload
408 Redirect on Success Actions
409 Requiring Authentication
410 Template Update
411 Ids in URLs
412 Receiving URL Params
413 Displaying an Edit Form
414 Understanding Mutli-Part Forms
415 Accessing the Uploaded File
416 [Optional] Different Methods of Image Storage
417 Saving the Image
418 A Subtle Middleware Bug
419 Better Styling
420 Reusable Error Handling Middleware
421 Products Listing

Building a Shopping Cart
422 Editing a Product
423 Solving Problem #1
424 Solving Problem #2
425 Shopping Cart Boilerplate
426 Submission Options
427 Creating a Cart, One Way or Another
428 Adding Items to a Cart
429 Displaying Cart Items
430 Rendering the List
431 Totaling Cart Items
432 Removing Cart Items
433 Fixing the HandleErrors Middleware
434 Redirect on Remove
435 Edit Form Template
436 Deleting Products
437 Starting with Seed Data
438 User-Facing Products
439 Products Index
440 Merging More Styling
441 Understanding a Shopping Cart

The Basics of Testing
442 Testing Overview
443 Why is Test Setup Difficult
444 Mocha in the Browser
445 Displaying the Autocomplete
446 Verifying the Dropdown State
447 Writing Assertions
448 Fake DOM Events
449 Holding Up Assertions
450 Implementing WaitFor
451 Asserting Records Fetched
452 A Simple Function to Test
453 A No-Frills Testing Implementation
454 Test Driven Development
455 Fixing Three Issues
456 The Assert Module
457 Using Mocha
458 App Setup
459 Reminder on This App

Building a Testing Framework From Scratch
460 Test Framework Requirements
461 Adding Basic Reporting
462 Adding Colors
463 Better Formatting
464 Ignoring Directories
465 Running Browser-Based JS
466 A Sample Web App
467 Why JSDOM
468 Building a Render Function
469 HTML Element Assertions
470 An Incorrectly Passing Test
471 Project Setup
472 Another Small Issue
473 Script Execution Delay
474 Implementing a Delay
475 Fixing a Test
476 Implementation Steps
477 Walking a Directory Structure
478 Implementing Breadth First Search
479 Collecting Test Files
480 Running Test Files
481 A Quick Test Harness
482 Implementing ‘beforeEach’ and ‘it’

483 Bonus!