*UPDATED* DOM 2024 Build Dynamic Websites JavaScript Part 2
*UPDATED* DOM 2024 Build Dynamic Websites JavaScript Part 2, available at $109.99, has an average rating of 4.43, with 137 lectures, 5 quizzes, based on 484 reviews, and has 3194 subscribers.
You will learn about Master front end web development TODAY Master the Document Object Model (DOM) *Download lectures (for offline viewing) Learn how your website can come alive with actions, like zitsy changes on click, color wheels, drop-downs, response on form submissions and much more Listen for different events (like click events, input events, focus events, and more!!!) Practical – build awesome dynamic front-end applications with me I am here to support you, step-by-step What is a DOM event and why its so important to understand Become a pro at listening for events that are fired What a callback function is The different types of events (such as keyup, mousemove, touch, etc.) JavaScript objects vs DOM objects Host objects vs native objects Object hierarchy What are DOM extensions Event Capturing vs Event Bubbling Master the skill of listening for events at various stages (capturing or bubbling) How to stop events from traversing up or down the DOM Event delegation From beginner to expert (advanced +) You will emerge an expert Gives you depth of knowledge to boost your ability and confidence This course is ideal for individuals who are Anyone who has completed my Build Dynamic Websites with JavaScript – D• Anyone who has completed my Build Dynamic Websites with JavaScript – DOM 1 course. This is course 2 of a 2-part series. This is course 2 of a 2-part series or Anyone who has completed my JavaScript Complete Grandmaster course or Web Developments Secrets Course or A great course if you have some basic knowledge about what the DOM is, but you want to dig deeper and understands DOM events in more detail or YES: This course is for beginners. Aimed at people new to the world of web development. However, having completed Part 1 of this 2-part series is highly recommended or NO: This course is NOT only for beginners. It is a complete beginner to advanced master course that is suitable for intermediates who know the basics and have an idea the DOM, but want to dig deeper to know its inner workings. Experienced students sometimes prefer to skip a section that they are very familiar with or YES: This course is for someone wanting to be a professional, to be expert and confident in the entire front-end web development process or Those who want to learn modern coding without third party libraries and frameworks or Those interested in building their own frameworks, or being better able to learn from the source code of other well-known frameworks and libraries or Those who have some knowledge of web development, but little knowledge about how it works behind the scenes, and how to practically implement best practices in their websites It is particularly useful for Anyone who has completed my Build Dynamic Websites with JavaScript – D• Anyone who has completed my Build Dynamic Websites with JavaScript – DOM 1 course. This is course 2 of a 2-part series. This is course 2 of a 2-part series or Anyone who has completed my JavaScript Complete Grandmaster course or Web Developments Secrets Course or A great course if you have some basic knowledge about what the DOM is, but you want to dig deeper and understands DOM events in more detail or YES: This course is for beginners. Aimed at people new to the world of web development. However, having completed Part 1 of this 2-part series is highly recommended or NO: This course is NOT only for beginners. It is a complete beginner to advanced master course that is suitable for intermediates who know the basics and have an idea the DOM, but want to dig deeper to know its inner workings. Experienced students sometimes prefer to skip a section that they are very familiar with or YES: This course is for someone wanting to be a professional, to be expert and confident in the entire front-end web development process or Those who want to learn modern coding without third party libraries and frameworks or Those interested in building their own frameworks, or being better able to learn from the source code of other well-known frameworks and libraries or Those who have some knowledge of web development, but little knowledge about how it works behind the scenes, and how to practically implement best practices in their websites.
Enroll now: *UPDATED* DOM 2024 Build Dynamic Websites JavaScript Part 2
Summary
Title: *UPDATED* DOM 2024 Build Dynamic Websites JavaScript Part 2
Price: $109.99
Average Rating: 4.43
Number of Lectures: 137
Number of Quizzes: 5
Number of Published Lectures: 137
Number of Published Quizzes: 5
Number of Curriculum Items: 142
Number of Published Curriculum Objects: 142
Original Price: $199.99
Quality Status: approved
Status: Live
What You Will Learn
- Master front end web development TODAY
- Master the Document Object Model (DOM)
- *Download lectures (for offline viewing)
- Learn how your website can come alive with actions, like zitsy changes on click, color wheels, drop-downs, response on form submissions and much more
- Listen for different events (like click events, input events, focus events, and more!!!)
- Practical – build awesome dynamic front-end applications with me
- I am here to support you, step-by-step
- What is a DOM event and why its so important to understand
- Become a pro at listening for events that are fired
- What a callback function is
- The different types of events (such as keyup, mousemove, touch, etc.)
- JavaScript objects vs DOM objects
- Host objects vs native objects
- Object hierarchy
- What are DOM extensions
- Event Capturing vs Event Bubbling
- Master the skill of listening for events at various stages (capturing or bubbling)
- How to stop events from traversing up or down the DOM
- Event delegation
- From beginner to expert (advanced +)
- You will emerge an expert
- Gives you depth of knowledge to boost your ability and confidence
Who Should Attend
- Anyone who has completed my Build Dynamic Websites with JavaScript – D• Anyone who has completed my Build Dynamic Websites with JavaScript – DOM 1 course. This is course 2 of a 2-part series. This is course 2 of a 2-part series
- Anyone who has completed my JavaScript Complete Grandmaster course or Web Developments Secrets Course
- A great course if you have some basic knowledge about what the DOM is, but you want to dig deeper and understands DOM events in more detail
- YES: This course is for beginners. Aimed at people new to the world of web development. However, having completed Part 1 of this 2-part series is highly recommended
- NO: This course is NOT only for beginners. It is a complete beginner to advanced master course that is suitable for intermediates who know the basics and have an idea the DOM, but want to dig deeper to know its inner workings. Experienced students sometimes prefer to skip a section that they are very familiar with
- YES: This course is for someone wanting to be a professional, to be expert and confident in the entire front-end web development process
- Those who want to learn modern coding without third party libraries and frameworks
- Those interested in building their own frameworks, or being better able to learn from the source code of other well-known frameworks and libraries
- Those who have some knowledge of web development, but little knowledge about how it works behind the scenes, and how to practically implement best practices in their websites
Target Audiences
- Anyone who has completed my Build Dynamic Websites with JavaScript – D• Anyone who has completed my Build Dynamic Websites with JavaScript – DOM 1 course. This is course 2 of a 2-part series. This is course 2 of a 2-part series
- Anyone who has completed my JavaScript Complete Grandmaster course or Web Developments Secrets Course
- A great course if you have some basic knowledge about what the DOM is, but you want to dig deeper and understands DOM events in more detail
- YES: This course is for beginners. Aimed at people new to the world of web development. However, having completed Part 1 of this 2-part series is highly recommended
- NO: This course is NOT only for beginners. It is a complete beginner to advanced master course that is suitable for intermediates who know the basics and have an idea the DOM, but want to dig deeper to know its inner workings. Experienced students sometimes prefer to skip a section that they are very familiar with
- YES: This course is for someone wanting to be a professional, to be expert and confident in the entire front-end web development process
- Those who want to learn modern coding without third party libraries and frameworks
- Those interested in building their own frameworks, or being better able to learn from the source code of other well-known frameworks and libraries
- Those who have some knowledge of web development, but little knowledge about how it works behind the scenes, and how to practically implement best practices in their websites
Let me share my new front-end web development secrets with you
Mastering the DOM will equip you to become an awesome front-end web programmer. Learn how to implement your creative, different and dynamic ideas into your website. Master front-end development and you’re half way to becoming a full stack web developer. Take control through understanding. Delivering an interactive web experience is challenging. In this advanced course, we take a deep-dive into DOM events. What are they? Why are they important? The different types of events we can listen to? Where do they come from? What is event bubbling and event capturing, and how does it help? By understanding these questions, and more, you’ll be able to access the DOM and better yet, manipulate it! In other words, you will be able to create dynamic apps that improve user engagement and experience.
What this course covers?
This course is Course 2 of 2
This course is the second and final course of a 2-part program. The reason I have done this is that Course 1 provides everything you need to start coding dynamic sites by yourself. It gives you the sound fundamentals and practicals regarding the DOM. It can be taken alone (you don’t have to do both courses) to achieve your goals. You will emerge from Course 2 with a solid understanding and practical experience of working with events in the DOM. Course 2 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.
In this course you’ll learn more about front-end web development, by working with events in the Document Object Model.
Why this course? Why do you need to know about events in the DOM?
If you’ve ever wondered how you can add animation (and life) to a page, then you need to understand how events work in the DOM. We use the DOM to allow users to interact with our app. It doesn’t have to be annoying interaction either – simple things like giving the user the ability to ADD/EDIT/DELETE/UPDATE contents on your page, for example, requires interaction with the DOM.
This course starts off with understanding what an event is. What are the 2 most important things when it comes to events? What is the difference between an event listener and an event handler? From there, you’ll start exploring the different ways you can add events to your code. You’ll learn simple, yet very powerful strategies to ‘listen’ for events on your web page and then interact with the page when those events happen.
We don’t stop here, but get into more advanced things like learning about how an event travels in the DOM (capturing vs bubbling), which leads us to an even more important topic of … wait for it … event delegation. And this is only the tip of the iceberg. We go into many other things like DOM extensions, object hierarchy and a bunch of other stuff.
Knowledge of the DOM is incredibly useful for understanding how your webpage can be improved.
By the end of this course, you’ll be able to “speak” and “walk” DOM by gaining an understanding of how you can manipulate it in meaningful and practical ways. We dig deeper in every lecture, and this course has many bonus lectures which extend your knowledge base and test your skills.
Through practical examples, this course helps you understand the DOM piece by piece. And we use the latest and best features of JavaScript and browsers (like the new classList API) along the way so you can stay ahead of the pack.
*** An advanced Web Development DOM course on Udemy ***
Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how events work on your website behind the scenes. If you’re wanting to become a full stack developer, you need to know how to work with various events in the DOM. You need to know what an event is, how to listen for it, and more importantly, how to react to events when they happen.
I want you to become a successful front-end programming Grandmaster.
I want you to be able to apply what your learn in this course to your webpage.
This course is perfect for you.
Description
Hi there, my name is Clyde and together we’re going to learn how successful web developers can create whizbang websites that are dynamic and engaging!
The root to understanding how to be a professional front-end web developer is understanding the Document Object Model and applying it to practical situations. We’re going to practice and learn and emerge confident to tackle any challenges modern programs and websites throw at us.
After completing a few university degrees, and post graduate studies, I developed a fascination for web design and software languages. For several years I have immersed myself in this. I spent a fair bit on top courses and went on to apply the knowledge practically. I recognized gaps in some of the courses I’ve taken and hence my course teaches what I wish I was taught. My intention is to share the knowledge with you in an easy to follow manner, so that we can benefit together. You benefit form learning, and I from sharing in your success.
This course is for beginners and for intermediates.
A unique view
Understanding the DOM is a vast topic. To get you up to speed, I’ve spent months thinking about where to focus content and how to deliver it to you in the best possible way.
You will learn “why” things work and not just “how”. Understanding advanced topics within the DOM (like event types, capturing, bubbling, delegation, host vs native objects, etc.) is important as it will give you infinite possibilities. Armed with this knowledge, you’ll be able to create applications that update the data of the page without needing a refresh. You will be able to create apps that are customizable by the user. You can even allow the user to drag, move, and delete elements. Can you begin to see how important the DOM is?
How is this course different?
There are lots of great courses that focus on web development. Pity they never get into the detail about how the Document Object Model works behind the scenes – a skill that every full-stack developer needs to master.
In this Part 2 course, I focus on the more advanced topics of true web development in the front end. This includes understanding what events are, looking at object hierarchy, understanding the different event types, what capturing and bubbling is, and how you can use the concept of event bubbling to streamline your code and make your job of creating dynamic websites easier.
Practice makes perfect
Theory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this course.
I love practical examples, which is why we build simple pages and analyze the DOM together.
This course is FULL of practical examples, challenges, and we even build an entire project website from start-to-finish (yep, this includes building the HTML and CSS together too).
Is this course for you?
Absolutely.
It doesn’t matter where you are in your web development journey. It’s suitable for all levels.
Still unsure? If you fit in any of these categories then this course is perfect for you:
Student #1: You want to dabble in the world of programming. Learning the fundamentals of HTTP, CSS and how you can use JavaScript to change a webpage is the starting point to becoming a full-stack developer.
Student #2: You want to know how successful developers build dynamic websites that engage with the user and put them ahead of the competition.
Student #3: You want to gain a solid understanding of front-end web development.
Student #4: You want to start using backend frameworks like Node.js, but want to first understand how JavaScript is used on the front-end of your webpage.
Student #5: You know a little what the Document Object Model is, but have little knowledge about how events work behind the scenes, and how to practically implement knowing about these events in your own applications.
Student #6: You have taken other courses in web development but just don’t feel like you’ve grasped front-end development.
WHY START NOW?
Right this second, your competitors are learning how to become better web developers.
Web development is a blazing hot topic at the moment. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.
Lets get started!
What do you get?
-
Lifetime access to all tutorial videos. No fees or monthly subscriptions.
-
Q&A support.
-
Quizzes and challenges to help you learn.
-
A final project which we build together.
-
I’ve allowed you to download all of my lectures for offline viewing.
Let’s get excited about becoming a professional web developer, and to be able to confidently apply it to your own websites.
See you in the lectures.
Course Curriculum
Chapter 1: Introduction to Events
Lecture 1: Introduction – what is an event
Lecture 2: Before we begin … take a step back
Lecture 3: The 2 most important things when it comes to events
Lecture 4: What is the difference between an Event Listener and Event Handler
Lecture 5: Inline Event Listeners – brief introduction
Lecture 6: Do we need to wrap our attribute values in quotation marks?
Lecture 7: Why is it important to learn about inline event listeners?
Lecture 8: Inline Properties – brief introduction
Lecture 9: addEventListener() method – brief introduction
Lecture 10: Summary – the 3 ways to add an event listener to HTML elements
Lecture 11: 3 ways to add an event listener
Lecture 12: A quick word on events
Lecture 13: Are event listeners heavy on performance?
Lecture 14: Inline Event Listeners – detailed overview
Lecture 15: Inline Event Listeners – TEST introduction (part 1 of 3)
Lecture 16: Inline Event Listeners – TEST setup (part 2 of 3)
Lecture 17: Inline Event Listeners – TEST solution (part 3 of 3)
Lecture 18: Inline Properties – detailed overview
Lecture 19: Inline event listeners are not recommended
Lecture 20: HTML attributes vs DOM properties
Lecture 21: Inline Properties – TEST introduction (part 1 of 3)
Lecture 22: Inline Properties – TEST setup (part 2 of 3)
Lecture 23: Inline Properties – TEST solution (part 3 of 3)
Lecture 24: Event handling the better way
Lecture 25: addEventListener() method – detailed overview
Lecture 26: Callback functions – a quick overview
Lecture 27: Callback function – don't get intimidated
Lecture 28: addEventListener – TEST introduction (part 1 of 3)
Lecture 29: Circle Challenge – what I want you to do
Lecture 30: addEventListener – TEST setup (part 2 of 3)
Lecture 31: addEventListener – TEST solution (part 3 of 3)
Lecture 32: Can you pass arguments into the addEventListener() callback function?
Lecture 33: Improving our code
Lecture 34: EXTRA lecture – 3 ways to define a color
Lecture 35: EXTRA lecture – digits, bytes and hexadecimal format
Lecture 36: Digits, bytes and hexadecimal recap
Lecture 37: EXTRA lecture – toString() method
Lecture 38: What I didn't mention
Chapter 2: Different types of events
Lecture 1: Section introduction
Lecture 2: Events are not only used with JavaScript
Lecture 3: Quick click event example – part 1 of 2
Lecture 4: Quick click event example – part 2 of 2
Lecture 5: Quick word on <forms>
Lecture 6: Event types
Lecture 7: Where are events from?
Lecture 8: Keydown event – example
Lecture 9: All events inherit from the Event interface
Lecture 10: Form events – intro
Lecture 11: Overview of what form I want you to build
Lecture 12: Form: building our page – HTML + CSS
Lecture 13: How to find forms and its default behavior
Lecture 14: Input event, focus event and copy/paste events
Lecture 15: Touch and Window events
Lecture 16: Quick recap – what are the most common event types?
Chapter 3: Event Challenges
Lecture 1: Quick word
Lecture 2: Challenge 1 – Introduction
Lecture 3: Challenge 1 – click image and display text
Lecture 4: Challenge 2 – Introduction
Lecture 5: Challenge 2 – Reveal text when mouse moves over image
Lecture 6: Challenge 2 – Create a black dot when mouse moves over image
Lecture 7: Challenge 2 – Dynamic dot movement and complete solution
Lecture 8: Challenge 3 – Mustache
Lecture 9: Challenge 3 – Placing a Mustache on an image
Lecture 10: You did it!
Chapter 4: Object and node hierarchy
Lecture 1: Section introduction
Lecture 2: JS objects vs DOM objects in the console
Lecture 3: Advanced topic
Lecture 4: Shadow DOM
Lecture 5: Host vs Native Objects
Lecture 6: The importance of understanding inheritance
Lecture 7: Finding the createElement() method
Lecture 8: Element node – object hierarchy
Lecture 9: Quick recap on object hierarchy
Lecture 10: What is DOM extension?
Lecture 11: Adding our own DOM extension – practical example
Lecture 12: Are DOM extensions a good thing?
Lecture 13: What are the problems with DOM extensions
Lecture 14: A note about DOM extensions
Chapter 5: Capturing and Bubbling
Lecture 1: Section introduction
Lecture 2: An event is not an isolated occurrence
Lecture 3: The 2 phases of an event – capturing & bubbling
Lecture 4: Why do events have both a capture phase and a bubble phase?
Lecture 5: How to listen to an event during the capturing phase
Lecture 6: Example – lets listen to an event during both phases
Lecture 7: Example – capturing and bubbling using the for … of loop
Lecture 8: Who cares about capturing vs bubbling?
Lecture 9: How to stop event capturing and event bubbling?
Lecture 10: Example of stopPropagation()
Chapter 6: Event Delegation and Challenges
Lecture 1: Event Delegation Introduction
Lecture 2: Box Challenge – intro
Instructors
-
Clyde Matthew
Things aren’t always #000000 and #FFFFFF
Rating Distribution
- 1 stars: 0 votes
- 2 stars: 1 votes
- 3 stars: 14 votes
- 4 stars: 88 votes
- 5 stars: 382 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Digital Marketing Foundation Course
- Google Shopping Ads Digital Marketing Course
- Multi Cloud Infrastructure for beginners
- Master Lead Generation: Grow Subscribers & Sales with Popups
- Complete Copywriting System : write to sell with ease
- Product Positioning Masterclass: Unlock Market Traction
- How to Promote Your Webinar and Get More Attendees?
- Digital Marketing Courses
- Create music with Artificial Intelligence in this new market
- Create CONVERTING UGC Content So Brands Will Pay You More
- Podcast: The top 8 ways to monetize by Podcasting
- TikTok Marketing Mastery: Learn to Grow & Go Viral
- Free Digital Marketing Basics Course in Hindi
- MailChimp Free Mailing Lists: MailChimp Email Marketing
- Automate Digital Marketing & Social Media with Generative AI
- Google Ads MasterClass – All Advanced Features
- Online Course Creator: Create & Sell Online Courses Today!
- Introduction to SEO – Basic Principles of SEO
- Affiliate Marketing For Beginners: Go From Novice To Pro
- Effective Website Planning Made Simple