CF

Modern JavaScript From The Beginning 2.0

36h 42m 18s
English
Paid

Modern JavaScript From The Beginning 2.0 is a 265-lesson 36 hours 42 minutes self-paced course by Brad Traversy. This is a 37+ hour in-depth course that will take you from the absolute beginning of JavaScript, learning about data types, functions and loops to learning DOM manipulation, asynchronous JS with promises, async/await and much more.

Course facts

Lessons
265
Duration
36 hours 42 minutes
Level
All levels
Language
English
Updated
Instructor
Brad Traversy
Price
Premium

This is a 37+ hour in-depth course that will take you from the absolute beginning of JavaScript, learning about data types, functions and loops to learning DOM manipulation, asynchronous JS with promises, async/await and much more. You will even learn how to write unit tests for algorithms. We go into how JavaScript works under the hood including execution context, the call stack, event loop, etc. We learn about Webpack tooling and how to create a modern development environment. At the end, we build a Node.js/Express API with a custom Webpack frontend.

What you'll learn

  • All of the fundamentals, including variables, data types, functions, scope, etc
  • DOM Manipulation, events and creating dynamic UIs
  • Under the hood topics, like execution context and the call stack
  • Asynchrounous JS including callbacks, promises, async/await
  • Web APIs like geolocation, audio/video, canvas and speech
  • OOP including classes and prototypes
  • Modern environments with with Webpack tooling
  • Bonus: Complete full-stack application with Node.js/Express & Webpack

Who teaches Modern JavaScript From The Beginning 2.0? Brad Traversy

Brad Traversy thumbnail

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

What lessons are included in Modern JavaScript From The Beginning 2.0?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 265 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome To The Course
All Course Lessons (265)
#Lesson TitleDurationAccess
1
Welcome To The Course Demo
02:40
2
Course Outline
07:50
3
Premium Docs
03:06
4
What Is JavaScript?
07:43
5
Tools & Setup
05:25
6
Running JavaScript In The Browser
07:03
7
Section Intro
00:52
8
The Sandbox Files
02:58
9
Using The Console
10:07
10
Comments & Shortcuts
07:01
11
Variables & Constants
11:28
12
Data Types
12:55
13
Primitive vs Reference Types
07:08
14
Type Conversion
10:07
15
Operators
09:39
16
Type Coercion
04:01
17
Working With Strings
15:59
18
Capitalize Challenge
06:50
19
Working With Numbers
05:46
20
The Math Object
05:57
21
Number Challenge
08:30
22
Dates & Times
08:13
23
17 - Date Methods & DateTimeFormat API
08:59
24
Section Intro
00:42
25
Creating Arrays
07:25
26
Basic Array Methods
10:26
27
Nesting, Concat & The Spread Operator
10:13
28
Array Challenges
07:05
29
Object Literals
08:07
30
Object Spread Operator & Methods
11:59
31
Destructuring & Naming
06:57
32
JSON Intro
09:02
33
Object Challenges
06:22
34
Section Intro
01:33
35
Creating A Function
06:08
36
More on Arguments & Parameters
10:21
37
Global & Function Scope
05:26
38
Block Scope
05:15
39
Nested Scope
02:57
40
Declaration vs Expression
04:15
41
Arrow Functions
07:37
42
Immediately Invoked Function Expressions (IIFE)
05:03
43
Function Challenges
12:20
44
Execution Context
09:19
45
Execution Context In Action
04:00
46
The Call Stack
04:53
47
Section Intro
01:09
48
If Statements
06:54
49
Else-If & Nesting
07:10
50
Switches
04:58
51
Calculator Challenge
03:21
52
Truthy & Falsy
12:17
53
Logical Operators
08:08
54
Logical Assignment
06:11
55
Ternary Operator
10:18
56
Section Intro
00:57
57
For Loop
11:26
58
Break & Continue
02:52
59
While & Do While Loops
07:00
60
FizzBuzz Challenge
08:01
61
For...of Loop
05:05
62
For...in Loop
03:08
63
Array.forEach Method
08:35
64
Array.filter Method
11:33
65
Array.map Method
15:31
66
Array.reduce Method
08:50
67
Array Method Challenges
10:27
68
Section Intro
01:17
69
Intro To The DOM
11:05
70
Document Element Properties
14:20
71
DOM Selectors - Single Elements
14:14
72
DOM Selectors - Multiple Elements
09:17
73
Traversing The DOM - Elements
11:27
74
Traversing The DOM - All Nodes
13:48
75
Create & Append Elements
06:16
76
InnerHTML vs createElement()
08:52
77
Refactor To Multiple Functions
04:10
78
Insert Elements, Text & HTML
09:25
79
Custom insertAfter() Challenge
04:48
80
Replace Elements
09:47
81
Remove Elements
07:47
82
Manipulating Styles & Classes
09:38
83
Section Intro
00:52
84
Event Listeners
13:01
85
Mouse Events
10:42
86
The Event Object
13:01
87
Keyboard Events & Key Properties
10:28
88
KeyCode Mini-Project
14:52
89
Input Events
11:48
90
Form Submission & FormData Object
10:44
91
Event Bubbling
05:39
92
Event Delegation & Multiple Events
05:46
93
Page Loading & Window Events
10:37
94
Project Intro
03:32
95
Add Items To List (DOM Only)
11:41
96
Setting Up Git & Github (Optional)
15:25
97
Remove & Clear Items
07:53
98
Clear UI State
09:53
99
Filter Items
09:56
100
Local Storage Crash Course
05:32
101
Add Items To Local Storage
08:05
102
Display Items From Local Storage
06:16
103
Remove Items From Local Storage
09:01
104
Set Item To Edit
08:01
105
Update Item & Reset State
06:11
106
Prevent Duplicate Items
03:47
107
Deploy To Netlify
04:59
108
Section Intro
00:49
109
Under The Hood: Thread Of Execution
02:40
110
Under The Hood: How Async JS Works
08:40
111
setTimeout & clearTimeout Functions
04:40
112
setInterval & clearInterval Functions
08:52
113
Callbacks
09:57
114
Crash Course On HTTP Requests
07:14
115
DevTools Network Tab
04:51
116
AJAX & XHR Object
11:29
117
Joke Generator Project Challenge
09:41
118
Callback Hell
06:53
119
Promises
10:03
120
Callback To Promise Refactor
04:59
121
Promise Chaining
04:16
122
Promises vs Callback Hell
06:02
123
Handling Multiple Promises with promise.all()
06:05
124
Section Intro
01:27
125
Fetch Basics
09:03
126
Random User Mini-Project
12:53
127
Fetch Options - Method, Body Headers
14:56
128
Typicode Todos Mini-Project - Part 1
17:11
129
Typicode Todos Mini-Project - Part 2
13:30
130
Fetch API Error Handling
13:18
131
Async & Await
09:26
132
Try...Catch Statements
04:42
133
Error Handling With Async & Await
06:43
134
Multiple Promises With Async & Await
12:27
135
Project Intro
04:23
136
Theme Overview & Prep
07:15
137
API Overview & API Key
04:51
138
Page Router & Active Link
09:52
139
Display Popular Movies
13:35
140
Spinner & Popular TV Shows
07:22
141
Movie Details Page
13:15
142
Details Page Backdrop
04:53
143
TV Show Details Page
07:07
144
Swiper Slider
13:29
145
Search Functionality
19:13
146
Display Search Results
11:35
147
Add Pagination For Search
16:38
148
Section Intro
01:57
149
GeoLocation API
11:47
150
Show Location on a Map
07:30
151
Canvas Element & API
13:48
152
requestAnimationFrame() Method
08:11
153
Animated Clock - Part 1
25:08
154
Animated Clock - Part 2
11:09
155
Web Audio API
08:26
156
Music Player Project
20:03
157
Drum Machine Project
09:07
158
Video API
06:21
159
Video Player Project
12:44
160
Web Animations API - Ball Project
10:26
161
Speech Recognition API - Color Say Project
11:39
162
Speech Synthesis API - Text To Speech
13:22
163
Section Intro
02:01
164
What Is OOP?
09:18
165
4 Basic Principles of OOP
06:54
166
More on Object Literals & this Keyword
05:02
167
Constructor Functions
07:07
168
Literals vs Built-in Constructors
09:48
169
Working With Object Properties
07:29
170
Prototypes & The Prototype Chain
04:55
171
Adding Methods to the Prototype
04:38
172
Using Object.create()
04:56
173
Prototypical Inheritance & call()
10:12
174
OOP Game Challenge
07:44
175
Classes
07:30
176
Class Inheritance
06:29
177
Static Methods
02:54
178
bind() & Defining this
05:21
179
Getters & Setters with Classes
09:31
180
Getters & Setters with defineProperty()
10:56
181
Private Property Underscore Convention
12:14
182
ES2022 Private Class Fields
04:43
183
Property Flags & Descriptors
09:13
184
Sealing & Freezing Objects
07:26
185
Project Intro
04:17
186
UI Theme Setup
04:43
187
Project Planning & Diagram
05:04
188
Base Tracker, Meal & Workout Class
09:56
189
Display Tracker Stats
14:46
190
Progress Bar & Calorie Alert
10:01
191
App Class, New Meal & Workout
13:11
192
Refactor to Single _newItem Method
04:31
193
Display New Meal & Workout
07:36
194
Remove Meal & Workout
10:01
195
Filter & Reset
10:52
196
Set Calorie Limit
05:17
197
Storage Class & Calorie Limit Persist
05:47
198
Persist Total Calories To Local Storage
04:41
199
Save Meals To Local Storage
07:40
200
Save Workouts To Local Storage
03:44
201
Remove Meals & Workouts From LocalStorage
05:53
202
Clear Storage Items
04:15
203
Section Intro
02:07
204
What Are Modules?
07:04
205
Installing & Using Node.js
06:17
206
CommonJS Modules
09:18
207
NPM Packages/Modules
11:21
208
ES Modules
07:27
209
Module Bundlers
05:45
210
Webpack Basic Setup
11:18
211
CSS & Style Loaders
04:40
212
HTML Webpack Plugin
08:17
213
Webpack DevServer Plugin
04:40
214
Babel Setup
05:06
215
CSS Minify Extract Plugin
03:01
216
Tracalorie Refactor To Use Webpack
16:29
217
Deploy Tracalorie To Netlify
04:39
218
Section Intro
01:25
219
Symbols
10:24
220
Iterators
09:13
221
Generators
05:09
222
Profile Scroller Project
07:53
223
Sets
05:14
224
Maps
06:17
225
Poll Project
12:04
226
Stacks
13:31
227
Queues
08:45
228
Linked Lists
25:18
229
Intro & What Are Algorithms?
02:44
230
What is Unit Testing?
03:24
231
Getting Started with Jest
05:46
232
Grouping Tests Together
10:53
233
Reverse String Algorithm
09:50
234
Palindrome Algorithm
09:59
235
Array Chunking
06:12
236
Anagram Algorithm
11:58
237
Get Elements By Tag - jsdom
17:53
238
Has Duplicate IDs - jsdom
15:45
239
Section Intro
02:19
240
fs (filesystem) Module
13:56
241
path Module
07:57
242
os Module
11:05
243
url & querystring Modules
07:23
244
http Module
18:21
245
Project Intro
03:34
246
Express Setup & Basic API
16:05
247
Nodemon & Route Clean Up
06:06
248
Handle POST Requests - Add Idea
08:21
249
PUT & DELETE Requests - Update & Remove Ideas
06:18
250
What Is MongoDB?
04:47
251
MongoDB Atlas Setup
05:52
252
Mongoose Connect & Dotenv
08:54
253
Mongoose Schema & Model
08:54
254
Database Queries
15:15
255
Fullstack Workflow
03:01
256
Client Folder Setup
09:16
257
Modal Component
08:31
258
IdeaForm Component
12:01
259
IdeaList Component
12:05
260
API Service - Fetch Ideas
11:58
261
Create Idea via Form
07:26
262
Save Username to Local Storage
04:57
263
Add Username Validation To Server
07:21
264
Delete Ideas
12:57
265
Deploying A Fullstack App
08:37
Unlock unlimited learning

Get instant access to all 264 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Modern JavaScript From The Beginning 2.0?

More courses by Brad Traversy

Frequently asked questions

What are the prerequisites for enrolling in this course?
The course is designed for beginners, so no prior experience in JavaScript is required. However, having a basic understanding of HTML and CSS could be beneficial as it helps in understanding how JavaScript interacts with web pages. The course includes initial lessons on tools and setup, which will guide you through running JavaScript in the browser.
What projects will I build during this course?
By the end of the course, you will have built a Node.js/Express API with a custom Webpack frontend. Along the way, you will engage in several challenges such as the 'Capitalize Challenge', 'Number Challenge', and 'FizzBuzz Challenge', which reinforce the concepts taught in the lessons.
Who is the target audience for this JavaScript course?
The course targets beginners who are new to JavaScript and want to start from the ground up. It's also suitable for developers who wish to strengthen their understanding of JavaScript fundamentals and expand their knowledge on topics like asynchronous JavaScript and Webpack tooling.
How does the depth of this course compare to similar courses?
This course provides over 37 hours of content, covering JavaScript from basics like data types and functions to advanced topics such as execution context and asynchronous JavaScript. It also includes practical exercises and challenges that apply these concepts, making it more comprehensive compared to shorter courses that may not delve as deeply into each topic.
What specific tools or platforms are used in this course?
The course covers Webpack tooling to create a modern development environment. You'll also use Node.js and Express for backend development. Additionally, JavaScript will be run in the browser, with lessons dedicated to using the console for testing and debugging.
Which topics are not covered in this JavaScript course?
The course does not cover JavaScript frameworks like React, Angular, or Vue.js. It focuses on core JavaScript concepts and the development environment setup using Webpack. Topics such as CSS and HTML are not the primary focus of this JavaScript-centric course.
How much time should I expect to commit to this course?
The course has a total runtime of approximately 37 hours spread over 265 lessons. Depending on your pace and the time spent on exercises and challenges, you might need additional hours. Allocating a few weeks with consistent study sessions will help you grasp the material effectively.