The Modern Javascript Bootcamp Course
About Course
Learn Modern Javascript from scratch with this comprehensive bootcamp course offered completely free of cost. This course is designed to help you become a proficient Javascript developer, and is taught by top Udemy instructors Colt Steele and Stephen Grider. This course is perfect for beginners and covers all the essential aspects of Javascript, from the fundamentals to building real-world applications.
This course is divided into two sections. The first section focuses on teaching you the basics of Javascript, including variables, objects, arrays, functions, and more. The second section is dedicated to building amazing projects, including a fully-featured E-Commerce web application.
Here are some of the key topics you will learn in this course:
- Master the basics of the language, including 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 APIs
- Build a fully-featured E-Commerce application from scratch – including production-grade authentication!
Enroll in this free course today and start your journey to becoming a Javascript master!
This course is from Udemy, Udacity, Coursera, MasterClass, NearPeer, and other platforms. All courses are offered free of cost.
What Will You 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
Course Content
Introduction
-
A Message from the Professor
-
How This Course Works
02:31 -
JS ECMA TC39 What Do They Mean
06:17 -
The Tools You Need
02:38 -
A Quick Note About MDN
02:01
JS Values & Variables
-
Goals & Primitives
03:27 -
Running Code in the JS Console
02:57 -
Introducing Numbers
07:31 -
NaN & Infinity
02:02 -
Numbers Quiz
01:52 -
Variables & Let
07:21 -
Unary Operators
03:18 -
Introducing Const
02:36 -
The Legacy of Var
02:50 -
Variables Quiz
02:48
How to Model Data Efficiently
-
Booleans Intro
03:25 -
Strings
05:16 -
String Indices
05:03 -
String Methods
05:28 -
More String Methods
08:22 -
Strings Quiz
07:22 -
String Escape Characters
03:54 -
String Template Literals
08:39 -
Null & Undefined
03:43 -
The Math Object & Random Numbers
06:25 -
typeof operator
02:21 -
parseInt & parseFloat
02:44
Controlling Program Logic and Flow
-
Making Decisions in JS
03:19 -
Comparison Operators
05:41 -
Double Equals (==)
03:20 -
Triple Equals (===)
04:27 -
Running Code From a Script
09:57 -
If Statements
04:59 -
Else If
03:56 -
Else
04:14 -
Nesting Conditionals
03:33 -
Truthy & Falsy Values
03:56 -
Logical AND (&&)
07:16 -
Logical OR ()
05:52 -
NOT Operator (!)
07:06 -
Operator Precedence
04:18 -
The Switch Statement
08:04 -
Ternary Operator
04:19
Capture Collections of Data with Arrays
-
Creating Arrays
07:11 -
Array Indices
02:13 -
Modifying Arrays
04:15 -
Push and Pop
06:18 -
Shift and Unshift
05:42 -
Concat
02:58 -
Includes and IndexOf
05:36 -
Reverse and Join
03:24 -
Slice
04:54 -
Splice
05:33 -
Sorting (Part 1)
02:49 -
Intro to Reference Types
05:04 -
Using Const with Arrays
05:22 -
Working with Nested Arrays
06:04
Objects – The Core of Javascript
-
Intro to Objects
06:51 -
Creating Object Literals
07:57 -
Accessing Object Properties
07:40 -
Adding and Updating Properties
03:21 -
Nested Arrays & Objects
05:08 -
Objects and Reference Types
02:30 -
ArrayObject Equality
06:26
The World of Loops
-
Intro to Loops
05:26 -
For Loops
13:20 -
Infinite Loops!
05:13 -
For Loops & Arrays
11:25 -
Nested For Loops
09:41 -
Intro to While Loops
02:49 -
More While Loops
07:50 -
Break Keyword
04:18 -
For…Of Intro
04:27 -
Comparing For and For…Of
06:21 -
For…Of with Objects
05:56 -
For…In Loops
06:35
Writing Reusable Code with Functions
-
Our First Function!
08:41 -
Dice Roll Function
03:23 -
Introducing Arguments
07:40 -
Functions With Multiple Args
04:28 -
The Return Statement
05:08 -
More on Return Values
09:02 -
Function Challenge 1 passwordValidator
13:10 -
Function Challenge 2 Average
03:19 -
Function Challenge 3 Pangrams
07:16 -
Function Challenge 4 Get Playing Card
12:13
An Advanced Look at Functions
-
Function Scope
07:01 -
Block Scope
12:07 -
Lexical Scope
06:36 -
Function Expressions
05:40 -
Higher Order Functions
07:19 -
Functions as Arguments
07:23 -
Functions as Return Values
13:21 -
Callbacks
08:19 -
Hoisting
08:10
Apply Functions to Collections of Data
-
Intro to Array Callback Methods
02:17 -
forEach
08:06 -
Map
11:11 -
Arrow Functions Intro
06:14 -
Arrow Functions Implicit Returns
09:31 -
Array.find
06:12 -
Filter
10:05 -
Some & Every
06:20 -
Revisiting Sort!
10:46 -
Reduce Intro
08:49 -
Reduce Pt. 2
08:55 -
Even More Reduce!
13:10
A Few Miscellaneous JS Features
-
New JS Features Intro
01:42 -
Default Parameters
07:58 -
Spread for Function Calls
06:53 -
Spread in Array Literals
08:08 -
Spread in Object Literals
07:49 -
The Arguments Object (not new)
06:48 -
Rest Parameters (new!)
06:57 -
Destructuring Arrays
06:16 -
Destructuring Objects
04:16 -
Nested Destructuring
02:54 -
Destructuring Parameters
05:04
Object Methods and the ‘This’ Keyword
-
Shorthand Object Properties
04:25 -
Computed Properties
07:02 -
Adding Methods to Objects
05:33 -
Method Shorthand Syntax
02:45 -
Intro to Keyword THIS
06:17 -
Using THIS in Methods
07:15 -
THIS Invocation Context
07:43 -
Annoyomatic Demo
14:03 -
Putting It All Together Deck Of Cards
25:33 -
Creating A Deck Factory
03:31
JS In the Browser – DOM Manipulation
-
Introduction to the DOM
05:53 -
IMPORTANT NOTE HTML & CSS
09:00 -
Taste of the DOM
10:03 -
Another Fun DOM Example
12:23 -
The Document Object
05:25 -
getElementById
06:08 -
getElementsByTagName
07:15 -
getElementsByClassName
05:17 -
querySelector & querySelectorAll
10:57
Twisting the DOM to Our Will!
-
Working with innerText & textContent
10:51 -
innerHTML
07:12 -
value src
09:37 -
Getting & Setting Attributes
03:29 -
Finding ParentChildrenSiblings
06:27 -
Changing Multiple Elements
03:51 -
Altering Styles
09:50 -
getComputedStyle
06:11 -
Manipulating Classes
10:34 -
Creating Elements
09:11 -
Append Prepend & insertBefore
09:57 -
removeChild & remove
05:34 -
NBA Scores Chart Pt1
22:01 -
NBA Scores Chart Refactor
12:02
Communicating with Events
-
Intro to DOM Events
07:48 -
2 Ways NOT to Add Events
13:21 -
addEventListener
09:48 -
The Impossible Button Demo
08:54 -
Events on Multiple Elements
12:44 -
The Event Object
04:02 -
Key Events keypress keyup & keydown
13:15 -
Coin Game Demo
22:51 -
Form Events & PreventDefault
12:02 -
Input & Change Events
13:01
Asynchronous Code, Callbacks & Promises
-
The Call Stack
07:47 -
Call Stack Debugging w Dev Tools
10:16 -
JS is Single Threaded
04:13 -
How Asynchronous Callbacks Actually Work
13:53 -
Welcome to Callback Hell
27:16 -
Introducing Promises!
11:03 -
Returning Promises from Functions
05:48 -
ResolvingRejecting w Values
09:03 -
The Delights of Promise Chaining
12:18 -
Refactoring w Promises
11:53
Making HTTP Requests
-
Intro to AJAX
09:14 -
JSON & XML
08:21 -
XMLHttpRequests The Basics
12:08 -
XMLHttpRequests Chaining Requests
06:13 -
A Better Way Fetch!
13:25 -
Chaining Fetch Requests
06:13 -
Refactoring Fetch Chains
11:55 -
An Even Better Way Axios
08:55 -
Sequential Axios Requests
08:15
Async & Await JS Magic
-
A Quick Overview of Async Functions
03:39 -
The Async Keyword
07:05 -
The Await Keyword
04:09 -
Error Handling in Async Functions
03:18 -
Multiple Awaits
06:13 -
Parallel Vs. Sequential Requests
13:22 -
Refactoring with Promise.all
03:56
Prototypes, Classes, & The New Operator
-
What on Earth are Prototypes
12:23 -
An Intro to OOP
10:14 -
Factory Functions
09:00 -
Constructor Functions
16:59 -
JS Classes – Syntactical Sugar
15:04 -
A Bit More Practice with Classes
10:18 -
Extends Super and Subclasses
10:05
Drawing Animations
-
Welcome to Part 2!
01:43 -
App Overview
02:32 -
Project Setup
01:39 -
Event-Based Architecture
06:59 -
Class-Based Implementation
04:22 -
Binding Events in a Class
06:54 -
Reminder on ‘This’
04:58 -
Determining the Value of ‘This’
11:44 -
Solving the ‘This’ Issue
07:45 -
Starting and Pausing the Timer
07:33 -
Where to Store Data
08:06 -
DOM-Centric Approach
04:11 -
Getters and Setters
07:00 -
Stopping the Timer
02:27 -
Notifying the Outside World
06:16 -
OnTick and OnComplete
03:13 -
Extracting Timer Code
01:53 -
Introducing SVG’s
02:49 -
Rules of SVG’s
07:02 -
Advanced Circle Properties
09:41 -
The Secret to the Animation
05:39 -
First Pass on the Animation
06:24 -
Smoothing the Animation
05:07 -
Adjusting by an Even Interval
07:54 -
Using Icons
03:58 -
Styling and Wrapup
03:18
Application Design Patterns
-
Application Overview
03:34 -
Starter Kit Setup
02:10 -
Big Challenges
07:28 -
Fetching Movie Data
09:42 -
Fetching a Single Movie
03:52 -
AutoComplete Widget Design
05:31 -
Searching the API on Input Change
05:30 -
Delaying Search Input
08:13 -
Understanding Debounce
04:09 -
Implementing a Reusable Debounce
08:17 -
Extracting Utility Functions
01:48 -
Awaiting Async Functions
04:05 -
Rendering Movies
05:26 -
Handling Errored Responses
04:48 -
Opening a Menu
04:25 -
Style of Widget Creation
06:05 -
Moving HTML Generation
06:52 -
Repairing References
04:59 -
Handling Broken Images
04:38 -
Automatically Closing the Dropdown
05:50 -
Handling Empty Responses
01:44 -
Handling Movie Selection
04:15 -
Making a Followup Request
05:16 -
Rendering an Expanded Summary
07:04 -
Expanded Statistics
03:53 -
Issues with the Codebase
11:23 -
Making the Autocomplete Reusable
04:00 -
Displaying Multiple Autocompletes
08:55 -
Extracting Rendering Logic
06:38 -
Extracting Selection Logic
05:58 -
Removing Movie References
05:44 -
Consuming a Different Source of Data
04:03 -
Refreshed HTML Structure
04:00 -
Avoiding Duplication of Config
04:06 -
Hiding the Tutorial
01:27 -
Showing Two Summaries
04:26 -
When to Compare
03:07 -
How to Compare
04:44 -
Extracting Statistic Values
05:54 -
Parsing Number of Awards
05:57 -
Applying Parsed Properties
02:55 -
Updating Styles
07:03 -
App Wrapup
03:37
Javascript with the Canvas API
-
Application Overview
04:27 -
Project Setup
02:23 -
Matter Terminology
04:27 -
Getting Content to Appear
05:58 -
Boilerplate Overview
07:11 -
Drawing Borders
08:18 -
Clicking and Dragging
02:11 -
Generating Random Shapes
08:17 -
Maze Generation Algorithm
08:04 -
More on Maze Generation
08:44 -
Configuration Variables
06:48 -
Grid Generation
08:22 -
Verticals and Horizontals
05:05 -
Abstracting Maze Dimensions
03:31 -
Guiding Comments
07:03 -
Neighbor Coordinates
06:24 -
Shuffling Neighbor Pairs
04:33 -
Determining Movement Direction
05:37 -
Updating Vertical Wall Values
06:38 -
Updating Horizontal Wall Values
04:50 -
Validating Wall Structure
03:41 -
Iterating Over Walls
03:10 -
Drawing Horizontal Segments
12:33 -
Drawing Vertical Segments
10:13 -
Drawing the Goal
05:51 -
Drawing the Playing Ball
02:54 -
Handling Keypresses
04:08 -
Adding Keyboard Controls
00:27 -
Disabling Gravity
01:31 -
Detecting a Win
09:07 -
Adding a Win Animation
05:30 -
Stretching the Canvas
03:58 -
Understanding the New Unit Variables
03:27 -
Refactoring for Rectangular Mazes
10:38 -
Adding Fill Colors
02:27 -
Displaying a Success Message
04:41
Make a Secret-Message Sharing App
-
Application Overview
02:16 -
Project Setup
03:06 -
Handling Form Submission
05:37 -
Base64 Encoding
06:36 -
Encoding the Entered String
03:44 -
Parts of a URL
04:44 -
Generating the URL
05:03 -
Toggling Element Visibility
04:06 -
Decoding the Message
03:43 -
Displaying the Message
04:55 -
App Deployment
02:37
Create Node JS Command Line Tools
-
JavaScript with Node vs the Browser
04:49 -
Executing JavaScript
03:01 -
Working with Modules
05:29 -
Invisible Node Functions
07:01 -
The Require Cache
07:23 -
Files Get Required Once!
08:09 -
Debugging with Node
09:16 -
App Overview
03:49 -
Accessing Standard Library Modules
04:20 -
The Callback Pattern in Node
08:02 -
The Process.cwd Function
03:14 -
Running a Node Program as an Executable
06:44 -
Linking a Project
03:56 -
Is it a File or a Folder
06:23 -
A Buggy Initial Implementation
07:23 -
Optional Solution #1
04:51 -
A Callback-Based Solution
06:42 -
Callback-Based Functions Using Promises
08:09 -
Issues with Sequential Reads
05:14 -
Promise.all-Based Solution
05:10 -
Console Logs with Colors
06:32 -
Accepting Command Line Arguments
03:28 -
Joining Paths
03:54 -
App Wrapup
03:11
Create Your Own Project Runner
-
App Overview
02:48 -
Project Setup
02:55 -
Big Application Challenges
06:10 -
Watching Files with Chokidar
06:12 -
Issues with Add Event
04:20 -
Debouncing Add Events
04:21 -
Naming Require Statements
06:32 -
Handling CLI Tools with Caporal
07:24 -
Ensuring Files Exist
06:46 -
It Works!
07:24 -
More on StdIO
04:07 -
(Optional) More on Child_Process
16:06 -
App Wrapup
06:35
Project Start – E-Commerce App
-
App Overview
04:58 -
App Architecture
03:37 -
Package.json Scripts
06:13 -
Creating a Web Server
06:18 -
Behind the Scenes of Requests
09:37 -
Displaying Simple HTML
03:19 -
Understanding Form Submissions
09:13 -
Parsing Form Data
11:40 -
Middlewares in Express
09:13 -
Globally Applying Middleware
05:13
Design a Custom Database
-
Data Storage
03:55 -
Different Data Modeling Approaches
05:55 -
Implementing the Users Repository
11:44 -
Opening the Repo Data File
05:13 -
Small Refactor
02:31 -
Saving Records
06:37 -
Better JSON Formatting
02:54 -
Random ID Generation
06:11 -
Finding By Id
02:53 -
Deleting Records
03:00 -
Updating Records
07:20 -
Adding Filtering Logic
07:36 -
Exporting an Instance
06:16 -
Signup Validation Logic
09:00
Production-Grade Authentication
-
Cookie Based Authentication
13:35 -
Creating User Records
04:54 -
Fetching a Session
10:08 -
Signing Out a User
05:08 -
Signing In
05:54 -
Hashing Passwords
08:05 -
Salting Passwords
09:07 -
Salting + Hashing Passwords
11:19 -
Comparing Hashed Passwords
04:54 -
Testing the Full Flow
05:04
Structuring Javascript Projects
-
Project Structure
03:04 -
Structure Refactor
07:02 -
HTML Templating Functions
08:47 -
HTML Reuse with Layouts
07:39 -
Building a Layout File
05:15 -
Adding Better Form Validation
06:50 -
Validation vs Sanitization
10:41 -
Receiving Validation Output
06:39 -
Adding Custom Validators
09:35 -
Extracting Validation Chains
06:26 -
Displaying Error Messages
10:17 -
Validation Around Sign In
07:48 -
Password Validation
09:02 -
Template Helper Functions
08:02 -
Adding Some Styling
04:38 -
Exposing Public Directories
06:24 -
Next Steps
01:33 -
Product Routes
03:47 -
The Products Repository
03:31 -
Code Reuse with Classes
06:04 -
Creating the Products Repository
02:48 -
Building the Product Creation Form
06:08 -
Some Quick Validation
09:30
Image and File Upload
-
Exploring Image Upload
04:48 -
Understanding Mutli-Part Forms
15:25 -
Accessing the Uploaded File
07:16 -
(Optional) Different Methods of Image Storage
20:05 -
Saving the Image
05:05 -
A Subtle Middleware Bug
09:20 -
Better Styling
01:36 -
Reusable Error Handling Middleware
10:35 -
Products Listing
08:19 -
Redirect on Success Actions
03:02 -
Requiring Authentication
06:50 -
Template Update
01:47 -
Ids in URLs
03:50 -
Receiving URL Params
06:12 -
Displaying an Edit Form
05:23
Building a Shopping Cart
-
Editing a Product
08:00 -
Fixing the HandleErrors Middleware
10:07 -
Edit Form Template
01:23 -
Deleting Products
05:43 -
Starting with Seed Data
02:23 -
User-Facing Products
04:15 -
Products Index
05:42 -
Merging More Styling
04:08 -
Understanding a Shopping Cart
03:18 -
Solving Problem #1
03:02 -
Solving Problem #2
09:14 -
Shopping Cart Boilerplate
04:31 -
Submission Options
05:32 -
Creating a Cart One Way or Another
09:17 -
Adding Items to a Cart
06:19 -
Displaying Cart Items
08:25 -
Rendering the List
04:34 -
Totaling Cart Items
06:23 -
Removing Cart Items
04:42 -
Redirect on Remove
05:32
The Basics of Testing
-
Testing Overview
06:04 -
A Simple Function to Test
07:05 -
A No-Frills Testing Implementation
08:24 -
Test Driven Development
09:29 -
Fixing Three Issues
10:23 -
The Assert Module
08:40 -
Using Mocha
05:42 -
App Setup
02:23 -
Reminder on This App
02:24 -
Why is Test Setup Difficult
03:52 -
Mocha in the Browser
05:53 -
Displaying the Autocomplete
10:29 -
Verifying the Dropdown State
06:04 -
Writing Assertions
06:46 -
Fake DOM Events
07:37 -
Holding Up Assertions
04:09 -
Implementing WaitFor
06:48 -
Asserting Records Fetched
04:02
Building a Testing Framework From Scratch
-
Test Framework Requirements
04:24 -
Project Setup
03:34 -
Implementation Steps
07:15 -
Walking a Directory Structure
06:36 -
Implementing Breadth First Search
07:40 -
Collecting Test Files
10:13 -
Running Test Files
04:13 -
A Quick Test Harness
04:30 -
Implementing ‘beforeEach’ and ‘it’
08:38 -
Adding Basic Reporting
07:34 -
Adding Colors
05:06 -
Better Formatting
01:42 -
Ignoring Directories
03:39 -
Running Browser-Based JS
02:15 -
A Sample Web App
07:43 -
Why JSDOM
04:36 -
Building a Render Function
07:19 -
HTML Element Assertions
05:13 -
An Incorrectly Passing Test
05:04 -
Another Small Issue
05:05 -
Script Execution Delay
03:33 -
Implementing a Delay
08:08 -
Fixing a Test
03:20
Earn a certificate
Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.
Student Ratings & Reviews
No Review Yet
