Master JavaScript DOM manipulation in this comprehensive beginner's course. Explore the fundamentals of website DOM and learn essential JavaScript commands for manipulating it. Begin with an introduction to DOM concepts, including the DOM tree analogy, and progress through selecting, styling, creating, and modifying elements. Dive into advanced topics like event listeners, event propagation, and delegation. Apply your knowledge through five hands-on projects of increasing complexity, from beginner to master level. Each project includes markup, CSS styling, and JavaScript implementation, providing practical experience in creating interactive web elements. By the end of this 2-3 hour tutorial, gain the skills to confidently manipulate website elements using JavaScript.
Overview
Syllabus
) Introduction.
) What is the DOM?.
) DOM Tree Analogy .
) Selecting Elements in the DOM.
) Styling an Element.
) Creating Elements.
) Adding Elements .
) Modify Text.
) Modifying Elements Attributes & Classes.
) Remove an Element.
) DOM Tree Recap.
) Traversing the DOM.
) Event Listeners .
) Event Listener Example.
) Event Propagation.
) Event Delegation.
) Introduction to Projects.
) Project 1: Beginner.
) Project 1 Mark-Up.
) General Styles for All Projects.
) Project 1 CSS Styling.
) Project 1 JavaScript.
) Project 2: Beginner + .
) Project 2 Mark Up.
) Project 2 CSS styling.
) Project 2 JavaScript.
) Project 2 CSS Styling p2.
) Project 3: Intermediate .
) Project 3 Mark Up.
) Project 3 CSS Styling.
) Project 3 JavaScript.
) Project 3 CSS Styling p2.
) Project 4: Pro.
) Project 4 Mark Up.
) Project 4 CSS Styling.
) Project 4 JavaScript .
) Project 5: Master.
) Project 5 Mark Up.
) Project 5 CSS Styling.
) Project 5 JavaScript.
) Project 5 CSS Styling p2.
) Project 5 JavaScript p2.
Taught by
freeCodeCamp.org
