Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Front End Web Development

*NEW* DOM 2021 Build Dynamic Websites with JavaScript Part 1

Understand DOM (Document Object Model). Crucial for front end web development. Novice to Pro in easy steps.Course 1 of 2
Rating: 4.8 out of 54.8 (324 ratings)
1,665 students
Created by Clyde Matthew
Last updated 10/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • ***Download lectures (for offline viewing)
  • 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
Curated for the Udemy for Business collection

Course content

7 sections • 105 lectures • 5h 39m total length

  • Preview02:19
  • Lets learn about the DOM
    00:00
  • Everything is an object
    02:01
  • Building our own simple page
    04:20
  • Preview07:05
  • A quick word about the console
    00:58
  • DOM hierarchy conclusion
    04:08
  • What is the BOM
    03:20
  • Preview03:42
  • The DOM is not the same as your HTML
    07:38
  • The DOM is not what you see in the browser
    02:18
  • The DOM is not what you see in DevTools
    01:42
  • Pseudo Elements
    08:17
  • Yee-haw ... What is the DOM
    00:00
  • Summary: What is the DOM?
    02:52
  • What can we do with the DOM?
    01:08
  • Preview02:57
  • DOM Introduction Quiz
    5 questions
  • Face your fears - master the DOM
    00:00

  • What is the DOM API
    03:07
  • JavaScript lives in different environments
    02:58
  • Lets build a setTimeout() function
    09:23
  • Preview03:20
  • The DOM was not solely for JavaScript
    03:13
  • DOM vs JavaScript
    00:28
  • Bonus Quiz
    4 questions
  • You've now mastered the difference between the DOM and JavaScript - well done!
    00:00

  • Preview01:37
  • Accessing the DOM - Intro
    08:18
  • Cowabunga - its DOM time!
    00:00
  • Preview02:55
  • Lets build our page for this section
    09:00
  • Visual Studio Code - A Quick Word
    01:58
  • getElementById()
    02:17
  • getElementById() Recap
    03:20
  • getElementsByClassName()
    08:33
  • TEST: Introduction
    01:01
  • Test - Starting Code
    00:14
  • TEST: building our test code
    10:41
  • Try complete the test on your own
    00:00
  • SOLUTION
    11:39
  • getElementsByTagName()
    06:07
  • querySelector - Introduction
    03:09
  • Oops!
    00:27
  • querySelector - practical example
    06:26
  • Awesome sauce - What are the access methods?
    00:00
  • Summary
    03:02
  • Quiz: Accessing the DOM
    5 questions
  • Learn the DOM and take your skills to the next level ...
    00:00

  • Nodes - Section Introduction
    00:57
  • Don't get overwhelmed, we'll get there ...
    00:00
  • Nodes - Introduction
    01:52
  • NODES NODES NODES
    00:00
  • Nodes in action
    04:23
  • childNodes - How do we see nodes?
    05:28
  • Creating different nodes
    04:14
  • What are the different types of Nodes?
    03:34
  • Almost everything is a node
    00:00
  • Node - Family Tree
    03:19
  • Identifying nodes
    02:41
  • nodeName vs tagName
    01:28
  • HTMLCollection vs NodeList
    02:28
  • Live vs Static lists
    10:59
  • Why can't we use the parentNode method on an HTMLCollection directly?
    00:57
  • Nodes - Quiz
    5 questions
  • I hope you love nodes as much as I do
    00:00

  • Section Introduction
    02:15
  • What this section covers
    00:37
  • Traversing the DOM - Introduction
    02:37
  • Why we traverse
    01:06
  • Building our section page together
    03:43
  • Why do we need to traverse the DOM?
    01:36
  • The 3 most important objects in the DOM
    03:02
  • Parent, child and - a quick introduction
    04:04
  • Parent node
    09:39
  • Siblings in the DOM
    03:52
  • firstChild, lastChild and children - intro
    04:35
  • firstChild, lastChild and children - practical example
    07:27
  • Children property
    02:54
  • Preview05:39
  • Test - node types
    02:03
  • Test - solution
    04:40
  • Siblings - a quick word
    00:55
  • Working with sibling methods
    05:23
  • Summary of traversing the DOM
    02:14
  • Happy as Larry
    00:00
  • Quiz: Traversing the DOM
    11 questions

  • Section introduction
    01:18
  • Take a step back
    00:00
  • Static vs Dynamic websites
    01:46
  • How do you create elements
    02:15
  • Document vs document
    05:22
  • Preview04:34
  • Lets attach our element to the DOM
    05:00
  • Using the textContent property to add text to our newly created element
    04:49
  • How does appendChild work?
    02:11
  • insertBefore() method
    02:58
  • Is there an insertAfter() method?
    02:23
  • Lets trick the insertBefore() method
    03:40
  • How to remove elements
    02:28
  • removeChild()
    01:58
  • remove()
    03:28
  • A quick word on the remove() method
    00:31
  • It's time to clone
    02:55
  • Clone example using setInterval()
    09:05
  • Lets analyze our clone code
    03:29
  • Test your skills
    01:22
  • Test - solution
    04:31
  • Quiz: Creating, Removing and Cloning DOM Elements
    7 questions
  • You've been cloned!
    00:00

  • Course Outro
    04:14

Requirements

  • Desire to become a full stack web developer
  • A need to take your website to the next level
  • Desire to create dynamic, interesting and acclaimed websites
  • Desire to have unique features and actions to engage visitors to your website
  • Basic HTML, CSS and JavaScript will be helpful, but not absolutely necessary
  • Desire to KNOW the full process of how your webpage is represented by your browser behind the scenes
  • Desire to KNOW how user interaction (like clicking a button, or submitting a form) can cause jazzy things to happen on your page (like displaying a message, or changing a button color, etc.)
  • A computer is required as you need to code alongside me to learn effectively

Description

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.

*** The most important 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.

Who this course is for:

  • 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

Featured review

Nicole Taylor-Buckner
Nicole Taylor-Buckner
109 courses
6 reviews
Rating: 5.0 out of 5a year ago
I highly recommend this wonderful course. It filled in so many gaps I had regarding the DOM, nodes, and JavaScript. I've bought several JavaScript courses on Udemy, and none of them covered what Clyde covers in this course. On top of that, Clyde is actually a pleasure to watch and learn from. I've just bought two more of his courses. :-)

Instructor

Clyde Matthew
Things aren’t always #000000 and #FFFFFF
Clyde Matthew
  • 4.8 Instructor Rating
  • 738 Reviews
  • 2,680 Students
  • 4 Courses

Ideas are a dime a dozen. The hard part is execution. The harsh reality is that most people I know never carry tasks to completion.

 

My experience and a few words:


·        I’ve had to learn things the hard way (hard slog)

·        I want to teach people what I’ve learnt and make an impact in their lives. Cliché, but true

·        No one is a master of everything. But you need to be better than master of one

·        Credit is not my main objective

·        I don’t care about titles

·        I care only about the fruit of your labor

·        Understanding means less mistakes later, and mistakes cost a fortune (both in money and time)

·        Everything should be as simple as it can be, but not simpler – (not from me, from Einstein)

 

Oh, and one last piece of advice … dreams remain dreams until you take action. So with all the skills you learn (whether from me, or other great people all over the web), remember to take your talents and do something with them. Remember what the Bible taught us about the rich man who gave talents to 3 of his workers? The first 2 servants used the talents to trade and gain profit. The third servant was fearful and hid the talent. Don’t be like this third guy. Build websites and apps, build businesses, build your brand and build your skillset.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.