DOM 2023 - Using the DOM and JavaScript to Build Dynamic Websites

Description

In the first half of the course, we will cover everything you need to start coding dynamic sites by yourself. It gives you the sound fundamentals and essential practical regarding the DOM. You will emerge from part 1 with a basic understanding and practical experience. It will take you to the point where you will understand what the DOM is, why we need it, how to access it, where to find it, and how to manipulate it. By the end of part 1, you will have learned about front-end web development by mastering the Document Object Model. The second half of the course provides a whole different world of fun with amazing practical examples that will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end web development. By the end of part 2, you will have learned more about front-end web development by working with events in the Document Object Model. By the end of this course, you will be able to 'speak' and 'walk' DOM by gaining an understanding of how you can manipulate it in meaningful and practical ways. All the resources for this course are available at https://github.com/PacktPublishing/DOM-2022---Using-the-DOM-and-JavaScript-to-Build-Dynamic-Websites

What You Will Learn

Explore different environments of JavaScript
Understand the Document Object Model
Learn the different types of events (such as keyup, mousemove, touch, and so on)
Learn to stop events from traversing up or down the DOM
Learn to access elements and remove items from the DOM
Explore object hierarchy

Audience

It makes no difference where you are on your web development path. This course is appropriate for all skill levels.

If you want to become a full-stack web developer or construct dynamic, fascinating, and acclaimed websites, this course is for you.

Basic HTML, CSS, and JavaScript will be useful, but they are not required.

Approach

Theories are theories. However, nothing beats sitting in front of your computer and typing code. That's why, during this course, we will be coding, laughing, and ripping our hair out together as we create real-world websites and exercises.

This course walks you through the DOM piece by piece using actual examples. We also make use of the most up-to-date JavaScript and browser technologies (such as the new delete API) to keep you ahead of the competition.

Key Features

Learn how your website can come alive with actions, such as zitsy changes on click, color wheel, drop down, response on form submissions, and much more * Build awesome dynamic front-end applications * Become a pro at listening for events that are fired

Github Repo

https://github.com/PacktPublishing/DOM-2022---Using-the-DOM-and-JavaScript-to-Build-Dynamic-Websites

About the Author

SkillZone .

SkillZone has the simple goal of teaching complicated concepts in an effortless way. They are Johannesburg-based and create quality, easy-to-understand eLearning solutions. In today's rapidly evolving workplace, it is imperative to make sure you have the skills and expertise required to succeed. The content we offer ensures that the learning materials and delivery approach are aligned to meet intended outcomes and address your specific training needs without covering topics that may be unnecessary or irrelevant. The author's goal is to help you with in-depth learning whilst avoiding the pitfalls that he discovered the hard way. He is enthusiastic and has a lot of fun teaching and brings his personality and charisma to the teaching platform to benefit his students the most.

Course Outline

1. Part 1 - Introduction

2. Part 1 - JavaScript vs DOM

3. Part 1 - Accessing the DOM

4. Part 1 - Nodes

5. Part 1 - Traversing the DOM

6. Part 1 - Creating, Removing and Cloning DOM Elements

7. Part 1 - Where to next?

8. Part 2 - Introduction to Events

9. Part 2 - Different types of events

10. Part 2 - Event Challenges

11. Part 2 - Object and node hierarchy

12. Part 2 - Capturing and Bubbling

13. Part 2 - Event Delegation and Challenges

14. Part 2 - Website Project - A Shopping List

15. Part 2 - Outro