The New Modern Javascript Bootcamp (2020)

The New Modern Javascript Bootcamp (2020)
The New Modern Javascript Bootcamp (2020)
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 52 Hours | 5.97 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 New 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.

Course Structure

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.

What You’ll Learn

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 Running Code in the JS Console
8 Introducing Numbers
9 NaN & Infinity
10 Numbers Quiz
11 Variables & Let
12 Unary Operators
13 Introducing Const
14 The Legacy of Var
15 Variables Quiz

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

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

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

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 For Loops
67 Infinite Loops!
68 For Loops & Arrays
69 Nested For Loops
70 Intro to While Loops
71 More While Loops
72 Break Keyword
73 For…Of Intro
74 Comparing For and For…Of
75 For…Of with Objects

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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