English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 106 lectures (5h 40m) | 1.88 GB
Understand DOM (Document Object Model). Crucial for front end web development. Novice to Pro in easy steps.Course 1 of 2
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.
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.
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.
What you’ll learn
- What exactly the Document Object Model is
- 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
Table of Contents
Introduction
Introduction
Lets learn about the DOM
Everything is an object
Building our own simple page
DOM hierarchy
A quick word about the console
DOM hierarchy conclusion
What is the BOM
DOM vs JavaScript vs Python
The DOM is not the same as your HTML
The DOM is not what you see in the browser
The DOM is not what you see in DevTools
Pseudo Elements
Yeehaw What is the DOM
Summary What is the DOM
What can we do with the DOM
Quick example of changing the DOM
Face your fears master the DOM
JavaScript vs DOM
What is the DOM API
JavaScript lives in different environments
Lets build a setTimeout function
setTimeout JavaScript vs DOM
The DOM was not solely for JavaScript
DOM vs JavaScript
Youve now mastered the difference between the DOM and JavaScript well done
Accessing the DOM
Section introduction
Accessing the DOM Intro
Cowabunga its DOM time
Understanding your HTML
Lets build our page for this section
Visual Studio Code A Quick Word
getElementById
getElementById Recap
getElementsByClassName
TEST Introduction
Test Starting Code
test-skeleton
TEST building our test code
Try complete the test on your own
SOLUTION
getElementsByTagName
querySelector Introduction
Oops
querySelector practical example
Awesome sauce What are the access methods
Summary
Learn the DOM and take your skills to the next level
Nodes
Nodes Section Introduction
Dont get overwhelmed well get there
Nodes Introduction
NODES NODES NODES
Nodes in action
childNodes How do we see nodes
Creating different nodes
What are the different types of Nodes
Almost everything is a node
Node Family Tree
Identifying nodes
nodeName vs tagName
HTMLCollection vs NodeList
Live vs Static lists
Why cant we use the parentNode method on an HTMLCollection directly
I hope you love nodes as much as I do
Traversing the DOM
Section Introduction
What this section covers
Traversing the DOM Introduction
Why we traverse
Building our section page together
Why do we need to traverse the DOM
The 3 most important objects in the DOM
Parent child and siblings a quick introduction
Parent node
Siblings in the DOM
firstChild lastChild and children intro
firstChild lastChild and children practical example
Children property
childNode vs children what are the differences
Test node types
Test solution
Siblings a quick word
Working with sibling methods
Summary of traversing the DOM
Happy as Larry
Creating Removing and Cloning DOM Elements
Clone example using setInterval
Lets analyze our clone code
cloneChallenge
Test your skills
Test solution
Youve been cloned
Section introduction
Take a step back
Static vs Dynamic websites
How do you create elements
Document vs document
Understanding the createElement method
Lets attach our element to the DOM
Using the textContent property to add text to our newly created element
How does appendChild work
insertBefore method
Is there an insertAfter method
Lets trick the insertBefore method
How to remove elements
removeChild
remove
A quick word on the remove method
Its time to clone
Where to next
Course Outro
Resolve the captcha to access the links!