Overview
Learn how to manipulate the DOM to get a better handle on web pages. Take advantage of DOM manipulation with JavaScript to design a webpage that ensures a better quality of experience for web users.
The user demand for a web page is enormous, which means that webpages must provide some great features. This highly-engaging DOM manipulation with JavaScript training will help you understand how to modify web pages and develop features. You will learn how to implement modern web pages with HTML and CSS. It will guide you on code DOM adventure, planning DOM changes with a state model, and easy bundling. You will explore what it takes to build fantastic and user-friendly applications that update and edit data on the page dynamically.
Learn the DOM concepts and leverage its capabilities by enrolling today!
Course Design
The course is delivered through our online learning platform, accessible through any internet-connected device. There are no formal deadlines or teaching schedules, meaning you are free to study the course at your own pace.
You are taught through a combination of
- Video lessons
- Online study materials
Certificate of Achievement
Endorsed Certificate of Achievement from the Quality Licence Scheme
After successfully completing the course, learners will be able to order an endorsed certificate as proof of their new achievement. Endorsed certificates can be ordered and get delivered to your home by post for only £109.00. There is an additional £10 postage charge for international students.
CPD Certification from Study Booth
After successfully completing the assessment of this course, you will qualify for the CPD Certificate from Study Booth as proof of your continued expert development. Certificate is available in PDF format, at the cost of £9, or a hard copy can be sent to you via post, at the cost of £15.
Endorsement
This course has been endorsed by the Quality Licence Scheme for its high-quality, non-regulated provision and training programmes. This course is not regulated by Ofqual and is not an acknowledged lesson. Study Booth will be able to advise you on any further recognition, for example, progression routes into further and/or higher education. For further information, please visit the Learner FAQs on the Quality Licence Scheme website.
Method of Assessment
To assess your learning, you have to complete the assignment questions provided at the end of the course. You have to score at least 60% to pass the exam and to qualify for Quality Licence Scheme endorsed, and CPD acknowledged certificates.
After submitting the assignment, our expert tutor will assess your assignment and will give you feedback on your performance.
After passing the assignment exam, you will be able to apply for a certificate.
Why Study This Course
It doesn’t matter if you are an aspiring expert or absolute beginner; this course will enhance your expertise and boost your CV with critical skills and an acknowledged certificate attesting to your knowledge.
The Learn DOM Manipulation with JavaScript is fully available to anyone, and no previous lessons are needed to enrol. All Study Booth needs to know is that you are eager to learn and are over 16.
Course Curriculum
| Unit 01: Course Introduction | |||
| What is the DOM? | 00:02:00 | ||
| Your first DOM update | 00:05:00 | ||
| Course Project: Code DOM Adventure | 00:04:00 | ||
| Unit 02: DOM Fundamentals | |||
| HTML and the DOM | 00:05:00 | ||
| DOM standards | 00:05:00 | ||
| The BOM | 00:04:00 | ||
| The CSSOM | 00:03:00 | ||
| The tree (Data structure) | 00:05:00 | ||
| The DOM tree | 00:11:00 | ||
| The DOM and JavaScript | 00:01:00 | ||
| Unit 03: Code DOM Adventure | |||
| App architecture | 00:08:00 | ||
| Challenge solution: The exit screen | 00:04:00 | ||
| App skeleton | 00:05:00 | ||
| The splash screen file | 00:03:00 | ||
| Download our asset kit now! | 00:03:00 | ||
| Including the assets | 00:03:00 | ||
| Unit 04: Creating elements | |||
| Wiring the splash screen element | 00:02:00 | ||
| Creating elements at runtime | 00:03:00 | ||
| Appending HTML strings width append() | 00:02:00 | ||
| Appending nodes with append or append Child | 00:03:00 | ||
| Script order matters | 00:04:00 | ||
| Unit 05: Dynamic CSS | |||
| Specifying classes to elements | 00:04:00 | ||
| Working with static styles | 00:04:00 | ||
| Defining styles at runtime | 00:04:00 | ||
| Querying the DOM to find elements | 00:05:00 | ||
| Unit 06: Profiling the pixel pipeline | |||
| The pixel pipeline | 00:02:00 | ||
| Identifying bad practices | 00:04:00 | ||
| Profiling runtime performance | 00:04:00 | ||
| Batching DOM updates with document fragments | 00:05:00 | ||
| Too many nodes | 00:04:00 | ||
| Unit 07: Animation using DOM changes | |||
| Removing nodes from the DOM | 00:06:00 | ||
| The animation frames | 00:06:00 | ||
| Our animate method | 00:04:00 | ||
| Our working animation! | 00:06:00 | ||
| Stopping the animation | 00:08:00 | ||
| Unit 08: Planning DOM changes with a state model | |||
| Let’s build the level! | 00:02:00 | ||
| 2. Our state model to control the DOM from state. | 00:10:00 | ||
| Normalizing attributes | 00:04:00 | ||
| Our level class | 00:04:00 | ||
| Arrays, references and non-iterable empty slots | 00:05:00 | ||
| Building our state with an ugly oneliner | 00:05:00 | ||
| Write code for humans and normalize your code | 00:05:00 | ||
| Rendering the level element | 00:05:00 | ||
| Things are getting messy | 00:06:00 | ||
| Unit 09: Easy bundling | |||
| Easy bundling | 00:06:00 | ||
| Bundle with the start script | 00:01:00 | ||
| Our dev server | 00:02:00 | ||
| Let’s use DOMContentLoaded and ES Modules (ESM) | 00:07:00 | ||
| Dynamic style elements with CSS as ESM imports | 00:04:00 | ||
| Unit 10: DOM updates with basic state driven development | |||
| Designing the shape of our state | 00:02:00 | ||
| Initializing our state in preparation to render DOM elements | 00:05:00 | ||
| DOM updates from state | 00:08:00 | ||
| Updates to state are reflected in the DOM | 00:03:00 | ||
| Modeling and render our chip walls | 00:06:00 | ||
| Unit 11: The player, Interacting with user input | |||
| The player – Tech approach | 00:02:00 | ||
| Rendering the player with the DOM | 00:07:00 | ||
| Box model and global styles | 00:06:00 | ||
| Manipulating inline styles with the DOM | 00:04:00 | ||
| Moving the player by changing its state | 00:06:00 | ||
| DOM keyboard event listeners | 00:07:00 | ||
| Mapping and filtering DOM events data | 00:04:00 | ||
| Can the player move? – Tech approach | 00:03:00 | ||
| Preventing overlapping DOM elements | 00:12:00 | ||
| Prepare interactive frames | 00:08:00 | ||
| Resetting className and adding interactive frames on DOM events | 00:06:00 | ||
| Update frames without moving the element on DOM events | 00:03:00 | ||
| Unit 12: Interactive DOM, breaking walls | |||
| Adding random DOM elements | 00:06:00 | ||
| DOM events when pressing the space key | 00:05:00 | ||
| Creating elements on DOM events | 00:05:00 | ||
| z-index manifest | 00:04:00 | ||
| Dynamic element IDs with the DOM | 00:07:00 | ||
| Interacting with other elements using the state model | 00:06:00 | ||
| Remove surrounding walls | 00:04:00 | ||
| Unit 13: Portal to exit the game | |||
| Adding the portal to the screen | 00:07:00 | ||
| Random elements on the screen | 00:05:00 | ||
| Grouping inline CSS DOM updates | 00:03:00 | ||
| Exiting the game, when two elements cross paths | 00:04:00 | ||
| Challenge, your turn to build the exit screen | 00:03:00 | ||
| Challenge solution, my turn to build the exit screen | 00:04:00 | ||
| Hiding the portal behind a wall | 00:05:00 | ||
| Removing DOM event listeners | 00:04:00 | ||
| Unit 14: Animating all the things | |||
| Rendering the splash screen | 00:04:00 | ||
| Swapping screens | 00:02:00 | ||
| Animating the portal | 00:04:00 | ||
| CSS kit – animations | 00:03:00 | ||
| Request animation frame and delaying animations | 00:09:00 | ||
| Animating with a parent css class | 00:03:00 | ||
| Old TV effect | 00:02:00 | ||
| Animating with delayed animation | 00:11:00 | ||
| Optimizing frames | 00:03:00 | ||
| Final frame optimizations | 00:04:00 | ||
| Unit 15: DOM Sound effects | |||
| Dynamic audio elements | 00:07:00 | ||
| Interactive sound effects with DOM events | 00:04:00 | ||
| Delayed audio effects with callbacks and DOM events | 00:04:00 | ||
| Final lecture, final sound effect! exiting the game | 00:03:00 | ||
| Assignment | |||
| Assignment -Learn DOM Manipulation with JavaScript | 2 weeks, 1 day | ||
Save Upto 95% - Ends Soon!
Offer Ends in
-
Access01 Year
-
LevelLevel 3
-
Students3
-
Duration2 weeks, 1 day