on-demand course

JavaScript DOM Projects for Interactive Dynamic Webpages

with Laurence Svekis

January 2022

Intermediate

12h 48m

English

Packt Publishing

Closed Captioning available in English

Watch now

Unlock full access

Includes

Earns Badge

Course outline

Introduction to JavaScript and the DOM; Creating Interactive Webpages
3m 19s
Web Developer Setup Use of Editor for JavaScript Code
9m 1s
JavaScript Resources to Explore More about JavaScript
2m 1s
JavaScript DOM Object Selecting Page Elements and More
12m 4s
JavaScript querySelectorAll Get Page Elements Select ALL
11m 45s
Page Events Element Event Listener Access Page Content with JavaScript
10m 11s
JavaScript and Page Input Values from Page Elements
11m 13s
How to Use JavaScript Request Animation Frame
14m 1s
JavaScript Starter Projects DOM Simple Projects to Start Coding
5m 38s
How to Make an Interactive DOM List Saving Local Storage
15m 38s
Interactive List Items with JavaScript Exercise
16m 34s
JavaScript Component Create a Star Rating Project
20m 14s
JavaScript Game within the DOM Coin Toss Game Project
30m 49s
JavaScript Typing Challenge Game with JavaScript DOM
19m 8s
JavaScript DOM Fun with Page Elements Moving Storing Keypress
23m 45s
Combo Guessing Game Exercise
25m 16s
JavaScript Shape Clicker Game Click the Shape Quickly to Win
19m 47s
JavaScript Number Guessing Game with Game Logic
23m 55s
JavaScript DOM Interactive Fun Useful Projects
7m 6s
Pure JavaScript Accordion Hide and Show Page Elements
11m 26s
JavaScript Drag and Drop Simple Boxes Component
15m 16s
How to Create a Dynamic Drag and Drop with JavaScript
14m 39s
How to Move Page Elements Using Drag and Drop with JavaScript DOM
22m 22s
JavaScript Email Extractor Mini Project
20m 2s
Create a Quiz with JavaScript JSON Quiz Tracker
24m 24s
How to Create a Quiz with JavaScript Using JSON Data
27m 58s
JavaScript Image Preview File Reader Example
21m 14s
JavaScript Interactive Dice Game with Page Elements
17m 32s
How to Create a Dice Game with JavaScript
16m 19s
JavaScript Dice Game Challenge Lesson
28m 55s
JavaScript DOM Fun Projects Interactive DOM Elements
3m 51s
JavaScript Project Tip Calculator Part 1
11m 13s
JavaScript Project Tip Calculator Part 2
10m 30s
JavaScript Calculator Project Part 1
15m 27s
JavaScript Calculator Project Part 2
15m 39s
JavaScript Calculator Project Part 3
14m 59s
JavaScript Bubble Popping DOM Game Coding Project
28m 18s
JavaScript Bubble Popping DOM Game Coding Project Continued
31m 30s
How to Move a Page Element with JavaScript DOM Mover Example
17m 37s
Collision Detection Between Page Elements with JavaScript DOM
15m 36s
JavaScript DOM Interactive Game
28m 38s
Encrypt String Values with Just JavaScript Input Encode and Decode
10m 14s
JavaScript Setup Dynamic Grid with Page Elements and CSS Grid Styling
15m 41s
JavaScript Roulette Game
34m 42s
HTML5 Canvas Image Upload from Input Field Using the createObjectURL Example
13m 15s

Overview

In this 12 hr course, explore how to use JavaScript to create dynamic, interactive webpages by manipulating the Document Object Model (DOM). Through project-based learning, you will develop hands-on skills in creating interactive games, dynamic content, and enhanced web experiences.

What I will be able to do after this course

Understand the fundamentals of JavaScript DOM interaction.
Learn to select and manipulate webpage elements dynamically.
Create interactive games and components using JavaScript.
Develop skills in building dynamic and responsive web pages.
Apply advanced techniques such as element collision detection in JavaScript.

Course Instructor(s)

Laurence Svekis is an experienced web developer and educator with a passion for teaching JavaScript and web technologies. With years of practical experience in the industry and a knack for breaking down complex concepts into digestible lessons, Laurence guides you through hands-on projects that enhance your skills and confidence in JavaScript and DOM manipulation.

Who is it for?

This course is perfect for web developers and designers with basic JavaScript knowledge who want to master DOM interaction. It's also suitable for avid learners aiming to create dynamic websites or webmasters interested in enhancing web functionality. Prior exposure to HTML, CSS, and JavaScript basics is recommended.