Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
JavaScript Fundamentals: Master the Document Object Model
Rating: 4.7 out of 5(33 ratings)
293 students

JavaScript Fundamentals: Master the Document Object Model

Learn the Document Object Model fundamentals by building an interactive game with plain HTML, DOM and modern JavaScript.
Created byJuan Lizarazo
Last updated 10/2021
English

What you'll learn

  • Dynamic html elements
  • Dynamic css styles
  • Animations leveraging DOM API's.
  • DOM events and event listeners
  • Common DOM API's and documentation
  • Interactive UIs development
  • State Driven User Interfaces
  • Have a better idea of how modern libraries work under the hood
  • 5 minute bundles
  • Object oriented programming concepts
  • Javascript private attributes
  • Performance profiling
  • Clean code practices

Course content

16 sections101 lectures7h 21m total length
  • What is the DOM?2:28
  • Your first DOM update5:16
  • Course project: Code DOM adventure3:44
  • Suggested browser to take the lectures0:24
  • Download exercise files, all code for each module. Code along or skip anytime.0:36

Requirements

  • Basic Javascript and HTML concepts
  • nodeJS 12+ and npm just for tooling, we don't program in nodejs in this course.

Description

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This is what we use when we work with Javascript and interact in any way dynamically with the document.

If you use Angular, Vue, React, or any other library or framework to create modern web applications, the DOM is what these use under the hood.


If you want to stand out as a JavaScript developer, you need to learn DOM fundamentals.


By the end of watching this course, you'll be able to:

  • Understand what is the DOM and how to interact dynamically with an HTML document.

  • Use modern and easy Javascript with classes, private attributes, and dom API's to build user interfaces.

  • Learn optimization techniques.

  • Apply easy bundling techniques that include dynamic CSS loading.

  • Search for documentation, you don't need to memorize all the DOM interfaces.

  • Interact with the DOM and user input through event listeners.

  • Apply clean code and best practices as we build along with our course project.


With this course, you'll get a downloadable source code package.


PREREQUISITES

Javascript concepts and basic fluency, functions, variables, running scripts.

This is a beginner and intermediate course.

You don't need previous experience with the DOM.

---

Promo video music license:

Adventures by A Himitsu - Creative Commons — Attribution 3.0 Unported— CC BY 3.0   Music released by Argofox - Music provided by Audio Library   

Who this course is for:

  • Coding bootcamp graduates
  • Computer science graduates
  • Beginner Javascript students
  • Intermediate Javascript students
  • Advanced Javascript students