JavaScript DOM Manipulation – Full Course for Beginners

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=5fb2aPlgoys


Duration: 2:41:21
746,178 views
17,054

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.

✏️ CodeLab created this course. Check out their channel: https://www.youtube.com/c/CodeLab98

⭐️ 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

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news



Other Videos By freeCodeCamp.org


2022-08-09Python for Beginners – Full Course [Programming Tutorial]
2022-08-04Blazor Server App with .NET 6 and Syncfusion UI Components – Full Course
2022-08-01Industry Level REST API using .NET 6 – Tutorial for Beginners
2022-07-28JavaScript Game Development Course for Beginners
2022-07-25Create An Elementor WordPress Website – Elementor Tutorial For Beginners 2022
2022-07-21Apache Cassandra Database – Full Course for Beginners
2022-07-20Think Like a Computer Science Professor
2022-07-19How to Build an MVP for Your App – Full Course on Minimum Viable Product Development
2022-07-14React JS Tutorial – Build a Weather App With Cities Autocomplete
2022-07-11OpenStack Tutorial – Operate Your Own Private Cloud (Full Course)
2022-07-07JavaScript DOM Manipulation – Full Course for Beginners
2022-07-05JavaScript Tutorial – Code Your Own Jeopardy Game
2022-06-29Learn Terraform with Azure by Building a Dev Environment – Full Course for Beginners
2022-06-27Greedy Algorithms Tutorial – Solve Coding Challenges
2022-06-24Build API Powered Dashboards - MongoDB, Discord and Mail API
2022-06-20Automate with Python – Full Course for Beginners
2022-06-15Python TensorFlow for Machine Learning – Neural Network Text Classification Tutorial
2022-06-13Visual Basic (VB.NET) – Full Course for Beginners
2022-06-09Flutter Mobile App + Node.js Back End Tutorial – Code an Amazon Clone [Full Course]
2022-06-08Python Speech Recognition Tutorial – Full Course for Beginners
2022-06-02Code Your Own Heroku Clone with Python – Provision Infrastructure Programmatically Tutorial