DOM 2022 - Using the DOM and JavaScript to Build Dynamic Websites

Focused View

SkillZone .

14:51:57

154 View

00001 Welcome to the Course.mp4

02:09

00002 Introduction.mp4

02:19

00003 Everything Is an Object.mp4

02:01

00004 Building Our Own Simple Page.mp4

04:20

00005 DOM Hierarchy.mp4

07:05

00006 DOM Hierarchy Conclusion.mp4

04:08

00007 What Is the BOM.mp4

03:20

00008 DOM Versus JavaScript Versus Python.mp4

03:42

00009 The DOM Is not the Same as Your HTML.mp4

07:38

00010 The DOM Is not What You See in the Browser.mp4

02:18

00011 The DOM Is not What You See in DevTools.mp4

01:42

00012 Pseudo Elements.mp4

08:17

00013 Summary - What Is the DOM.mp4

02:52

00014 What Can We Do with the DOM.mp4

01:08

00015 Quick Example of Changing the DOM.mp4

03:07

00016 What Is the DOM API.mp4

03:07

00017 JavaScript Lives in Different Environments.mp4

02:58

00018 Let s Build a setTimeout Function.mp4

09:23

00019 setTimeout - JavaScript Versus DOM.mp4

03:20

00020 The DOM Was not Solely for JavaScript.mp4

03:13

00021 Section Introduction.mp4

01:37

00022 Accessing the DOM - Introduction.mp4

08:18

00023 Understanding Your HTML.mp4

02:55

00024 Let s Build Our Page for this Section.mp4

09:00

00025 getElementById.mp4

02:17

00026 getElementById Recap.mp4

03:20

00027 getElementsByClassName.mp4

08:33

00028 Test - Introduction.mp4

01:01

00029 Test - Building Our Test Code.mp4

10:41

00030 Solution.mp4

11:39

00031 getElementsByTagName.mp4

06:07

00032 querySelector - Introduction.mp4

03:09

00033 querySelector - Practical Example.mp4

06:26

00034 Summary.mp4

02:59

00035 Nodes - Section Introduction.mp4

00:57

00036 Nodes - Introduction.mp4

01:52

00037 Nodes in Action.mp4

04:23

00038 childNodes - How Do We See Nodes.mp4

05:28

00039 Creating Different Nodes.mp4

04:14

00040 What Are the Different Types of Nodes.mp4

03:34

00041 Node - Family Tree.mp4

03:19

00042 Identifying Nodes.mp4

02:41

00043 HTMLCollection Versus NodeList.mp4

02:28

00044 Live Versus Static lists.mp4

10:59

00045 Section Introduction.mp4

02:15

00046 Traversing the DOM - Introduction.mp4

02:37

00047 Building Our Section Page Together.mp4

03:43

00048 Why Do We Need to Traverse the DOM.mp4

01:36

00049 The Three Most Important Objects in the DOM.mp4

03:02

00050 Parent Child and Siblings - A Quick Introduction.mp4

04:04

00051 Parent Node.mp4

09:39

00052 Siblings in the DOM.mp4

03:52

00053 firstChild lastChild and Children - Introduction.mp4

04:35

00054 firstChild lastChild and Children - Practical Example.mp4

07:27

00055 Children Property.mp4

02:54

00056 childNode Versus Children - What Are the Differences.mp4

05:39

00057 Test - Node Types.mp4

02:03

00058 Test - Solution.mp4

04:40

00059 Siblings - A Quick Word.mp4

00:55

00060 Working with Sibling Methods.mp4

05:23

00061 Summary of Traversing the DOM.mp4

02:23

00062 Section Introduction.mp4

01:18

00063 Static Versus Dynamic Websites.mp4

01:46

00064 How Do You Create Elements.mp4

02:15

00065 Document Versus Document.mp4

05:22

00066 Understanding the createElement Method.mp4

04:34

00067 Let s Attach Our Element to the DOM.mp4

05:00

00068 Using the textContent Property to Add Text to Our Newly Created Element.mp4

04:49

00069 How Does appendChild Work.mp4

02:11

00070 insertBefore Method.mp4

02:58

00071 Is There an insertAfter Method.mp4

02:23

00072 Let s Trick the insertBefore Method.mp4

03:40

00073 How to Remove Elements.mp4

02:28

00074 removeChild.mp4

01:58

00075 remove.mp4

03:28

00076 It s Time to Clone.mp4

02:55

00077 Clone Example Using setInterval.mp4

09:05

00078 Let s Analyze Our Clone Code.mp4

03:29

00079 Test Your Skills.mp4

01:22

00080 Test - Solution.mp4

04:31

00081 Course Outro.mp4

03:46

00082 introduction.mp4

03:07

00083 Introduction - What Is an Event.mp4

03:07

00084 The Two Most Important Things When It Comes to Events.mp4

04:20

00085 Inline Event Listeners - Brief Introduction.mp4

05:58

00086 Inline Properties - Brief Introduction.mp4

05:07

00087 addEventListener Method - Brief Introduction.mp4

04:24

00088 Summary - the Three Ways to Add an Event Listener to HTML Elements.mp4

01:00

00089 A Quick Word on Events.mp4

02:05

00090 Inline Event Listeners - Detailed Overview.mp4

04:19

00091 Inline Event Listeners - Test Introduction Part 1 of 3.mp4

02:03

00092 Inline Event Listeners - Test Setup Part 2 of 3.mp4

04:05

00093 Inline Event Listeners - Test Solution Part 3 of 3.mp4

09:18

00094 Inline Properties - Detailed Overview.mp4

02:31

00095 Inline Properties - Test Introduction Part 1 of 3.mp4

01:48

00096 Inline Properties - Test Setup Part 2 of 3.mp4

07:09

00097 Inline Properties - Test Solution Part 3 of 3.mp4

11:18

00098 addEventListener Method - Detailed Overview.mp4

04:36

00099 Callback Functions - A Quick Overview.mp4

05:19

00100 addEventListener - Test Introduction Part 1 of 3.mp4

01:59

00101 addEventListener - Test Setup Part 2 of 3.mp4

07:37

00102 addEventListener - Test Solution Part 3 of 3.mp4

11:35

00103 Extra Lecture - Three Ways to Define a Color.mp4

04:10

00104 Extra Lecture - Digits Bytes and Hexadecimal Format.mp4

08:15

00105 Extra Lecture - toString Method.mp4

02:23

00106 Section Introduction.mp4

01:42

00107 Quick Click Event Example - Part 1 of 2.mp4

04:11

00108 Quick Click Event Example - Part 2 of 2.mp4

05:39

00109 Event Types.mp4

04:33

00110 Keydown Event - Example.mp4

02:35

00111 Form Events - Introduction.mp4

01:11

00112 Overview of What Form We Will Build.mp4

02:00

00113 Form - Building Our Page - HTML + CSS.mp4

12:39

00114 How to Find Forms and Its Default Behavior.mp4

07:54

00115 Input Event Focus Event and Copy Paste Events.mp4

06:32

00116 Touch and Window Events.mp4

01:52

00117 Introduction.mp4

01:17

00118 Challenge 1 - Introduction.mp4

01:34

00119 Challenge 1 - Click Image and Display Text.mp4

05:21

00120 Challenge 2 - Introduction.mp4

01:32

00121 Challenge 2 - Reveal Text When Mouse Moves over Image.mp4

06:48

00122 Challenge 2 - Create a Black Dot When Mouse Moves over Image.mp4

06:21

00123 Challenge 2 - Dynamic Dot Movement and Complete Solution.mp4

10:11

00124 Challenge 3 - Mustache.mp4

01:47

00125 Challenge 3 - Placing a Mustache on an Image.mp4

10:50

00126 Section Introduction.mp4

01:25

00127 JS objects Versus DOM Objects in the Console.mp4

04:27

00128 Host Versus Native Objects.mp4

09:24

00129 The Importance of Understanding Inheritance.mp4

02:15

00130 Finding the createElement Method.mp4

04:37

00131 Element Node - Object Hierarchy.mp4

10:31

00132 Quick Recap on Object Hierarchy.mp4

01:44

00133 What Is DOM Extension.mp4

03:20

00134 Adding Our Own DOM Extension - Practical Example.mp4

05:05

00135 Are DOM Extensions a Good Thing.mp4

03:50

00136 The Problems with DOM Extensions Are.mp4

04:27

00137 Section Introduction.mp4

06:07

00138 An Event Is not an Isolated Occurrence.mp4

02:47

00139 The Two Phases of an Event - Capturing and Bubbling.mp4

04:05

00140 How to Listen to an Event During the Capturing Phase.mp4

02:36

00141 Example Let s Listen to an Event During Both Phases.mp4

04:13

00142 Example - Capturing and Bubbling Using the for of Loop.mp4

07:06

00143 Who Cares about Capturing Versus Bubbling.mp4

01:56

00144 How to Stop Event Capturing and Event Bubbling.mp4

01:35

00145 Example of stopPropagation.mp4

05:01

00146 Event Delegation Introduction.mp4

01:58

00147 Box Challenge - Introduction.mp4

01:44

00148 Box Challenge - Build.mp4

05:48

00149 Box Challenge - Solution.mp4

10:07

00150 What Is the classList Property.mp4

02:12

00151 Box Challenge - Perfecting Our Solution.mp4

04:26

00152 Quote Challenge - Introduction.mp4

01:22

00153 Quote Challenge - Build.mp4

09:37

00154 Quote Challenge - Solution.mp4

05:37

00155 List Challenge - Introduction.mp4

01:34

00156 List Challenge - Build.mp4

04:45

00157 List Challenge - Solution.mp4

07:34

00158 What Are We Going to Build.mp4

04:00

00159 High-Level Overview of the Website Structure.mp4

03:06

00160 Building Our Website HTML.mp4

11:20

00161 Coding the CSS for the Header.mp4

10:34

00162 Coding the CSS for the Form and List Section.mp4

10:35

00163 DOM Access Methods the forEach Method and Nodes - Quick Recap.mp4

07:55

00164 Removing Items - The Old-School Way.mp4

05:39

00165 Removing Items - Using Event Bubbling and Event Delegation.mp4

04:15

00166 Introduction to Dealing with Forms.mp4

03:21

00167 Default Behavior with Forms and How to Prevent Default Behavior.mp4

06:56

00168 Adding Items to Our List - Creating Elements Dynamically.mp4

07:14

00169 Adding Items to Our List - Adding Classes with the classList API.mp4

11:00

00170 Hiding and Un-Hiding Our Shopping List.mp4

07:05

00171 Recap of the Different Event Listeners We Have Already Dealt With.mp4

04:28

00172 Accessing an input within a form Element.mp4

10:35

00173 What Is the toLowerCase Method.mp4

09:22

00174 Accessing our li Tags and Introduction to the Array.from Method.mp4

04:57

00175 Introduction to the Array.from Method.mp4

02:15

00176 How Does Array.from Work - Some Practical Examples.mp4

08:29

00177 Using forEach to Loop Through Our Groceries Array.mp4

06:29

00178 Introduction to indexOf.mp4

01:55

00179 Using indexOf Method with Arrays.mp4

08:01

00180 Using indexOf Method with Strings.mp4

10:05

00181 Finishing Off Our Search Functionality.mp4

05:36

00182 Improvement - Clear the input Text When the User Clicks a Button.mp4

02:08

00183 Improvement - Let s Add Tabs.mp4

01:54

00184 Improvement - Building Our Tabs HTML + CSS.mp4

09:12

00185 What is the data Attribute.mp4

02:04

00186 Using the classList API to Add Dynamic Classes to Our Heading Tabs.mp4

08:57

00187 Improvement - Showing and Hiding Our Panels When the Heading Tab Is Clicked.mp4

05:37

00188 Improvement - Adding a Button for Our Answer.mp4

04:45

00189 Where to Next.mp4

02:42

DOM-2022---Using-the-DOM-and-JavaScript-to-Build-Dynamic-Websites-main.zip

Description

In the first half of the course, we will cover everything you need to start coding dynamic sites by yourself. It gives you the sound fundamentals and essential practical regarding the DOM. You will emerge from part 1 with a basic understanding and practical experience. It will take you to the point where you will understand what the DOM is, why we need it, how to access it, where to find it, and how to manipulate it. By the end of part 1, you will have learned about front-end web development by mastering the Document Object Model.

The second half of the course provides a whole different world of fun with amazing practical examples that will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end web development. By the end of part 2, you will have learned more about front-end web development by working with events in the Document Object Model.

By the end of this course, you will be able to “speak” and “walk” DOM by gaining an understanding of how you can manipulate it in meaningful and practical ways.

All the resources for this course are available at https://github.com/PacktPublishing/DOM-2022---Using-the-DOM-and-JavaScript-to-Build-Dynamic-Websites

More details

User Reviews

Rating

average 0

Total votes0

Focused display

Web Development

JavaScript

SkillZone .

Instructor's Courses

SkillZone has the simple goal of teaching complicated concepts in an effortless way. They are Johannesburg-based and create quality, easy-to-understand eLearning solutions. In today’s rapidly evolving workplace, it is imperative to make sure you have the skills and expertise required to succeed. The content we offer ensures that the learning materials and delivery approach are aligned to meet intended outcomes and address your specific training needs without covering topics that may be unnecessary or irrelevant. The author’s goal is to help you with in-depth learning whilst avoiding the pitfalls that he discovered the hard way. He is enthusiastic and has a lot of fun teaching and brings his personality and charisma to the teaching platform to benefit his students the most.

PacktPub

View courses PacktPub

Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.