Back to Courses
Dom Manipulation Training With Javascript
Course Highlights Gain the solid skills and knowledge to kickstart a successful career and learn from the experts with this …
Course Highlights
Gain the solid skills and knowledge to kickstart a successful career and learn from the experts with this step-by-step Dom Manipulation Training With Javascript training course. This Dom Manipulation Training With Javascript course for Consistent Profits has been specially designed to help learners gain a good command of Dom Manipulation Training With Javascript, providing them with a solid foundation of knowledge to understand relevant professionals’ job roles.
Through this Dom Manipulation Training With Javascript course, you will gain a theoretical understanding of Dom Manipulation Training With Javascript and others relevant subjects that will increase your employability in this field, help you stand out from the competition, and boost your earning potential in no time.
Not only that, but this Dom Manipulation Training With Javascript training includes up-to-date knowledge and techniques that will ensure you have the most in-demand skills to rise to the top of the industry.
This course is fully CPD-accredited and broken down into several manageable modules, making it ideal for aspiring professionals.
Learning outcome
- Familiar yourself with the recent development and updates of the relevant industry
- Know how to use your theoretical knowledge to adapt in any working environment
- Get help from our expert tutors anytime you need
- Access to course contents that are designed and prepared by industry professionals
- Study at your convenient time and from wherever you want
Course media
Why should I take this course?
- Affordable premium-quality E-learning content, you can learn at your own pace.
- You will receive a completion certificate upon completing the course.
- Internationally recognized Accredited Qualification will boost up your resume.
- You will learn the researched and proven approach adopted by successful people to transform their careers.
- You will be able to incorporate various techniques successfully and understand your customers better.
Requirements
- No formal qualifications required, anyone from any academic background can take this course.
- Access to a computer or digital device with internet connectivity.
Course Curriculum
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 | ||
| Module 04: The Language of Coaching | 01:00: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 | ||
Don't just take our word for it
Amazing workshop.
Very informative for the freshers like me. Learned a lot of things about digital marketing. I'm really thankful.
Aarini Sinha 
It was a great experience. The course was jampacked with excellent information. And when I needed help, Skill-up helped me with technical problems instantly. Fast feedback.
Varsha Sivamohan 
I am currently signed on to several courses with skill up. I have just finished my second one. The courses are informative and good for all types of learners. I recommend them.
Judith Taylor 
The support team was FANTASTIC!!! Very quick to respond and even though I was nervous as I am not good at tests, they made me feel comfortable.
I am very grateful for the support
Charlie Anderson 
Completed the Level 3 Mental Health Support Worker course, very good and highly recommend it.
Very good course, enjoyed it thoroughly and important in my line of work as a Support worker.
Parmjit Dosanjh 
I am pleased to have completed my online course in Mental Health First Aid with SkillUp. All the modules were detailed & comprehensive with review questions, which really helped me to grasp the information & prepared me well for the mock test & final exam.
Shan 
I was a bit nervous about the course but I gave a try,it's perfect and I still can't believe I paid a peanut to acquire such a course,the sliding show and introduction was well understood.i will recommend skill up to anyone interested to persuade a meaningful career,and also to the support team keep doing the good work.💪
Sara Nana 
Original price was: $457.31.$34.75Current price is: $34.75.
1 Year Access 
18 Students 
8 hours, 24 minutes