*UPDATED* DOM 2024 Build Dynamic Websites, JavaScript Part 1
*UPDATED* DOM 2024 Build Dynamic Websites, JavaScript Part 1, available at $109.99, has an average rating of 4.59, with 112 lectures, 8 quizzes, based on 1141 reviews, and has 5095 subscribers.
You will learn about ***Download lectures (for offline viewing) What exactly is the Document Object Model (DOM) Why the Document Object Model is so important for web developers Learn how your website can come alive with actions, like zitsy changes on clicks, colour wheels, dropdowns, response on form submissions and much more Have fun mastering front-end website development Build awesome dynamic front-end applications Practical – build awesome dynamic front-end applications with me How your browser creates a DOM tree Become a pro at creating elements in the DOM The difference between the DOM, JavaScript and Python The different environments of JavaScript Parent, Sibling and Children DOM relationships The different types of Nodes The difference between an HTMLCollection and NodeLists How you can find the DOM How you can access elements in the DOM Master the skill of traversing (walking) up and down the DOM How to remove items from the DOM Cloning elements in the DOM From beginner to expert (advanced +) You will emerge an expert Gives you depth of knowledge to boost your ability and confidence I am here to support you, step-by-step The different environments of JavaScript Parent, Sibling and Children DOM relationships This course is ideal for individuals who are Anyone who has completed my JavaScript Complete Grandmaster course or Anyone who has completed my Web Developments Secrets course or YES: This course is for beginners. Aimed at people new to the world of web development. No previous JavaScript experience is necessary 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 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 wanting to start using frameworks (e.g. like Angular or Node) that are heavily reliant on JavaScript and knowing the process flow of front-end web development 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 JavaScript Complete Grandmaster course or Anyone who has completed my Web Developments Secrets course or YES: This course is for beginners. Aimed at people new to the world of web development. No previous JavaScript experience is necessary 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 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 wanting to start using frameworks (e.g. like Angular or Node) that are heavily reliant on JavaScript and knowing the process flow of front-end web development 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 1
Summary
Title: *UPDATED* DOM 2024 Build Dynamic Websites, JavaScript Part 1
Price: $109.99
Average Rating: 4.59
Number of Lectures: 112
Number of Quizzes: 8
Number of Published Lectures: 112
Number of Published Quizzes: 8
Number of Curriculum Items: 120
Number of Published Curriculum Objects: 120
Number of Practice Tests: 2
Number of Published Practice Tests: 2
Original Price: $199.99
Quality Status: approved
Status: Live
What You Will Learn
- ***Download lectures (for offline viewing)
- What exactly is the Document Object Model (DOM)
- Why the Document Object Model is so important for web developers
- Learn how your website can come alive with actions, like zitsy changes on clicks, colour wheels, dropdowns, response on form submissions and much more
- Have fun mastering front-end website development
- Build awesome dynamic front-end applications
- Practical – build awesome dynamic front-end applications with me
- How your browser creates a DOM tree
- Become a pro at creating elements in the DOM
- The difference between the DOM, JavaScript and Python
- The different environments of JavaScript
- Parent, Sibling and Children DOM relationships
- The different types of Nodes
- The difference between an HTMLCollection and NodeLists
- How you can find the DOM
- How you can access elements in the DOM
- Master the skill of traversing (walking) up and down the DOM
- How to remove items from the DOM
- Cloning elements in the DOM
- From beginner to expert (advanced +)
- You will emerge an expert
- Gives you depth of knowledge to boost your ability and confidence
- I am here to support you, step-by-step
- The different environments of JavaScript
- Parent, Sibling and Children DOM relationships
Who Should Attend
- Anyone who has completed my JavaScript Complete Grandmaster course
- Anyone who has completed my Web Developments Secrets course
- YES: This course is for beginners. Aimed at people new to the world of web development. No previous JavaScript experience is necessary
- 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 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 wanting to start using frameworks (e.g. like Angular or Node) that are heavily reliant on JavaScript and knowing the process flow of front-end web development
- 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 JavaScript Complete Grandmaster course
- Anyone who has completed my Web Developments Secrets course
- YES: This course is for beginners. Aimed at people new to the world of web development. No previous JavaScript experience is necessary
- 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 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 wanting to start using frameworks (e.g. like Angular or Node) that are heavily reliant on JavaScript and knowing the process flow of front-end web development
- 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
Understanding the DOM will equip you to become an awesome front-end 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.
How exactly does the browser model your HTML, CSS, and JavaScript? Where can we access this model? What can we do with this model? How can we change this model? By understanding these questions, you will 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 1 of 2
This course is the first 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 Course 2) to achieve your goals. You will emerge from Course 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. This is awesome knowledge. 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 about front-end Web Development, by mastering the Document Object Model.
Why do you need to know about the DOM?
So, you know some HTML, you’ve created your first tags, learned about CSS, made awesome forms, star-gazing buttons, responsive pages and have started to create dynamic and interesting pages.
But now you want to do more: “How can I add animation (and life) to my page? I wish I could give an error message to a user who incorrectly submits a form!”
And this is where the DOM comes into the picture. and where this course(s) provide you with an opportunity to grow in your skills.
To cut a long story short, 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.
The first step in understanding the DOM is understanding what it is. How does it differ from your HTML markup? How does it differ from JavaScript? From there, you’ll start exploring and experimenting with tools to access the DOM. You’ll learn simple, yet very powerful strategies to access and traverse the DOM. We don’t stop here, but then get into more advanced things like manipulating the DOM (via the create and remove methods given to us by the DOM API).
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” DOM by gaining an understanding of where you can find it, how you can access it, and more importantly, how you can manipulate it. We dig deeper in every lecture, learning about things like Nodes, the difference between HTTPCollections vs NodeLists, and a whole bunch more! 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 remove API) along the way so you can stay ahead of the pack.
*** A must-do Web Development course on Udemy ***
Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how your browser represents your HTML code and works behind the scenes. If you’re wanting to become a full stack developer, you need to know how to deal with the DOM. You need to know how to access it, how to manipulate it, and how to dynamically interact with it.
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 the fundamentals of the DOM 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 course, I focus on true web development in the front end. This includes understanding what nodes are, looking at the Document node (this is different from the document object by the way), understanding the DOM tree structure, what the different types of nodes there are, and how you can use the DOM to access elements on your page and manipulate them.
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.
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 kinda know what the Document Object Model is, but have little knowledge about how it works behind the scenes, and how to practically implement it in 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.
-
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
Lecture 1: Introduction
Lecture 2: Lets learn about the DOM
Lecture 3: Everything is an object
Lecture 4: Building our own simple page
Lecture 5: DOM hierarchy
Lecture 6: A quick word about the console
Lecture 7: DOM hierarchy conclusion
Lecture 8: What is the BOM
Lecture 9: BOM vs Window vs DOM vs JS
Lecture 10: DOM vs JavaScript vs Python
Lecture 11: The DOM is not the same as your HTML
Lecture 12: The DOM is not what you see in the browser
Lecture 13: The DOM is not what you see in DevTools
Lecture 14: Pseudo Elements
Lecture 15: Yee-haw … What is the DOM
Lecture 16: Summary: What is the DOM?
Lecture 17: What can we do with the DOM?
Lecture 18: Quick example of changing the DOM
Lecture 19: Face your fears – master the DOM
Chapter 2: JavaScript vs DOM
Lecture 1: What is the DOM API
Lecture 2: Where is the DOM from?
Lecture 3: JavaScript lives in different environments
Lecture 4: What exactly is JavaScript?
Lecture 5: Lets build a setTimeout() function
Lecture 6: setTimeout – JavaScript vs DOM
Lecture 7: The DOM was not solely for JavaScript
Lecture 8: DOM vs JavaScript
Lecture 9: You've now mastered the difference between the DOM and JavaScript – well done!
Chapter 3: Accessing the DOM
Lecture 1: Section introduction
Lecture 2: Accessing the DOM – Intro
Lecture 3: Cowabunga – its DOM time!
Lecture 4: Understanding your HTML
Lecture 5: Lets build our page for this section
Lecture 6: Visual Studio Code – A Quick Word
Lecture 7: getElementById()
Lecture 8: getElementById() Recap
Lecture 9: getElementsByClassName()
Lecture 10: TEST: Introduction
Lecture 11: Test – Starting Code
Lecture 12: TEST: building our test code
Lecture 13: Try complete the test on your own
Lecture 14: SOLUTION
Lecture 15: getElementsByTagName()
Lecture 16: querySelector – Introduction
Lecture 17: Oops!
Lecture 18: querySelector – practical example
Lecture 19: Awesome sauce – What are the access methods?
Lecture 20: Summary
Lecture 21: Learn the DOM and take your skills to the next level …
Chapter 4: DOM Fundamentals Recap
Chapter 5: Nodes
Lecture 1: Nodes – Section Introduction
Lecture 2: Don't get overwhelmed, we'll get there …
Lecture 3: Nodes – Introduction
Lecture 4: What is a Node?
Lecture 5: Nodes in action
Lecture 6: childNodes – How do we see nodes?
Lecture 7: Creating different nodes
Lecture 8: NODES NODES NODES
Lecture 9: What are the different types of Nodes?
Lecture 10: Almost everything is a node
Lecture 11: Node – Family Tree
Lecture 12: Identifying nodes
Lecture 13: nodeName vs tagName
Lecture 14: HTMLCollection vs NodeList
Lecture 15: Live vs Static lists
Lecture 16: Why can't we use the parentNode method on an HTMLCollection directly?
Lecture 17: I hope you love nodes as much as I do
Chapter 6: Traversing the DOM
Lecture 1: Section Introduction
Lecture 2: What this section covers
Lecture 3: Traversing the DOM – Introduction
Lecture 4: Why we traverse
Lecture 5: Building our section page together
Lecture 6: Why do we need to traverse the DOM?
Lecture 7: The 3 most important objects in the DOM
Lecture 8: Parent, child and siblings – a quick introduction
Lecture 9: Parent node
Lecture 10: Siblings in the DOM
Lecture 11: firstChild, lastChild and children – intro
Lecture 12: firstChild, lastChild and children – practical example
Lecture 13: Children property
Lecture 14: childNode vs children – what are the differences?
Lecture 15: Test – node types
Lecture 16: Test – solution
Lecture 17: Siblings – a quick word
Lecture 18: Working with sibling methods
Lecture 19: Summary of traversing the DOM
Lecture 20: Happy as Larry
Chapter 7: Nodes & Traversing the DOM – Recap
Instructors
-
Clyde Matthew
Things aren’t always #000000 and #FFFFFF
Rating Distribution
- 1 stars: 7 votes
- 2 stars: 11 votes
- 3 stars: 43 votes
- 4 stars: 243 votes
- 5 stars: 837 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