Learn DOM Manipulation with Easy Modern JavaScript

Description

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This is what we are going to use when we work with JavaScript and interact in any way dynamically with the document. When one uses Angular, Vue, React, or any other library or framework to create modern web applications, the DOM is what these use under the hood. This course will make you stand out as a JavaScript developer. You will get a clear understanding of the DOM fundamentals. The course will help you understand what the DOM is and how to interact dynamically with an HTML document. We will build user interfaces using modern and easy JavaScript with classes, private attributes, and DOM APIs. Learn optimization techniques and apply easy bundling techniques that include dynamic CSS loading. We will search for documentation; memorizing all the DOM interfaces is not required. While building the game application, you will understand how to interact with the DOM and user input through event listeners.

What You Will Learn

Understand what DOM is and how to interact dynamically with an HTML document
Learn interactive User Interfaces(UI) development
Learn optimization techniques
Apply easy bundling techniques that include dynamic CSS loading
Interact with the DOM and user input through event listeners
Enhance object-oriented programming concepts and skills

Audience

This course is for coding bootcamp graduates, computer science graduates, beginner JavaScript students, intermediate JavaScript students, and advanced JavaScript students. It is a beginner and intermediate-friendly course.

Approach

This is a complete hands-on course where you will be building an interactive game application using HTML, DOM, and modern JavaScript.

Key Features

Use modern JavaScript with classes, private attributes, and DOM APIs to build user interfaces * Build an interactive game that will help you understand the fundamentals of the Document Object Model * Learn to optimize and bundle your code

Github Repo

https://github.com/PacktPublishing/Learn-DOM-Manipulation-with-Easy-Modern-JavaScript

About the Author

Juan Lizarazo

Juan Lizarazo is a software engineer based in Salt Lake City, Utah, with a focused background in web app development, cloud, leadership, team scaling, and distributed applications. He is also a software engineering instructor, who has experience in teaching computer science-related topics such as data structures and algorithms to students all over the US. He has made contributions to open-source, talked at conferences, and answered questions on Stack Overflow.

Course Outline

1. Welcome

2. DOM Fundamentals

3. Code DOM Adventure

4. Creating elements

5. Dynamic CSS

6. Profiling the pixel pipeline

7. Animations using DOM changes

8. Planning DOM changes with a state model

9. Easy bundling

10. DOM updates with basic state driven development

11. The player, Interacting with user input

12. Interactive DOM, breaking walls

13. Portal to exit the game

14. Animating all the things

15. DOM sound effects