Unit 01: Course Introduction |
|
What is the DOM? |
|
00:02:00 |
|
Your first DOM update |
|
00:05:00 |
|
Course Project: Code DOM Adventure |
|
00:04:00 |
Unit 02: DOM Fundamentals |
|
HTML and the DOM |
|
00:05:00 |
|
DOM standards |
|
00:05:00 |
|
The BOM |
|
00:04:00 |
|
The CSSOM |
|
00:03:00 |
|
The tree (Data structure) |
|
00:05:00 |
|
The DOM tree |
|
00:11:00 |
|
The DOM and JavaScript |
|
00:01:00 |
Unit 03: Code DOM Adventure |
|
App architecture |
|
00:08:00 |
|
Challenge solution: The exit screen |
|
00:04:00 |
|
App skeleton |
|
00:05:00 |
|
The splash screen file |
|
00:03:00 |
|
Download our asset kit now! |
|
00:03:00 |
|
Including the assets |
|
00:03:00 |
Unit 04: Creating elements |
|
Wiring the splash screen element |
|
00:02:00 |
|
Creating elements at runtime |
|
00:03:00 |
|
Appending HTML strings width append() |
|
00:02:00 |
|
Appending nodes with append or append Child |
|
00:03:00 |
|
Script order matters |
|
00:04:00 |
Unit 05: Dynamic CSS |
|
Specifying classes to elements |
|
00:04:00 |
|
Working with static styles |
|
00:04:00 |
|
Defining styles at runtime |
|
00:04:00 |
|
Querying the DOM to find elements |
|
00:05:00 |
Unit 06: Profiling the pixel pipeline |
|
The pixel pipeline |
|
00:02:00 |
|
Identifying bad practices |
|
00:04:00 |
|
Profiling runtime performance |
|
00:04:00 |
|
Batching DOM updates with document fragments |
|
00:05:00 |
|
Too many nodes |
|
00:04:00 |
Unit 07: Animation using DOM changes |
|
Removing nodes from the DOM |
|
00:06:00 |
|
The animation frames |
|
00:06:00 |
|
Our animate method |
|
00:04:00 |
|
Our working animation! |
|
00:06:00 |
|
Stopping the animation |
|
00:08:00 |
Unit 08: Planning DOM changes with a state model |
|
Let’s build the level! |
|
00:02:00 |
|
2. Our state model to control the DOM from state. |
|
00:10:00 |
|
Normalizing attributes |
|
00:04:00 |
|
Our level class |
|
00:04:00 |
|
Arrays, references and non-iterable empty slots |
|
00:05:00 |
|
Building our state with an ugly oneliner |
|
00:05:00 |
|
Write code for humans and normalize your code |
|
00:05:00 |
|
Rendering the level element |
|
00:05:00 |
|
Things are getting messy |
|
00:06:00 |
Unit 09: Easy bundling |
|
Easy bundling |
|
00:06:00 |
|
Bundle with the start script |
|
00:01:00 |
|
Our dev server |
|
00:02:00 |
|
Let’s use DOMContentLoaded and ES Modules (ESM) |
|
00:07:00 |
|
Dynamic style elements with CSS as ESM imports |
|
00:04:00 |
Unit 10: DOM updates with basic state driven development |
|
Designing the shape of our state |
|
00:02:00 |
|
Initializing our state in preparation to render DOM elements |
|
00:05:00 |
|
DOM updates from state |
|
00:08:00 |
|
Updates to state are reflected in the DOM |
|
00:03:00 |
|
Modeling and render our chip walls |
|
00:06:00 |
Unit 11: The player, Interacting with user input |
|
The player – Tech approach |
|
00:02:00 |
|
Rendering the player with the DOM |
|
00:07:00 |
|
Box model and global styles |
|
00:06:00 |
|
Manipulating inline styles with the DOM |
|
00:04:00 |
|
Moving the player by changing its state |
|
00:06:00 |
|
DOM keyboard event listeners |
|
00:07:00 |
|
Mapping and filtering DOM events data |
|
00:04:00 |
|
Can the player move? – Tech approach |
|
00:03:00 |
|
Preventing overlapping DOM elements |
|
00:12:00 |
|
Prepare interactive frames |
|
00:08:00 |
|
Resetting className and adding interactive frames on DOM events |
|
00:06:00 |
|
Update frames without moving the element on DOM events |
|
00:03:00 |
Unit 12: Interactive DOM, breaking walls |
|
Adding random DOM elements |
|
00:06:00 |
|
DOM events when pressing the space key |
|
00:05:00 |
|
Creating elements on DOM events |
|
00:05:00 |
|
z-index manifest |
|
00:04:00 |
|
Dynamic element IDs with the DOM |
|
00:07:00 |
|
Interacting with other elements using the state model |
|
00:06:00 |
|
Remove surrounding walls |
|
00:04:00 |
Unit 13: Portal to exit the game |
|
Adding the portal to the screen |
|
00:07:00 |
|
Random elements on the screen |
|
00:05:00 |
|
Grouping inline CSS DOM updates |
|
00:03:00 |
|
Exiting the game, when two elements cross paths |
|
00:04:00 |
|
Challenge, your turn to build the exit screen |
|
00:03:00 |
|
Challenge solution, my turn to build the exit screen |
|
00:04:00 |
|
Hiding the portal behind a wall |
|
00:05:00 |
|
Removing DOM event listeners |
|
00:04:00 |
Unit 14: Animating all the things |
|
Rendering the splash screen |
|
00:04:00 |
|
Swapping screens |
|
00:02:00 |
|
Animating the portal |
|
00:04:00 |
|
CSS kit – animations |
|
00:03:00 |
|
Request animation frame and delaying animations |
|
00:09:00 |
|
Animating with a parent css class |
|
00:03:00 |
|
Old TV effect |
|
00:02:00 |
|
Animating with delayed animation |
|
00:11:00 |
|
Optimizing frames |
|
00:03:00 |
|
Final frame optimizations |
|
00:04:00 |
Unit 15: DOM Sound effects |
|
Dynamic audio elements |
|
00:07:00 |
|
Interactive sound effects with DOM events |
|
00:04:00 |
|
Delayed audio effects with callbacks and DOM events |
|
00:04:00 |
|
Final lecture, final sound effect! exiting the game |
|
00:03:00 |
Assignment |
|
Assignment -Learn DOM Manipulation with JavaScript |
|
2 weeks, 1 day |
Order Your Certificate |
|
Order Your Certificate QLS |
|
00:00:00 |