Learn DOM manipulation with easy modern JavaScript

3.9 ★★★ ★ ★

Learn DOM manipulation with easy modern JavaScript

Name: Learn DOM manipulation with easy modern JavaScript
Rating: 3.9 (192 reviews)
Author: Juan Lizarazo

Learn the Document Object Model fundamentals by building an interactive game with plain HTML, DOM and modern JavaScript.

updated on icon Updated on Apr, 2024

language icon Language - English

person icon Juan Lizarazo

English [CC]

category icon Development,Web Development,Javascript

Lectures -101

Resources -1

Duration -7 hours

3.9 ★★★ ★ ★

Add to Cart Buy Now

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

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.

Goals

What will you learn in this course:

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

Prerequisites

What are the prerequisites for this course?

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

Learn DOM manipulation with easy modern JavaScript

Curriculum

Check out the detailed breakdown of what’s inside the course

Welcome
5 Lectures

What is the DOM? 02:28 02:28
Your first DOM update 05:16 05:16
Course project: Code DOM adventure 03:44 03:44
Download exercise files, all code for each module. Code along or skip anytime.
Suggested browser to take the lectures

DOM Fundamentals
7 Lectures

Code DOM Adventure
7 Lectures

Creating elements
5 Lectures

Dynamic CSS
4 Lectures

Profiling the pixel pipeline
5 Lectures

Animations using DOM changes
5 Lectures

Planning DOM changes with a state model
9 Lectures

Easy bundling
6 Lectures

DOM updates with basic state driven development
5 Lectures

The player, Interacting with user input
12 Lectures

Interactive DOM, breaking walls 0 / 7|37 min
7 Lectures

Portal to exit the game
9 Lectures

Interactive DOM, breaking walls
10 Lectures

DOM sound effects
4 Lectures

Instructor Details

Juan Lizarazo

Course Certificate

Use your certificate to make a career change or to advance in your current career.