Learn DOM Manipulation with JavaScript

~~₦120000~~ ₦50000

Take This Course

Overview:

Welcome to "Learn DOM Manipulation with JavaScript"! This course is your comprehensive guide to mastering Document Object Model (DOM) manipulation using JavaScript. The DOM serves as the interface between JavaScript and HTML, allowing developers to dynamically interact with web pages. In this course, you'll delve into DOM manipulation techniques, learning how to create, access, modify, and delete HTML elements and attributes using JavaScript. By the end, you'll be equipped with the skills to build dynamic and interactive web applications with ease.

Interactive video lectures by industry experts
Instant e-certificate
Fully online, interactive course with Professional voice-over
Developed by qualified first aid professionals
Self paced learning and laptop, tablet, smartphone friendly
24/7 Learning Assistance
Discounts on bulk purchases

Main Course Features:

Thorough coverage of DOM manipulation concepts and techniques
Hands-on coding projects and exercises for practical learning
Exploration of DOM traversal methods to navigate and manipulate the DOM tree
Implementation of event handling to respond to user interactions
Guidance on dynamically updating web content and styles using JavaScript
Best practices for optimizing DOM manipulation code for performance
Real-world examples and case studies to illustrate DOM manipulation in action
Access to a supportive online community for collaboration and assistance

Who Should Take This Course:

Web developers looking to enhance their JavaScript skills with DOM manipulation techniques
Students and professionals seeking to understand how JavaScript interacts with web pages
Anyone interested in building dynamic and interactive web applications

Learning Outcomes:

Master DOM manipulation techniques for creating, accessing, and modifying HTML elements and attributes
Navigate and manipulate the DOM tree using DOM traversal methods
Implement event handling to respond to user interactions and enhance interactivity
Dynamically update web content and styles using JavaScript
Optimize DOM manipulation code for improved performance and efficiency
Debug and troubleshoot DOM manipulation code effectively
Build a portfolio of projects showcasing your proficiency in DOM manipulation
Stay updated with the latest trends and techniques in web development with JavaScript and DOM manipulation.

Certification

Once you’ve successfully completed your course, you will immediately be sent a digital certificate. All of our courses are fully accredited, providing you with up-to-date skills and knowledge and helping you to become more competent and effective in your chosen field. Our certifications have no expiry dates, although we do recommend that you renew them every 12 months.

Assessment

At the end of the Course, there will be an online assessment, which you will need to pass to complete the course. Answers are marked instantly and automatically, allowing you to know straight away whether you have passed. If you haven’t, there’s no limit on the number of times you can take the final exam. All this is included in the one-time fee you paid for the course itself.

We guarantee that all our online courses will meet or exceed your expectations. If you are not fully satisfied with a course - for any reason at all - simply request a full refund. We guarantee no hassles. That's our promise to you.

Go ahead and order with confidence!

Easy to Access
Let's Navigate Together

Course Curriculum

Unit 01: Course Introduction
	What is the DOM?
	Your first DOM update
	Course Project: Code DOM Adventure
Unit 02: DOM Fundamentals
	HTML and the DOM
	DOM standards
	The BOM
	The CSSOM
	The tree (Data structure)
	The DOM tree
	The DOM and JavaScript
Unit 03: Code DOM Adventure
	App architecture
	Challenge solution: The exit screen
	App skeleton
	The splash screen file
	Download our asset kit now!
	Including the assets
Unit 04: Creating elements
	Wiring the splash screen element
	Creating elements at runtime
	Appending HTML strings width append()
	Appending nodes with append or append Child
	Script order matters
Unit 05: Dynamic CSS
	Specifying classes to elements
	Working with static styles
	Defining styles at runtime
	Querying the DOM to find elements
Unit 06: Profiling the pixel pipeline
	The pixel pipeline
	Identifying bad practices
	Profiling runtime performance
	Batching DOM updates with document fragments
	Too many nodes
Unit 07: Animation using DOM changes
	Removing nodes from the DOM
	The animation frames
	Our animate method
	Our working animation!
	Stopping the animation
Unit 08: Planning DOM changes with a state model
	Let’s build the level!
	2. Our state model to control the DOM from state.
	Normalizing attributes
	Our level class
	Arrays, references and non-iterable empty slots
	Building our state with an ugly oneliner
	Write code for humans and normalize your code
	Rendering the level element
	Things are getting messy
Unit 09: Easy bundling
	Easy bundling
	Bundle with the start script
	Our dev server
	Let’s use DOMContentLoaded and ES Modules (ESM)
	Dynamic style elements with CSS as ESM imports
Unit 10: DOM updates with basic state driven development
	Designing the shape of our state
	Initializing our state in preparation to render DOM elements
	DOM updates from state
	Updates to state are reflected in the DOM
	Modeling and render our chip walls
Unit 11: The player, Interacting with user input
	The player – Tech approach
	Rendering the player with the DOM
	Box model and global styles
	Manipulating inline styles with the DOM
	Moving the player by changing its state
	DOM keyboard event listeners
	Mapping and filtering DOM events data
	Can the player move? – Tech approach
	Preventing overlapping DOM elements
	Prepare interactive frames
	Resetting className and adding interactive frames on DOM events
	Update frames without moving the element on DOM events
Unit 12: Interactive DOM, breaking walls
	Adding random DOM elements
	DOM events when pressing the space key
	Creating elements on DOM events
	z-index manifest
	Dynamic element IDs with the DOM
	Interacting with other elements using the state model
	Remove surrounding walls
Unit 13: Portal to exit the game
	Adding the portal to the screen
	Random elements on the screen
	Grouping inline CSS DOM updates
	Exiting the game, when two elements cross paths
	Challenge, your turn to build the exit screen
	Challenge solution, my turn to build the exit screen
	Hiding the portal behind a wall
	Removing DOM event listeners
Unit 14: Animating all the things
	Rendering the splash screen
	Swapping screens
	Animating the portal
	CSS kit – animations
	Request animation frame and delaying animations
	Animating with a parent css class
	Old TV effect
	Animating with delayed animation
	Optimizing frames
	Final frame optimizations
Unit 15: DOM Sound effects
	Dynamic audio elements
	Interactive sound effects with DOM events
	Delayed audio effects with callbacks and DOM events
	Final lecture, final sound effect! exiting the game

Feedback Form