193 DOM Traversing | The Course Tree

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Master in Javascript

01 Welcome

001 Course Structure and Projects (5:25)
002 Watch Before You Start! (6:09)
003 course-material-v2.1
004 migration-guide
005 Setting Up Our Code Editor (8:23)

02 JavaScript Fundamentals _ Part 1

006 Section Intro (0:53)
007 Hello World! (5:57)
008 A Brief Introduction to JavaScript (11:19)
009 Linking a JavaScript File (15:55)
010 Values and Variables (16:06)
011 assignments-js-fundamentals
012 Data Types (19:19)
013 let, const and var (9:58)
014 Basic Operators (19:31)
015 Operator Precedence (11:19)
016 Coding Challenge #1 (10:28)
017 Strings and Template Literals (10:58)
018 Taking Decisions_ if _ else Statements (12:50)
019 Coding Challenge #2 (6:22)
020 Type Conversion and Coercion (16:41)
021 Truthy and Falsy Values (10:03)
022 Equality Operators_ == vs. === (15:41)
023 Boolean Logic (8:30)
024 Logical Operators (10:38)
025 Coding Challenge #3 (15:07)
026 The switch Statement (13:10)
027 Statements and Expressions (6:09)
028 The Conditional (Ternary) Operator (10:02)
029 Coding Challenge #4 (9:12)
030 JavaScript Releases_ ES5, ES6+ and ESNext (14:19)

03 JavaScript Fundamentals _ Part 2

031 Section Intro (0:36)
032 Activating Strict Mode (10:27)
033 Functions (19:08)
034 Function Declarations vs. Expressions (10:39)
035 Arrow Functions (9:52)
036 Functions Calling Other Functions (10:07)
037 Reviewing Functions (15:38)
038 Coding Challenge #1 (18:12)
039 Introduction to Arrays (21:35)
040 Basic Array Operations (Methods) (12:53)
041 Coding Challenge #2 (9:36)
042 Introduction to Objects (6:08)
043 Dot vs. Bracket Notation (19:21)
044 Object Methods (23:05)
045 Coding Challenge #3 (12:59)
046 Iteration_ The for Loop (11:11)
047 Looping Arrays, Breaking and Continuing (22:02)
048 Looping Backwards and Loops in Loops (11:53)
049 The while Loop (11:53)
050 Coding Challenge #4 (15:36)

04 How to Navigate This Course

051 Pathways and Section Roadmaps (4:08)
052 pathways

05 Developer Skills & Editor Setup

053 Section Intro (0:39)
055 Setting up Prettier and VS Code (16:22)
056 Installing Node.js and Setting Up a Dev Environment (11:32)
057 Learning How to Code (17:42)
058 How to Think Like a Developer_ Become a Problem Solver! (10:53)
059 Using Google, StackOverflow and MDN (26:37)
060 Debugging (Fixing Errors) (5:09)
061 Debugging with the Console and Breakpoints (19:25)
062 Coding Challenge #1 (15:24)

06 [OPTIONAL] HTML & CSS Crash Course

063 Section Intro (0:40)
064 Basic HTML Structure and Elements (9:32)
065 Attributes, Classes and IDs (13:09)
066 Basic Styling with CSS (12:00)
067 Introduction to the CSS Box Model (20:58)

07 JavaScript in the Browser_ DOM and Events Fundamentals

068 Section Intro (0:49)
070 PROJECT #1_ Guess My Number! (8:47)
071 What's the DOM and DOM Manipulation (6:48)
072 Selecting and Manipulating Elements (8:22)
073 Handling Click Events (12:50)
074 Implementing the Game Logic (19:34)
075 Manipulating CSS Styles (8:18)
076 Coding Challenge #1 (11:40)
077 Implementing Highscores (7:47)
078 Refactoring Our Code_ The DRY Principle (15:05)
079 PROJECT #2_ Modal Window (13:21)
080 Working With Classes (16:55)
081 Handling an _Esc_ Keypress Event (14:12)
082 PROJECT #3_ Pig Game (17:09)
083 Rolling the Dice (15:58)
084 Switching the Active Player (15:16)
085 Holding Current Score (24:55)
086 Resetting the Game (15:38)

08 How JavaScript Works Behind the Scenes

087 Section Intro (1:31)
089 An High-Level Overview of JavaScript - Copy (12:11)
090 The JavaScript Engine and Runtime (13:47)
091 Execution Contexts and The Call Stack (17:45)
092 Scope and The Scope Chain (25:37)
093 Scoping in Practice (21:14)
094 Variable Environment_ Hoisting and The TDZ (11:01)
095 Hoisting and TDZ in Practice (14:42)
096 The this Keyword (6:31)
097 The this Keyword in Practice (13:12)
098 Regular Functions vs. Arrow Functions (18:04)
099 Primitives vs. Objects (Primitive vs. Reference Types) (16:06)
100 Primitives vs. Objects in Practice (14:57)

09 Data Structures, Modern Operators and Strings

101 Section Intro (0:54)
103 Destructuring Arrays (19:33)
104 Destructuring Objects (19:46)
105 The Spread Operator (...) (21:26)
106 Rest Pattern and Parameters (19:01)
107 Short Circuiting (&& and __) (15:55)
108 The Nullish Coalescing Operator (__) (3:32)
109 Logical Assignment Operators (11:40)
110 Coding Challenge #1 (14:57)
111 Looping Arrays_ The for-of Loop (7:20)
112 Enhanced Object Literals (7:02)
113 Optional Chaining (_.) (16:10)
114 Looping Objects_ Object Keys, Values, and Entries (10:09)
115 Coding Challenge #2 (14:30)
116 Sets (13:18)
117 Maps_ Fundamentals (14:03)
118 Maps_ Iteration (12:41)
119 Summary_ Which Data Structure to Use_ (9:40)
120 Coding Challenge #3 (9:37)
121 Working With Strings - Part 1 (16:54)
122 Working With Strings - Part 2 (21:46)
123 Working With Strings - Part 3 (21:41)
124 Coding Challenge #4 (15:15)
125 String Methods Practice (16:36)

10 A Closer Look at Functions

126 Section Intro
128 Default Parameters (9:17)
129 How Passing Arguments Works_ Value vs. Reference (13:36)
130 First-Class and Higher-Order Functions (5:24)
131 Functions Accepting Callback Functions (15:20)
132 Functions Returning Functions (6:37)
133 The call and apply Methods (16:51)
134 The bind Method (21:33)
135 Coding Challenge #1 (18:47)
136 Immediately Invoked Function Expressions (IIFE) (7:53)
137 Closures (19:48)
138 More Closure Examples (15:30)
139 Coding Challenge #2 (5:25)

11 Working With Arrays

140 Section Intro (0:53)
142 Simple Array Methods (16:37)
143 The new at Method (6:05)
144 Looping Arrays_ forEach (13:46)
145 forEach With Maps and Sets (5:32)
146 PROJECT_ _Bankist_ App (9:49)
147 Creating DOM Elements (18:44)
148 Coding Challenge #1 (8:31)
149 Data Transformations_ map, filter, reduce
150 The map Method (15:40)
151 Computing Usernames (12:15)
152 The filter Method (6:19)
153 The reduce Method (20:57)
154 Coding Challenge #2 (9:56)
155 The Magic of Chaining Methods (19:40)
156 Coding Challenge #3 (3:57)
157 The find Method (6:47)
158 Implementing Login (24:18)
159 Implementing Transfers (20:54)
160 The findIndex Method (12:35)
161 some and every (15:11)
162 flat and flatMap (9:32)
163 Sorting Arrays (21:55)
164 More Ways of Creating and Filling Arrays (20:33)
165 Summary_ Which Array Method to Use_ (6:24)
166 Array Methods Practice (32:21)
167 Coding Challenge #4 (23:48)

12 Numbers, Dates, Intl and Timers

168 Section Intro (0:51)
170 Converting and Checking Numbers (16:46)
171 Math and Rounding (18:14)
172 The Remainder Operator (10:56)
173 Numeric Separators (6:57)
174 Working with BigInt (11:18)
175 Creating Dates (12:55)
176 Adding Dates to _Bankist_ App (22:21)
177 Operations With Dates (15:27)
178 Internationalizing Dates (Intl) (17:18)
179 Internationalizing Numbers (Intl) (19:06)
180 Timers_ setTimeout and setInterval (13:54)
181 Implementing a Countdown Timer (28:31)

13 Advanced DOM and Events

182 Section Intro (1:04)
184 PROJECT_ _Bankist_ Website (8:49)
185 How the DOM Really Works (10:36)
186 Selecting, Creating, and Deleting Elements (20:28)
187 Styles, Attributes and Classes (21:54)
188 Implementing Smooth Scrolling (15:56)
189 Types of Events and Event Handlers (10:33)
190 Event Propagation_ Bubbling and Capturing (5:03)
191 Event Propagation in Practice (17:46)
192 Event Delegation_ Implementing Page Navigation (18:49)
193 DOM Traversing (14:35)
194 Building a Tabbed Component (24:08)
195 Passing Arguments to Event Handlers (18:43)
196 Implementing a Sticky Navigation_ The Scroll Event (7:55)
197 A Better Way_ The Intersection Observer API (24:01)
198 Revealing Elements on Scroll (12:39)
199 Lazy Loading Images (18:30)
200 Building a Slider Component_ Part 1 (23:16)
201 Building a Slider Component_ Part 2 (19:36)
202 Lifecycle DOM Events (9:26)
203 Efficient Script Loading_ defer and async (13:30)

14 Object-Oriented Programming (OOP) With JavaScript

204 Section Intro (1:07)
206 What is Object-Oriented Programming_ (20:55)
207 OOP in JavaScript (10:08)
208 Constructor Functions and the new Operator (14:19)
209 Prototypes (14:36)
210 Prototypal Inheritance and The Prototype Chain (10:59)
211 Prototypal Inheritance on Built-In Objects (14:47)
212 Coding Challenge #1 (7:27)
213 ES6 Classes (12:58)
214 Setters and Getters (13:15)
215 Static Methods (6:24)
216 Object.create (10:56)
217 Coding Challenge #2 (6:00)
218 Inheritance Between _Classes__ Constructor Functions (21:04)
219 Coding Challenge #3 (10:38)
220 Inheritance Between _Classes__ ES6 Classes (10:46)
221 Inheritance Between _Classes__ Object.create (8:53)
222 Another Class Example (10:44)
223 Encapsulation_ Protected Properties and Methods (6:47)
224 Encapsulation_ Private Class Fields and Methods (16:11)
225 Chaining Methods (4:43)
226 ES6 Classes Summary (7:12)
227 Coding Challenge #4 (8:54)

15 Mapty App_ OOP, Geolocation, External Libraries, and More!

228 Section Intro (0:58)
230 Project Overview (5:03)
231 How to Plan a Web Project (17:41)
232 Using the Geolocation API (8:16)
233 Displaying a Map Using Leaflet Library (13:48)
234 Displaying a Map Marker (19:54)
235 Rendering Workout Input Form (16:42)
236 Project Architecture (9:28)
237 Refactoring for Project Architecture (24:05)
238 Managing Workout Data_ Creating Classes (16:18)
239 Creating a New Workout (34:06)
240 Rendering Workouts (24:19)
241 Move to Marker On Click (16:32)
242 Working with localStorage (25:31)
243 Final Considerations (5:41)

16 Asynchronous JavaScript_ Promises, Async_Await, and AJAX

244 Section Intro (0:55)
246 Asynchronous JavaScript, AJAX and APIs (17:58)
248 Our First AJAX Call_ XMLHttpRequest (19:10)
249 [OPTIONAL] How the Web Works_ Requests and Responses (13:38)
250 Welcome to Callback Hell (13:53)
251 Promises and the Fetch API (9:25)
252 Consuming Promises (9:24)
253 Chaining Promises (9:14)
254 Handling Rejected Promises (16:13)
255 Throwing Errors Manually (15:24)
256 Coding Challenge #1 (16:32)
257 Asynchronous Behind the Scenes_ The Event Loop (17:53)
258 The Event Loop in Practice (9:15)
259 Building a Simple Promise (20:17)
260 Promisifying the Geolocation API (13:26)
261 Coding Challenge #2 (15:53)
262 Consuming Promises with Async_Await (15:06)
263 Error Handling With try...catch (10:22)
264 Returning Values from Async Functions (14:39)
265 Running Promises in Parallel (10:56)
266 Other Promise Combinators_ race, allSettled and any (13:20)
267 Coding Challenge #3 (17:31)

17 Modern JavaScript Development_ Modules, Tooling, and Functional

268 Section Intro (0:47)
270 An Overview of Modern JavaScript Development (6:39)
271 An Overview of Modules in JavaScript (15:01)
272 Exporting and Importing in ES6 Modules (22:39)
273 Top-Level await (ES2022) (14:45)
274 The Module Pattern (10:20)
275 CommonJS Modules (4:25)
276 A Brief Introduction to the Command Line (12:27)
277 Introduction to NPM (18:40)
278 Bundling With Parcel and NPM Scripts (21:39)
279 Configuring Babel and Polyfilling (18:03)
280 Review_ Writing Clean and Modern JavaScript (10:26)
281 Let's Fix Some Bad Code_ Part 1 (23:20)
282 Declarative and Functional JavaScript Principles
283 Let's Fix Some Bad Code_ Part 2 (38:09)

18 Forkify App_ Building a Modern Application

284 Section Intro (0:57)
286 Project Overview and Planning (I)
288 Loading a Recipe from API
289 Rendering the Recipe (22:23)
290 Listening For load and hashchange Events (11:02)
291 The MVC Architecture (16:32)
292 Refactoring for MVC (38:53)
293 Helpers and Configuration Files (21:23)
294 Event Handlers in MVC_ Publisher-Subscriber Pattern (15:08)
295 Implementing Error and Success Messages (11:34)
296 Implementing Search Results - Part 1 (25:47)
297 Implementing Search Results - Part 2 (28:15)
298 Implementing Pagination - Part 1 (12:18)
299 Implementing Pagination - Part 2
300 Project Planning II
301 Updating Recipe Servings (26:40)
302 Developing a DOM Updating Algorithm (34:22)
303 Implementing Bookmarks - Part 1 (26:00)
304 Implementing Bookmarks - Part 2 (18:31)
305 Storing Bookmarks With localStorage
306 Project Planning III
307 Uploading a New Recipe - Part 1 (17:43)
308 Uploading a New Recipe - Part 2 (40:37)
309 Uploading a New Recipe - Part 3
310 Wrapping Up_ Final Considerations (14:45)

19 Setting Up Git and Deployment

311 Section Intro (0:44)
313 Simple Deployment With Netlify (11:18)
314 Setting Up Git and GitHub (7:39)
315 Git Fundamentals (19:36)
316 Pushing to GitHub (9:31)
317 Setting Up Continuous Integration With Netlify (10:07)

20 The End!

318 Where to Go from Here (3:00)

Teach online with

193 DOM Traversing

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock