JavaScript DOM Manipulation – Full Course for Beginners

Learn about JavaScript DOM manipulation in this beginner's tutorial. This is when you use JavaScript to add, remove, and modify elements of a website.

In the first part of the course, you will learn about the basic features of a website DOM and the JavaScript commands you can use to manipulate the DOM. In the second part of the course, you will use what you have learned to create practical examples ranging from beginner to advanced.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:32) What is the DOM?
⌨️ (0:02:05) DOM Tree Analogy
⌨️ (0:04:01) Selecting Elements in the DOM
⌨️ (0:11:44) Styling an Element
⌨️ (0:16:33) Creating Elements
⌨️ (0:17:32) Adding Elements
⌨️ (0:18:33) Modify Text
⌨️ (0:21:15) Modifying Elements Attributes & Classes
⌨️ (0:24:59) Remove an Element
⌨️ (0:25:47) DOM Tree Recap
⌨️ (0:27:58) Traversing the DOM
⌨️ (0:37:48) Event Listeners
⌨️ (0:44:59) Event Listener Example
⌨️ (0:50:16) Event Propagation
⌨️ (1:00:07) Event Delegation
⌨️ (1:11:13) Introduction to Projects
⌨️ (1:11:52) Project 1: Beginner
⌨️ (1:14:26) Project 1 Mark-Up
⌨️ (1:16:31) General Styles for All Projects
⌨️ (1:17:08) Project 1 CSS Styling
⌨️ (1:24:40) Project 1 JavaScript
⌨️ (1:29:39) Project 2: Beginner +
⌨️ (1:30:41) Project 2 Mark Up
⌨️ (1:32:33) Project 2 CSS styling
⌨️ (1:41:30) Project 2 JavaScript
⌨️ (1:46:08) Project 2 CSS Styling p2
⌨️ (1:47:53) Project 3: Intermediate
⌨️ (1:48:39) Project 3 Mark Up
⌨️ (1:49:59) Project 3 CSS Styling
⌨️ (1:55:19) Project 3 JavaScript
⌨️ (1:58:02) Project 3 CSS Styling p2
⌨️ (2:00:45) Project 4: Pro
⌨️ (2:01:26) Project 4 Mark Up
⌨️ (2:02:44) Project 4 CSS Styling
⌨️ (2:06:36) Project 4 JavaScript
⌨️ (2:20:37) Project 5: Master
⌨️ (2:22:01) Project 5 Mark Up
⌨️ (2:23:15) Project 5 CSS Styling
⌨️ (2:26:39) Project 5 JavaScript
⌨️ (2:33:52) Project 5 CSS Styling p2
⌨️ (2:38:41) Project 5 JavaScript p2

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

--

[CodeLab]

Thanks for watching everyone! I hope you enjoy the course and learn a lot from it!😎

[miguelalejandrobritorausse]

This is just great. As a venezuelan who lives in a difficult country, i want to say thank you to all of you guys for making this tutorial and for helping us to grow as a developers. Cheers my friend

[tati_edits]

This is literally the perfect tutorial for beginners, he literally just explained it to us like we're 5 year olds. I love it.

[norahyde]

This is the bridge I needed from learning the algorithms and loops to actually being useful for making pages

[tdematos]

One of the best tutorials I have encountered that teaches you how to manipulate the DOM. This is a must-watch video! Thank you for this incredibly informational and detailed video!

[surajpatel]

I love the fact that you took your time to explain everything into details

[jasmeetkaur]

Watched multiple videos on youtube, but this is the most detailed and clearly explained. Thank you!

[alanlane]

This video is fantastic, I spent so much time trying to figure out the DOM and what it does. This video course is very complete, covers a lot of material and I am happy to say that I actually understand the narrator in the video. Great job and Thank you for a great video course!!

[bipuljha]

Thanks for this video. Though theory is something I find boring so I started with the Project part directly, I really appreciate the hard work you put for this. One small add-up, in Project 4 ending when we click the reset button, the pause button was still there but it should turn to play. So, all we need inside the reset event listener, we'll change the timerStatus to stopped and change the icon for StartStopBtn to play like we did in else statement.

[kevinjordan]

I paid for a udemy “beginner” course and the guy steamrolls through not explaining what he is doing and was too hard for me to follow. This course is perfect and the tutor explains everything as he goes through it and I understood it perfectly. Top notch thanks

[pioneer]

Great course! I enjoyed it like a movie. Can come back to this tutorial anytime whenever I would need this to implement in the project. Thank you!

[beastzx]

No offtopic things, just the things we wanted know, appreciate your content

[nojoodothmanal-ghamdi]

This is just brilliant! I understood everything clearly and I liked that you also explain the concept not just only the code and how it works. Thank you so much

[FarhanAli-toku]

i never explained how helpful and amazing tutorial on DOM this is and awesome channel this is..simply a best channel to learn courses for begginers as well as experts also. i will also recommend this to my class-fellows also to learn from this channel. keep giving a useful knowledge about technologies that others can't do. thanks sir good expalnation skills you have. i give a segguestion plzz explain your concepts before implementaion practically.

[sebastianlozano]

flabbergasting tutorial about the DOM! put it into practive with a couple of differents projects and you won't ever forget it!

[otakusong]

IT WORKED, THANKS I'VE BEEN LOOKING FOR THIS FOREVER, BUT NO TUTORIAL COULD EXPLAIN IT AS YOU DID

[yashsharma]

I was looking exactly for this, was getting into javascript and this video did helped a lot, the best thing was the css styling, so I kinda revised there too as I am just starting my web dev journey. Thanks a lot !

[vttov]

Thank you so much for all the content. I love this channel and admire all the knowledge you share with people.

[paschalynukwuani]

You are such a great teacher. Keep up the great work you do! This content was very helpful
.

[okibeogomola]

This is a great course, well paced, good structure, great flow of concepts, just wow!, great work and thank you. Just had to check your channel to smash the subscribe button.