Name: 20 Web Projects with Vanilla JavaScript
Price: 76.99 GBP
Availability: InStock

<strong>Delivering an interactive web experience can be challenging but not impossible. This course will provide you with the core fundamentals of front-end web programming and how to understand the DOM (Document Object Model). After that, we will take a deep dive into advanced DOM concepts, which include events, hierarchy, and bubbling.</strong>
        <p>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</p>
        <h2>What You Will Learn</h2><p>Explore different environments of JavaScript<br>Understand the Document Object Model<br>Learn the different types of events (such as keyup, mousemove, touch, and so on)<br>Learn to stop events from traversing up or down the DOM<br>Learn to access elements and remove items from the DOM<br>Explore object hierarchy</p>
        <h2>Audience</h2><p>It makes no difference where you are on your web development path. This course is appropriate for all skill levels.<br><br>If you want to become a full-stack web developer or construct dynamic, fascinating, and acclaimed websites, this course is for you.<br><br>Basic HTML, CSS, and JavaScript will be useful, but they are not required.</p>
        <h2>Approach</h2><p>Theories are theories. However, nothing beats sitting in front of your computer and typing code. That's why, during this course, we will be coding, laughing, and ripping our hair out together as we create real-world websites and exercises.<br><br>This course walks you through the DOM piece by piece using actual examples. We also make use of the most up-to-date JavaScript and browser technologies (such as the new delete API) to keep you ahead of the competition.</p>
        <h2>Key Features</h2><p>Learn how your website can come alive with actions, such as zitsy changes on click, color wheel, drop down, response on form submissions, and much more * Build awesome dynamic front-end applications * Become a pro at listening for events that are fired</p>
        <h2>Github Repo</h2><p>https://github.com/PacktPublishing/DOM-2022---Using-the-DOM-and-JavaScript-to-Build-Dynamic-Websites</p>
        <h2>About the Author</h2><h3>SkillZone .</h3><p>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.</p>
        <h2>Course Outline</h2><h4>1. Part 1 - Introduction</h4><p></p><br><h4>2. Part 1 - JavaScript vs DOM</h4><p></p><br><h4>3. Part 1 - Accessing the DOM</h4><p></p><br><h4>4. Part 1 - Nodes</h4><p></p><br><h4>5. Part 1 - Traversing the DOM</h4><p></p><br><h4>6. Part 1 - Creating, Removing and Cloning DOM Elements</h4><p></p><br><h4>7. Part 1 - Where to next?</h4><p></p><br><h4>8. Part 2 - Introduction to Events</h4><p></p><br><h4>9. Part 2 - Different types of events</h4><p></p><br><h4>10. Part 2 - Event Challenges</h4><p></p><br><h4>11. Part 2 - Object and node hierarchy</h4><p></p><br><h4>12. Part 2 - Capturing and Bubbling</h4><p></p><br><h4>13. Part 2 - Event Delegation and Challenges</h4><p></p><br><h4>14. Part 2 - Website Project - A Shopping List</h4><p></p><br><h4>15. Part 2 - Outro</h4><p></p>

Delivering an interactive web experience can be challenging but not impossible. This course will provide you with the core fundamentals of front-end web programming and how to understand the DOM (Document Object Model). After that, we will take a deep dive into advanced DOM concepts, which include events, hierarchy, and bubbling.
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
What You Will Learn
Explore different environments of JavaScript
Understand the Document Object Model
Learn the different types of events (such as keyup, mousemove, touch, and so on)
Learn to stop events from traversing up or down the DOM
Learn to access elements and remove items from the DOM
Explore object hierarchy
Audience
It makes no difference where you are on your web development path. This course is appropriate for all skill levels.

If you want to become a full-stack web developer or construct dynamic, fascinating, and acclaimed websites, this course is for you.

Basic HTML, CSS, and JavaScript will be useful, but they are not required.
Approach
Theories are theories. However, nothing beats sitting in front of your computer and typing code. That's why, during this course, we will be coding, laughing, and ripping our hair out together as we create real-world websites and exercises.

This course walks you through the DOM piece by piece using actual examples. We also make use of the most up-to-date JavaScript and browser technologies (such as the new delete API) to keep you ahead of the competition.
Key Features
Learn how your website can come alive with actions, such as zitsy changes on click, color wheel, drop down, response on form submissions, and much more * Build awesome dynamic front-end applications * Become a pro at listening for events that are fired
Github Repo
https://github.com/PacktPublishing/DOM-2022---Using-the-DOM-and-JavaScript-to-Build-Dynamic-Websites
About the Author
SkillZone .
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.
Course Outline
1. Part 1 - Introduction

2. Part 1 - JavaScript vs DOM

3. Part 1 - Accessing the DOM

4. Part 1 - Nodes

5. Part 1 - Traversing the DOM

6. Part 1 - Creating, Removing and Cloning DOM Elements

7. Part 1 - Where to next?

8. Part 2 - Introduction to Events

9. Part 2 - Different types of events

10. Part 2 - Event Challenges

11. Part 2 - Object and node hierarchy

12. Part 2 - Capturing and Bubbling

13. Part 2 - Event Delegation and Challenges

14. Part 2 - Website Project - A Shopping List

15. Part 2 - Outro


Packt

JavaScript

Web Development

Delivering an interactive web experience can be challenging but not impossible. This course will provide you with the core fundamentals of front-end web programming and how to understand the DOM (Document Object Model). After that, we will take a deep dive into advanced DOM concepts, which include events, hierarchy, and bubbling.

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

General Admission

<strong>Do you want to know how to add interaction or dynamic content to your webpages; then this is the course for you!

Multiple hands-on projects are included in this course that are designed to help you learn more about JavaScript and interacting with the DOM.</strong>
        <p>JavaScript can bring your web pages to life. Select page elements, make changes and update them as needed. Power up your web pages. Create amazing content on your pages, driven dynamically with JavaScript. Projects within this course are designed to help you learn more about JavaScript and interacting with the DOM. Learn by example, this course is loaded with fun projects to help you learn and prove what can be done with JavaScript.

First is an introduction to the DOM and how JavaScript can create page interactions. Explore how to write JavaScript code, select page elements, and more. This course is loaded with useful projects to help you learn more about creating interactive and dynamic web content with JavaScript.

The course covers the following topics:

- JavaScript projects
- DOM interactive
- Dynamic webpages
- Introduction to web development
- Course resource guide
- JavaScript starter projects
- DOM simple projects to start coding
- JavaScript DOM interactive components and useful projects
- JavaScript DOM fun projects
- Interactive DOM elements

By the end of the course, you will be able to create interactive and dynamic web content with JavaScript.

All resources and code files are placed here: https://github.com/PacktPublishing/JavaScript-DOM-Projects-for-Interactive-Dynamic-Web-Pages</p>
        <h2>What You Will Learn</h2><p>Use JavaScript to create interactive webpages<br>Select, update, and manipulate webpage elements with JavaScript<br>Learn about JavaScript Request Animation Frame<br>Dynamic content and dynamic webpages with JavaScript and DOM<br>Learn how to encrypt string values with just JavaScript input, encode, and decode<br>Explore modern techniques and tricks of creating a portfolio website</p>
        <h2>Audience</h2><p>This course is for JavaScript developers, web designers, web application developers, web masters, and for anyone who wants to create fun web projects and someone who wants to learn more about JavaScript and the DOM. Beginner JavaScript knowledge is needed as the course covers only JavaScript relevant to the building of the game. Also, HTML and CSS knowledge is essential as the scope of this course is all focused-on JavaScript.</p>
        <h2>Approach</h2><p>The instructor follows a learn-by-doing approach. This course covers everything you need to know in a step-by-step format so that you can start coding JavaScript and create amazing things with code.</p>
        <h2>Key Features</h2><p>Get started with JavaScript DOM coding and development * Create fun interactive games and components with JavaScript * Learn to detect collision between page elements with JavaScript DOM</p>
        <h2>Github Repo</h2><p>https://github.com/PacktPublishing/JavaScript-DOM-Projects-for-Interactive-Dynamic-Web-Pages</p>
        <h2>About the Author</h2><h3>Laurence Lars Svekis</h3><p>Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world.</p>
        <h2>Course Outline</h2><h4>1. Getting started with JavaScript DOM coding and development</h4><p></p><br><h4>2. JavaScript Starter Projects DOM Simple Projects to Start Coding</h4><p></p><br><h4>3. JavaScript DOM Interactive Components and Useful Projects</h4><p></p><br><h4>4. JavaScript DOM Fun Projects Interactive DOM Elements</h4><p></p><br><h4>5. JavaScript DOM Questions and Answers Coding Examples</h4><p></p>

Do you want to know how to add interaction or dynamic content to your webpages; then this is the course for you! Multiple hands-on projects are included in this course that are designed to help you learn more about JavaScript and interacting with the DOM.
JavaScript can bring your web pages to life. Select page elements, make changes and update them as needed. Power up your web pages. Create amazing content on your pages, driven dynamically with JavaScript. Projects within this course are designed to help you learn more about JavaScript and interacting with the DOM. Learn by example, this course is loaded with fun projects to help you learn and prove what can be done with JavaScript. First is an introduction to the DOM and how JavaScript can create page interactions. Explore how to write JavaScript code, select page elements, and more. This course is loaded with useful projects to help you learn more about creating interactive and dynamic web content with JavaScript. The course covers the following topics: - JavaScript projects
- DOM interactive
- Dynamic webpages
- Introduction to web development
- Course resource guide
- JavaScript starter projects
- DOM simple projects to start coding
- JavaScript DOM interactive components and useful projects
- JavaScript DOM fun projects
- Interactive DOM elements By the end of the course, you will be able to create interactive and dynamic web content with JavaScript. All resources and code files are placed here: https://github.com/PacktPublishing/JavaScript-DOM-Projects-for-Interactive-Dynamic-Web-Pages
What You Will Learn
Use JavaScript to create interactive webpages
Select, update, and manipulate webpage elements with JavaScript
Learn about JavaScript Request Animation Frame
Dynamic content and dynamic webpages with JavaScript and DOM
Learn how to encrypt string values with just JavaScript input, encode, and decode
Explore modern techniques and tricks of creating a portfolio website
Audience
This course is for JavaScript developers, web designers, web application developers, web masters, and for anyone who wants to create fun web projects and someone who wants to learn more about JavaScript and the DOM. Beginner JavaScript knowledge is needed as the course covers only JavaScript relevant to the building of the game. Also, HTML and CSS knowledge is essential as the scope of this course is all focused-on JavaScript.
Approach
The instructor follows a learn-by-doing approach. This course covers everything you need to know in a step-by-step format so that you can start coding JavaScript and create amazing things with code.
Key Features
Get started with JavaScript DOM coding and development * Create fun interactive games and components with JavaScript * Learn to detect collision between page elements with JavaScript DOM
Github Repo
https://github.com/PacktPublishing/JavaScript-DOM-Projects-for-Interactive-Dynamic-Web-Pages
About the Author
Laurence Lars Svekis
Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world.
Course Outline
1. Getting started with JavaScript DOM coding and development

2. JavaScript Starter Projects DOM Simple Projects to Start Coding

3. JavaScript DOM Interactive Components and Useful Projects

4. JavaScript DOM Fun Projects Interactive DOM Elements

5. JavaScript DOM Questions and Answers Coding Examples


Do you want to know how to add interaction or dynamic content to your webpages; then this is the course for you!

Multiple hands-on projects are included in this course that are designed to help you learn more about JavaScript and interacting with the DOM.

JavaScript DOM Projects for Interactive Dynamic Webpages

<strong>This course primarily focuses on explaining the concepts of the Document Object Model through a project-based approach. It will help you enhance your coding skills using JavaScript along with a deeper understanding of the DOM fundamentals.</strong>
        <p>The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This is what we are going to use when we work with JavaScript and interact in any way dynamically with the document.

When one uses Angular, Vue, React, or any other library or framework to create modern web applications, the DOM is what these use under the hood.

This course will make you stand out as a JavaScript developer. You will get a clear understanding of the DOM fundamentals. The course will help you understand what the DOM is and how to interact dynamically with an HTML document. We will build user interfaces using modern and easy JavaScript with classes, private attributes, and DOM APIs.

Learn optimization techniques and apply easy bundling techniques that include dynamic CSS loading. We will search for documentation; memorizing all the DOM interfaces is not required. While building the game application, you will understand how to interact with the DOM and user input through event listeners.</p>
        <h2>What You Will Learn</h2><p>Understand what DOM is and how to interact dynamically with an HTML document<br>Learn interactive User Interfaces(UI) development<br>Learn optimization techniques<br>Apply easy bundling techniques that include dynamic CSS loading<br>Interact with the DOM and user input through event listeners<br>Enhance object-oriented programming concepts and skills</p>
        <h2>Audience</h2><p>This course is for coding bootcamp graduates, computer science graduates, beginner JavaScript students, intermediate JavaScript students, and advanced JavaScript students. It is a beginner and intermediate-friendly course.</p>
        <h2>Approach</h2><p>This is a complete hands-on course where you will be building an interactive game application using HTML, DOM, and modern JavaScript.</p>
        <h2>Key Features</h2><p>Use modern JavaScript with classes, private attributes, and DOM APIs to build user interfaces * Build an interactive game that will help you understand the fundamentals of the Document Object Model * Learn to optimize and bundle your code</p>
        <h2>Github Repo</h2><p>https://github.com/PacktPublishing/Learn-DOM-Manipulation-with-Easy-Modern-JavaScript</p>
        <h2>About the Author</h2><h3>Juan Lizarazo</h3><p>Juan Lizarazo is a software engineer based in Salt Lake City, Utah, with a focused background in web app development, cloud, leadership, team scaling, and distributed applications. He is also a software engineering instructor, who has experience in teaching computer science-related topics such as data structures and algorithms to students all over the US. He has made contributions to open-source, talked at conferences, and answered questions on Stack Overflow.</p>
        <h2>Course Outline</h2><h4>1. Welcome</h4><p></p><br><h4>2. DOM Fundamentals</h4><p></p><br><h4>3. Code DOM Adventure</h4><p></p><br><h4>4. Creating elements</h4><p></p><br><h4>5. Dynamic CSS</h4><p></p><br><h4>6. Profiling the pixel pipeline</h4><p></p><br><h4>7. Animations using DOM changes</h4><p></p><br><h4>8. Planning DOM changes with a state model</h4><p></p><br><h4>9. Easy bundling</h4><p></p><br><h4>10. DOM updates with basic state driven development</h4><p></p><br><h4>11. The player, Interacting with user input</h4><p></p><br><h4>12. Interactive DOM, breaking walls</h4><p></p><br><h4>13. Portal to exit the game</h4><p></p><br><h4>14. Animating all the things</h4><p></p><br><h4>15. DOM sound effects</h4><p></p>

This course primarily focuses on explaining the concepts of the Document Object Model through a project-based approach. It will help you enhance your coding skills using JavaScript along with a deeper understanding of the DOM fundamentals.
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This is what we are going to use when we work with JavaScript and interact in any way dynamically with the document. When one uses Angular, Vue, React, or any other library or framework to create modern web applications, the DOM is what these use under the hood. This course will make you stand out as a JavaScript developer. You will get a clear understanding of the DOM fundamentals. The course will help you understand what the DOM is and how to interact dynamically with an HTML document. We will build user interfaces using modern and easy JavaScript with classes, private attributes, and DOM APIs. Learn optimization techniques and apply easy bundling techniques that include dynamic CSS loading. We will search for documentation; memorizing all the DOM interfaces is not required. While building the game application, you will understand how to interact with the DOM and user input through event listeners.
What You Will Learn
Understand what DOM is and how to interact dynamically with an HTML document
Learn interactive User Interfaces(UI) development
Learn optimization techniques
Apply easy bundling techniques that include dynamic CSS loading
Interact with the DOM and user input through event listeners
Enhance object-oriented programming concepts and skills
Audience
This course is for coding bootcamp graduates, computer science graduates, beginner JavaScript students, intermediate JavaScript students, and advanced JavaScript students. It is a beginner and intermediate-friendly course.
Approach
This is a complete hands-on course where you will be building an interactive game application using HTML, DOM, and modern JavaScript.
Key Features
Use modern JavaScript with classes, private attributes, and DOM APIs to build user interfaces * Build an interactive game that will help you understand the fundamentals of the Document Object Model * Learn to optimize and bundle your code
Github Repo
https://github.com/PacktPublishing/Learn-DOM-Manipulation-with-Easy-Modern-JavaScript
About the Author
Juan Lizarazo
Juan Lizarazo is a software engineer based in Salt Lake City, Utah, with a focused background in web app development, cloud, leadership, team scaling, and distributed applications. He is also a software engineering instructor, who has experience in teaching computer science-related topics such as data structures and algorithms to students all over the US. He has made contributions to open-source, talked at conferences, and answered questions on Stack Overflow.
Course Outline
1. Welcome

2. DOM Fundamentals

3. Code DOM Adventure

4. Creating elements

5. Dynamic CSS

6. Profiling the pixel pipeline

7. Animations using DOM changes

8. Planning DOM changes with a state model

9. Easy bundling

10. DOM updates with basic state driven development

11. The player, Interacting with user input

12. Interactive DOM, breaking walls

13. Portal to exit the game

14. Animating all the things

15. DOM sound effects


HTML

This course primarily focuses on explaining the concepts of the Document Object Model through a project-based approach. It will help you enhance your coding skills using JavaScript along with a deeper understanding of the DOM fundamentals.

Learn DOM Manipulation with Easy Modern JavaScript

<strong>JavaScript can interface with the Document Object Model and help make webpage elements come to life! Interact with web users through event listeners to make your web pages respond to users and code. This practical course will help you build modern, interactive, and dynamic web pages. You need to have previous experience with JavaScript and HTML to get started.</strong>
        <p>The Document Object Model (DOM) is an object that contains a data representation of the page elements. The DOM is structured in a tree-like format, as objects that comprise the webpage and content of the HTML web document. Document Object Model (DOM) is a programming interface for HTML documents, that is, the logical structure of a page and how the page content can be accessed and manipulated.

The first part covers all the fundamentals to code JavaScript, with examples and coding challenges in each lesson. Explore how to get started with code and set up your developer environment. Create HTML files and connect your JavaScript to the page elements. Cover JavaScript coding best practices with tips and resources; how to set up and use variables within your code; different data types and how JavaScript manages the values; what functions are and how to use them in your code; and DOM and how JavaScript code can use the DOM to connect, update, and manipulate webpage elements.

The second part involves DOM webpage interaction with JavaScript. Learn how to create and delete elements with JavaScript code and learn about page event listeners. In the last section, you will learn to create interactive and dynamic web projects.

By the end of this course, you will learn how to use the DOM and develop skills in how to manipulate the DOM within your website.

Code files for this course are available at: https://github.com/PacktPublishing/JavaScript-DOM---Interactive-and-Dynamic-JavaScript</p>
        <h2>What You Will Learn</h2><p>Explore JavaScript code tips<br>Learn to declare JavaScript variables<br>Explore logic conditions with JavaScript<br>Learn to create elements with JavaScript code<br>Learn about page clickers and random words maker<br>Understand object construction with JavaScript</p>
        <h2>Audience</h2><p>This course is for anyone who wants to expand their knowledge of JavaScript and those who want to know more about DOM. This course can also be taken by JavaScript developers and HTML and CSS developers who want to learn about DOM.<br><br>Previous JavaScript and HTML experience is a requirement as the contents of the course are to introduce the Document Object Model and how to connect JavaScript to the browser DOM.</p>
        <h2>Approach</h2><p>This is a complete hands-on course that includes source code, tips, resources, and challenges to help you cover core aspects of JavaScript and cover the Document Object Model (DOM).</p>
        <h2>Key Features</h2><p>Covers all the fundamentals to code JavaScript with examples and coding challenges in each lesson * See how easy it is to select elements and make them interactive * Explore JavaScript dynamic type conversion</p>
        <h2>Github Repo</h2><p>https://github.com/packtpublishing/javascript-dom---interactive-and-dynamic-javascript</p>
        <h2>About the Author</h2><h3>Laurence Lars Svekis</h3><p>Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world.</p>
        <h2>Course Outline</h2><h4>1. Introduction to JavaScript and Interactive Webpage Content</h4><p></p><br><h4>2. DOM Webpage Interaction with JavaScript</h4><p></p><br><h4>3. Interactive and Dynamic Web Projects with JavaScript Code DOM Examples</h4><p></p>

JavaScript can interface with the Document Object Model and help make webpage elements come to life! Interact with web users through event listeners to make your web pages respond to users and code. This practical course will help you build modern, interactive, and dynamic web pages. You need to have previous experience with JavaScript and HTML to get started.
The Document Object Model (DOM) is an object that contains a data representation of the page elements. The DOM is structured in a tree-like format, as objects that comprise the webpage and content of the HTML web document. Document Object Model (DOM) is a programming interface for HTML documents, that is, the logical structure of a page and how the page content can be accessed and manipulated. The first part covers all the fundamentals to code JavaScript, with examples and coding challenges in each lesson. Explore how to get started with code and set up your developer environment. Create HTML files and connect your JavaScript to the page elements. Cover JavaScript coding best practices with tips and resources; how to set up and use variables within your code; different data types and how JavaScript manages the values; what functions are and how to use them in your code; and DOM and how JavaScript code can use the DOM to connect, update, and manipulate webpage elements. The second part involves DOM webpage interaction with JavaScript. Learn how to create and delete elements with JavaScript code and learn about page event listeners. In the last section, you will learn to create interactive and dynamic web projects. By the end of this course, you will learn how to use the DOM and develop skills in how to manipulate the DOM within your website. Code files for this course are available at: https://github.com/PacktPublishing/JavaScript-DOM---Interactive-and-Dynamic-JavaScript
What You Will Learn
Explore JavaScript code tips
Learn to declare JavaScript variables
Explore logic conditions with JavaScript
Learn to create elements with JavaScript code
Learn about page clickers and random words maker
Understand object construction with JavaScript
Audience
This course is for anyone who wants to expand their knowledge of JavaScript and those who want to know more about DOM. This course can also be taken by JavaScript developers and HTML and CSS developers who want to learn about DOM.

Previous JavaScript and HTML experience is a requirement as the contents of the course are to introduce the Document Object Model and how to connect JavaScript to the browser DOM.
Approach
This is a complete hands-on course that includes source code, tips, resources, and challenges to help you cover core aspects of JavaScript and cover the Document Object Model (DOM).
Key Features
Covers all the fundamentals to code JavaScript with examples and coding challenges in each lesson * See how easy it is to select elements and make them interactive * Explore JavaScript dynamic type conversion
Github Repo
https://github.com/packtpublishing/javascript-dom---interactive-and-dynamic-javascript
About the Author
Laurence Lars Svekis
Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world.
Course Outline
1. Introduction to JavaScript and Interactive Webpage Content

2. DOM Webpage Interaction with JavaScript

3. Interactive and Dynamic Web Projects with JavaScript Code DOM Examples


String

Web Design

JavaScript can interface with the Document Object Model and help make webpage elements come to life! Interact with web users through event listeners to make your web pages respond to users and code. This practical course will help you build modern, interactive, and dynamic web pages. You need to have previous experience with JavaScript and HTML to get started.

JavaScript DOM - Interactive and Dynamic Web Pages

<div>
							<div>
					<div>
			<div>
							<div>
						<div>
				<div>
			<h2><b>Course Overview</b></h2>		</div>
				</div>
				<div>
				<div>
					<div><p><span>Are you looking to become a Javascript Developer? The </span><b>DOM Manipulation with JavaScript</b><span> course breaks down DOM manipulation in JavaScript into easy to follow bitesize modules, ideal for beginners. You will learn how to interact with the DOM to create dynamic interaction on web pages, create new HTML elements and style them dynamically, equipping you with the skills to effectively manipulate the DOM within your website.</span></p><p><span>Through this instructor-guided course, you will build a solid base of knowledge required to become a JavaScript Developer and create dynamic and interactive web pages that can respond to users' actions. It will teach you everything you need to know to make the most of Javascript to get, change, add or delete HTML elements, for expert web development. </span></p><p><span>Enrol in this step-by-step training course today and learn DOM manipulation from the experts.</span></p></div>
				</div>
				</div>
				<div>
				<div>
					<div><p>This best selling <strong>DOM Manipulation with JavaScript </strong>has been developed by industry professionals and has already been completed by hundreds of satisfied students. This in-depth <strong>DOM Manipulation with JavaScript </strong>is suitable for anyone who wants to build their professional skill set and improve their expert knowledge.</p><p>The <strong>DOM Manipulation with JavaScript </strong>is CPD-accredited, so you can be confident you're completing a quality training course will boost your CV and enhance your career potential. The <strong>DOM Manipulation with JavaScript </strong>is made up of several information-packed modules which break down each topic into bite-sized chunks to ensure you understand and retain everything you learn.</p><p>After successfully completing the<strong> DOM Manipulation with JavaScript</strong>, you will be awarded a certificate of completion as proof of your new skills. If you are looking to pursue a new career and want to build your professional skills to excel in your chosen field, the certificate of completion from the <strong>DOM Manipulation with JavaScript </strong>will help you stand out from the crowd. You can also validate your certification on our website.</p><p>We know that you are busy and that time is precious, so we have designed the <strong>DOM Manipulation with JavaScript </strong>to be completed at your own pace, whether that's part-time or full-time. Get full course access upon registration and access the course materials from anywhere in the world, at any time, from any internet-enabled device. </p><p>Our experienced tutors are here to support you through the entire learning process and answer any queries you may have via email.</p></div>
				</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div><div>
							<div>
					<div>
			<div>
							<div>
						<div>
				<div>
					</div>
				</div>
				<section>
						<div>
							<div>
					<div>
			<div>
							<div>
						<div>
				<div>
					<div>
											
															
											</div>
				</div>
				</div>
						</div>
					</div>
		</div>
				<div>
			<div>
							<div>
						<div>
				<div>
					<div>
											
															
											</div>
				</div>
				</div>
						</div>
					</div>
		</div>
				<div>
			<div>
							<div>
						<div>
				<div>
					<div>
											
															
											</div>
				</div>
				</div>
						</div>
					</div>
		</div>
				<div>
			<div>
							<div>
						<div>
				<div>
					<div>
											
															
											</div>
				</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
						</div>
					</div>
		</div>
								</div>
					</div>

Course Overview
Are you looking to become a Javascript Developer? The DOM Manipulation with JavaScript course breaks down DOM manipulation in JavaScript into easy to follow bitesize modules, ideal for beginners. You will learn how to interact with the DOM to create dynamic interaction on web pages, create new HTML elements and style them dynamically, equipping you with the skills to effectively manipulate the DOM within your website.
Through this instructor-guided course, you will build a solid base of knowledge required to become a JavaScript Developer and create dynamic and interactive web pages that can respond to users' actions. It will teach you everything you need to know to make the most of Javascript to get, change, add or delete HTML elements, for expert web development. 
Enrol in this step-by-step training course today and learn DOM manipulation from the experts.
This best selling DOM Manipulation with JavaScript has been developed by industry professionals and has already been completed by hundreds of satisfied students. This in-depth DOM Manipulation with JavaScript is suitable for anyone who wants to build their professional skill set and improve their expert knowledge.
The DOM Manipulation with JavaScript is CPD-accredited, so you can be confident you're completing a quality training course will boost your CV and enhance your career potential. The DOM Manipulation with JavaScript is made up of several information-packed modules which break down each topic into bite-sized chunks to ensure you understand and retain everything you learn.
After successfully completing the DOM Manipulation with JavaScript, you will be awarded a certificate of completion as proof of your new skills. If you are looking to pursue a new career and want to build your professional skills to excel in your chosen field, the certificate of completion from the DOM Manipulation with JavaScript will help you stand out from the crowd. You can also validate your certification on our website.
We know that you are busy and that time is precious, so we have designed the DOM Manipulation with JavaScript to be completed at your own pace, whether that's part-time or full-time. Get full course access upon registration and access the course materials from anywhere in the world, at any time, from any internet-enabled device. 
Our experienced tutors are here to support you through the entire learning process and answer any queries you may have via email.

Course Cloud

DOM Manipulation with JavaScript

Register on the Learn DOM Manipulation with JavaScript today and build the experience, skills and knowledge you need to enhance your professional development and work towards your dream job. Study this course through online learning and take the first steps towards a long-term career.
The course consists of a number of easy to digest, in-depth modules, designed to provide you with a detailed, expert level of knowledge. Learn through a mixture of instructional video lessons and online study materials.
Receive online tutor support as you study the course, to ensure you are supported every step of the way. Get an e-certificate as proof of your course completion.
The Learn DOM Manipulation with JavaScript is incredibly great value and allows you to study at your own pace. Access the course modules from any internet-enabled device, including computers, tablet, and smartphones.
The course is designed to increase your employability and equip you with everything you need to be a success. Enrol on the now and start learning instantly!
What You Get With The Learn DOM Manipulation with JavaScript
Receive a e-certificate upon successful completion of the course
Get taught by experienced, professional instructors
Study at a time and pace that suits your learning style
Get instant feedback on assessments
24/7 help and advice via email or live chat
Get full tutor support on weekdays (Monday to Friday)
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
Certification
Upon successful completion of the course, you will be able to obtain your course completion e-certificate free of cost. Print copy by post is also available at an additional cost of £9.99 and PDF Certificate at £4.99.
Who Is This Course For:
The course is ideal for those who already work in this sector or are an aspiring professional. This course is designed to enhance your expertise and boost your CV. Learn key skills and gain a professional qualification to prove your newly-acquired knowledge.
Requirements:
The online training is open to all students and has no formal entry requirements. To study the Learn DOM Manipulation with JavaScript, all your need is a passion for learning, a good understanding of English, numeracy, and IT skills. You must also be over the age of 16. 
Course Content
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

Janets

Learning & Development

Online Course Marketing

Online Course Creation

Trainers Course

Learn DOM Manipulation with JavaScript

<section>
						<div>
				<div>
				<div>
			<div>
					<div>
				<div>
				<div>
					<div>
			<div></div>
		</div>
				</div>
				</div>
				<div>
				<div>
			
				</div>
				<div>
				<div>
					<div><p>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.</p><p>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.</p><p>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. </p><p>This course is fully CPD-accredited and broken down into several manageable modules, making it ideal for aspiring professionals.</p></div>
				</div>
				</div>
						</div>
			</div>
		</div>
						</div>
			</div>
		</div></section>
				<section>
						<div>
				<div>
				<div>
			<div>
					<div>
				<div>
				<div>
			<h2><b> Learning outcome</b></h2>		</div>
				</div>
				<div>
				<div>
					<ul>
							<li>
											<span>
													</span>
										<span>Familiar yourself with the recent development and updates of the relevant industry</span>
									</li>
								<li>
											<span>
													</span>
										<span>Know how to use your theoretical knowledge to adapt in any working environment</span>
									</li>
								<li>
											<span>
													</span>
										<span>Get help from our expert tutors anytime you need</span>
									</li>
								<li>
											<span>
													</span>
										<span>Access to course contents that are designed and prepared by industry professionals</span>
									</li>
								<li>
											<span>
													</span>
										<span>Study at your convenient time and from wherever you want</span>
									</li>
						</ul>
				</div>
				</div>
						</div>
			</div>
		</div>
						</div>
			</div>
		</section>
				<section>
						<div>
				<div>
				<div>
			<div>
					<div>
				<div>
				<div>
					</div>
				</div>
				<div>
				<div>
					
			</div>
				</div>
						</div>
			</div>
		</div>
						</div>
			</div>
		</section>
				<section>
						<div>
				<div>
				<div>
			<div>
					<div>
				<div>
				<div>
			<h2> <b>Why should I take this course?</b></h2>		</div>
				</div>
				<div>
				<div>
					<ul>
							<li>
											<span>
													</span>
										<span>Affordable premium-quality E-learning content, you can learn at your own pace.</span>
									</li>
								<li>
											<span>
													</span>
										<span>You will receive a completion certificate upon completing the course.</span>
									</li>
								<li>
											<span>
													</span>
										<span>Internationally recognized Accredited Qualification will boost up your resume.</span>
									</li>
								<li>
											<span>
													</span>
										<span>You will learn the researched and proven approach adopted by successful people to transform their careers.</span>
									</li>
								<li>
											<span>
													</span>
										<span>You will be able to incorporate various techniques successfully and understand your customers better.</span>
									</li>
						</ul>
				</div>
				</div>
						</div>
			</div>
		</div>
						</div>
			</div>
		</section>
				<section>
						<div>
				<div>
				<div>
			<div>
					<div>
				<div>
				<div>
			<h2> <b>Requirements</b></h2>		</div>
				</div>
				<div>
				<div>
					<ul>
							<li>
											<span>
													</span>
										<span>No formal qualifications required, anyone from any academic background can take this course.</span>
									</li>
								<li>
											<span>
													</span>
										<span>Access to a computer or digital device with internet connectivity.</span>
									</li>
						</ul>
				</div>
				</div>
						</div>
			</div>
		</div>
						</div>
			</div>
		</section>

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
 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.

Skill Up

Professional Skills Course (PSC)

Digital Skills

Continuous Professional Development (CPD)

Gain the solid skills and knowledge to kickstart a successful career and learn from the experts with this

Dom Manipulation Training With Javascript

<strong>Learn all the core fundamentals of modern web design, covering all the commonly used syntax for HTML, CSS, JavaScript, and JavaScript DOM with the help of this beginner-friendly course. Go from a static web page to an interactive one with JavaScript. This course is designed to get you started quickly and easily with creating web pages.</strong>
        <p>JavaScript code runs your browser as your HTML page loads. Adding JavaScript to your code can improve the user experience of the web page. This course will cover the basics of getting started with JavaScript, HTML, and CSS and the code syntax to write JavaScript code. JavaScript is a set of instructions you can add to your code to let the browser know what to do next.

It covers the core concepts of JavaScript so that you can try the code and get familiar with what it does. Using JavaScript, you can access the HTML DOM in the browser, which allows you to interact and manipulate web page content. JavaScript creates the interactive and dynamic content seen today on all major modern web pages.

Learn what CSS is and how you can style your web pages with Cascading Style Sheets (CSS). HTML provides a structure for your webpage; CSS allows you to style your page. Design the page with your style, set up page layouts, add colors, fonts, and more. Present your webpages as you want them to look, independent of the HTML; you can make your web content look and style as you imagine it should.

You will also learn Document Object Model (DOM), which is a programming interface for HTML documents; that is, the logical structure of a page and how the page content can be accessed and manipulated.

By the end of the course, you can start coding quickly and focus on designing your interactive and dynamic web pages.

All resources and code files are placed here: https://github.com/PacktPublishing/Front-End-Web-Development-with-Modern-HTML-CSS-and-JavaScript</p>
        <h2>What You Will Learn</h2><p>How to create webpages with HTML and CSS<br>Create interactive web content with JavaScript<br>Bring your web pages to life with code<br>Learn the basics of JavaScript<br>Learn how to build modern responsive websites<br>Create interactive and dynamic web pages</p>
        <h2>Audience</h2><p>This course is for beginners in web design and for anyone who wants to learn more about coding or for anyone curious to learn HTML, CSS, and JavaScript. This course can also be taken by someone who wants to create interactive web pages and who wants a quick and effortless way to start coding.</p>
        <h2>Approach</h2><p>In this practical hands-on course, you will have 9+ hours of premium content with source codes, tips, resources, and challenges to get the most out of this course.</p>
        <h2>Key Features</h2><p>Understand how to create elements with code and add them to your web page * Learn to select elements from your web page with JavaScript * Learn to style your web pages with CSS</p>
        <h2>Github Repo</h2><p>https://github.com/PacktPublishing/Front-End-Web-Development-with-Modern-HTML-CSS-and-JavaScript</p>
        <h2>About the Author</h2><h3>Laurence Svekis</h3><p>Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world.</p>
        <h2>Course Outline</h2><h4>1. Introduction to Modern Web Design and Development with HTML, CSS, and JavaScript</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Promotional Video</p><p style='margin: 0'>This video explains the course and the author.</p></td></tr><tr><td style='padding: 15px;'><p>2. Introduction to Getting Started with the Course and HTML Code</p><p style='margin: 0'>This video explains the guide to JavaScript code.</p></td></tr><tr><td style='padding: 15px;'><p>3. Getting Started with Web Design: Create Your Web Environment and Start Coding</p><p style='margin: 0'>This video explains how to create your first web environment and start coding.</p></td></tr><tr><td style='padding: 15px;'><p>4. How to Create Your First HTML Page HTML Coding Beginners</p><p style='margin: 0'>This video explains how to create your first HTML.</p></td></tr><tr><td style='padding: 15px;'><p>5. What is an HTML Element; How HTML Works with HTML Samples</p><p style='margin: 0'>This video explains HTML elements and how HTML works with HTML samples.</p></td></tr><tr><td style='padding: 15px;'><p>6. Start with HTML Headings Common Tags HTML</p><p style='margin: 0'>This video explains HTML headings common tags.</p></td></tr><tr><td style='padding: 15px;'><p>7. Create HTML Self-Closing Tags and How They Work</p><p style='margin: 0'>This video explains how to create HTML self-closing tags and how they work.</p></td></tr><tr><td style='padding: 15px;'><p>8. Setting Element Attributes in HTML Code</p><p style='margin: 0'>This video explains setting element attributes in HTML code.</p></td></tr><tr><td style='padding: 15px;'><p>9. How to Create Links HTML Hyperlinks HTML Links Anchor Tag</p><p style='margin: 0'>This video explains how to create links HTML hyperlinks HTML links anchor tag.</p></td></tr><tr><td style='padding: 15px;'><p>10. Adding Images to HTML Pages</p><p style='margin: 0'>This video explains adding images to HTML pages HTML images.</p></td></tr><tr><td style='padding: 15px;'><p>11. HTML Lists Adding Content Lists with HTML Lists</p><p style='margin: 0'>This video explains adding content lists with HTML lists.</p></td></tr><tr><td style='padding: 15px;'><p>12. What Are HTML Tables and How to Use Tables to Present Readable Content</p><p style='margin: 0'>This video explains HTML tables and how to use tables to present readable content.</p></td></tr><tr><td style='padding: 15px;'><p>13. HTML5 New Semantic Elements Meaning in the Element Tag Name</p><p style='margin: 0'>This video explains HTML 5 new semantic elements.</p></td></tr><tr><td style='padding: 15px;'><p>14. How to Create a Simple HTML Webpage</p><p style='margin: 0'>This video explains how to create a simple HTML webpage.</p></td></tr><tr><td style='padding: 15px;'><p>15. HTML Online Create a GitHub Page Create Your First Webpage on GitPages</p><p style='margin: 0'>This video explains how to create a GitHub page. Create your first webpage on GitPages.</p></td></tr></tbody></table><br><h4>2. Style Your Webpages with Cascading Style Sheets</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Introduction to Getting Started with CSS</p><p style='margin: 0'>This video explains getting started with CSS.</p></td></tr><tr><td style='padding: 15px;'><p>2. Adding Styling to Your HTML with CSS Code for Beginners</p><p style='margin: 0'>This video explains adding styling to your HTML with CSS code for beginners.</p></td></tr><tr><td style='padding: 15px;'><p>3. Styling Overview Get Styling with CSS</p><p style='margin: 0'>This video explains styling overview get styling with CSS.</p></td></tr><tr><td style='padding: 15px;'><p>4. Colors Background and Font Color with CSS Update HTML Element Colors</p><p style='margin: 0'>This video explains colors background and font colors with CSS.</p></td></tr><tr><td style='padding: 15px;'><p>5. What Is the CSS Box Model - Box Model Border Padding Margin</p><p style='margin: 0'>This video explains box model border padding margin.</p></td></tr><tr><td style='padding: 15px;'><p>6. Text Options with CSS Code Setting Properties and Value to Transform Text</p><p style='margin: 0'>This video explains text options with CSS code setting properties and values to transform text.</p></td></tr><tr><td style='padding: 15px;'><p>7. Adding Fonts and Font Styles to Your Webpage Elements with CSS</p><p style='margin: 0'>This video explains adding fonts and font styles to your webpage elements with CSS.</p></td></tr><tr><td style='padding: 15px;'><p>8. Link States Pseudo-Classes Setting Different States with CSS</p><p style='margin: 0'>This video explains link states pseudo-classes setting different states with CSS.</p></td></tr><tr><td style='padding: 15px;'><p>9. How to Set Display Properties for Page Elements CSS Styling Code Examples Inline</p><p style='margin: 0'>This video explains how to set display properties for page elements CSS styling code examples inline.</p></td></tr><tr><td style='padding: 15px;'><p>10. CSS Position Static Relative Fixed Absolute Sticky Examples</p><p style='margin: 0'>This video explains CSS position static relative fixed absolute sticky examples.</p></td></tr><tr><td style='padding: 15px;'><p>11. CSS Float Setting Floats in CSS Setting Left Right and None Clearing Floats</p><p style='margin: 0'>This video explains CSS float setting floats in CSS setting left-right and no clearing floats.</p></td></tr><tr><td style='padding: 15px;'><p>12. More Useful CSS Properties such as z-index, outline, overflow, max-width, and More</p><p style='margin: 0'>This video explains properties such as z-index, outline, overflow, max-width, and more.</p></td></tr><tr><td style='padding: 15px;'><p>13. CSS Combinators to Select Elements from Your HTML Page Options and Examples</p><p style='margin: 0'>This video explains how CSS Combinators select elements from your HTML page options and examples.</p></td></tr><tr><td style='padding: 15px;'><p>14. Examples of Common CSS Pseudo Elements firstLetter firstLine After Adding Content</p><p style='margin: 0'>This video explains examples of common CSS pseudo elements.</p></td></tr><tr><td style='padding: 15px;'><p>15. How to Create a Simple CSS Styled Website Responsive Website CSS Float</p><p style='margin: 0'>This video explains how to create a simple CSS styled website responsive website CSS float.</p></td></tr><tr><td style='padding: 15px;'><p>16. Creating a Responsive Website with CSS Flexbox Setup Three Column Design Site Example</p><p style='margin: 0'>This video explains creating a responsive website with CSS Flexbox setup three column design site example.</p></td></tr><tr><td style='padding: 15px;'><p>17. How to Create a Fully Responsive Website with CSS Grid Modern Web Design CSS</p><p style='margin: 0'>This video explains how to create a fully responsive website with CSS Grid modern web design CSS.</p></td></tr></tbody></table><br><h4>3. Getting Started with JavaScript</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Introduction to Coding JavaScript Making Pages Interactive</p><p style='margin: 0'>This video explains an introduction to coding JavaScript and making pages interactive.</p></td></tr><tr><td style='padding: 15px;'><p>2. Getting Started with JavaScript Introduction to JavaScript Code with Examples</p><p style='margin: 0'>This video explains JavaScript code with examples.</p></td></tr><tr><td style='padding: 15px;'><p>3. How to Set Up Your Live Server Local Web Design Setup for HTTP Local Pages</p><p style='margin: 0'>This video explains setting up your live server local web design setup for HTTP local pages.</p></td></tr><tr><td style='padding: 15px;'><p>4. JavaScript Variables Let and Const and How to Assign Values to Declare Variables</p><p style='margin: 0'>This video explains how to assign values to declare variables.</p></td></tr><tr><td style='padding: 15px;'><p>5. What Are JavaScript Data Types and How to Set Datatypes Basic Data Types of Strings</p><p style='margin: 0'>This video explains JavaScript data types and how to set datatypes basic data types of strings.</p></td></tr><tr><td style='padding: 15px;'><p>6. JavaScript Objects and Arrays to Store Multiple Values in the Same Variable</p><p style='margin: 0'>This video explains JavaScript objects and arrays to store multiple values in the same variable.</p></td></tr><tr><td style='padding: 15px;'><p>7. Examples of Operators in JavaScript Code and How Operators Work</p><p style='margin: 0'>This video explains examples of operators in JavaScript code how operators work.</p></td></tr><tr><td style='padding: 15px;'><p>8. What JavaScript Functions Are and How to Pass Arguments into a Function and Return</p><p style='margin: 0'>This video explains JavaScript functions and how to pass arguments into a function and return them.</p></td></tr><tr><td style='padding: 15px;'><p>9. JavaScript Conditions Applying Logic in Code in JavaScript Example</p><p style='margin: 0'>This video explains JavaScript conditions by applying logic in code in JavaScript example.</p></td></tr><tr><td style='padding: 15px;'><p>10. Adding Loops to Your JavaScript Code with Examples of Loop Methods</p><p style='margin: 0'>This video explains adding loops to your JavaScript code with examples of loop methods.</p></td></tr></tbody></table><br><h4>4. JavaScript and the DOM Document Object Model (DOM)</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Introduction to JavaScript DOM with Coding Examples</p><p style='margin: 0'>Document Object Model (DOM) is a programming interface for HTML documents; that is, the logical structure of a page and how the page content can be accessed and manipulated. In this video, you will learn how to create fully interactive content that responds to the user.</p></td></tr><tr><td style='padding: 15px;'><p>2. Introduction to the DOM and the DOM Tree with JavaScript</p><p style='margin: 0'>This video explains the DOM tree with JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>3. Element Selection from Webpages with JavaScript Code Examples</p><p style='margin: 0'>This video explains element selection from webpages with JavaScript code examples.</p></td></tr><tr><td style='padding: 15px;'><p>4. JavaScript Element Manipulation DOM Select and Update Your Page Elements with Code</p><p style='margin: 0'>This video explains JavaScript element manipulation DOM select and update your page elements with code.</p></td></tr><tr><td style='padding: 15px;'><p>5. How to Set Styling Attributes with JavaScript Code - Update Webpage Elements</p><p style='margin: 0'>This video explains how to set styling attributes with JavaScript code - update webpage elements.</p></td></tr><tr><td style='padding: 15px;'><p>6. DOM and Form Elements Getting Values from Input Fields with JavaScript Code</p><p style='margin: 0'>This video explains DOM and form elements getting values from input fields with JavaScript code.</p></td></tr><tr><td style='padding: 15px;'><p>7. DOM Element Event Listeners Create Interactive Webpages with JavaScript</p><p style='margin: 0'>This video explains DOM element event listeners create interactive webpages with JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>8. How to Add Event Listeners to Your Webpage Elements with JavaScript Code</p><p style='margin: 0'>This video explains how to add event listeners to your webpage elements with JavaScript code.</p></td></tr><tr><td style='padding: 15px;'><p>9. Setting Page Event Listener for DOM Content Loaded and keyup and keydown Events</p><p style='margin: 0'>This video explains setting page events listener for DOM content loaded and keyup and keydown events.</p></td></tr><tr><td style='padding: 15px;'><p>10. How to Create Page Elements with JavaScript Code</p><p style='margin: 0'>This video explains how to create page elements with JavaScript code.</p></td></tr><tr><td style='padding: 15px;'><p>11. Update Element Position and Move Page Elements with JavaScript Code</p><p style='margin: 0'>This video explains how to update element position and move page elements with JavaScript code.</p></td></tr><tr><td style='padding: 15px;'><p>12. How to Add Animation to Your Webpage Elements Using JavaScript requestAnimation</p><p style='margin: 0'>This video explains the process of adding animation to your webpage elements using JavaScript requestAnimation.</p></td></tr></tbody></table><br><h4>5. How to Create a Modern Website from Scratch - Responsive Web Design</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Promotional Video - Creating a Website from Scratch</p><p style='margin: 0'>This video is an introduction about how you will learn to create a modern and dynamic website with a responsive navigation bar.</p></td></tr><tr><td style='padding: 15px;'><p>2. Website from Scratch with Floats</p><p style='margin: 0'>This video explains a website from scratch with floats.</p></td></tr><tr><td style='padding: 15px;'><p>3. Editor Setup and Code</p><p style='margin: 0'>This video explains editor setup and code.</p></td></tr><tr><td style='padding: 15px;'><p>4. HTML Structure Tags</p><p style='margin: 0'>This video explains HTML structure tags.</p></td></tr><tr><td style='padding: 15px;'><p>5. Create an HTML Page</p><p style='margin: 0'>This video explains how to create an HTML page.</p></td></tr><tr><td style='padding: 15px;'><p>6. Use CSS to Design a Responsive NavBar for the Website</p><p style='margin: 0'>This video explains how to use CSS to design a responsive NavBar for the website.</p></td></tr><tr><td style='padding: 15px;'><p>7. Add Google Fonts Select from Web Fonts CSS Web Design</p><p style='margin: 0'>This video explains adding Google Fonts select from web fonts CSS web design.</p></td></tr><tr><td style='padding: 15px;'><p>8. How to Style Main Webpage Content Create Columns</p><p style='margin: 0'>This video explains how to style main webpage content create columns.</p></td></tr><tr><td style='padding: 15px;'><p>9. How to Add Columns to Webpage Footer CSS Web Design Lesson</p><p style='margin: 0'>This video explains how to add columns to webpage footer CSS web design lesson.</p></td></tr><tr><td style='padding: 15px;'><p>10. Add JavaScript for Navbar Functions</p><p style='margin: 0'>This video explains how to add JavaScript for navbar functions.</p></td></tr></tbody></table>

Learn all the core fundamentals of modern web design, covering all the commonly used syntax for HTML, CSS, JavaScript, and JavaScript DOM with the help of this beginner-friendly course. Go from a static web page to an interactive one with JavaScript. This course is designed to get you started quickly and easily with creating web pages.
JavaScript code runs your browser as your HTML page loads. Adding JavaScript to your code can improve the user experience of the web page. This course will cover the basics of getting started with JavaScript, HTML, and CSS and the code syntax to write JavaScript code. JavaScript is a set of instructions you can add to your code to let the browser know what to do next. It covers the core concepts of JavaScript so that you can try the code and get familiar with what it does. Using JavaScript, you can access the HTML DOM in the browser, which allows you to interact and manipulate web page content. JavaScript creates the interactive and dynamic content seen today on all major modern web pages. Learn what CSS is and how you can style your web pages with Cascading Style Sheets (CSS). HTML provides a structure for your webpage; CSS allows you to style your page. Design the page with your style, set up page layouts, add colors, fonts, and more. Present your webpages as you want them to look, independent of the HTML; you can make your web content look and style as you imagine it should. You will also learn Document Object Model (DOM), which is a programming interface for HTML documents; that is, the logical structure of a page and how the page content can be accessed and manipulated. By the end of the course, you can start coding quickly and focus on designing your interactive and dynamic web pages. All resources and code files are placed here: https://github.com/PacktPublishing/Front-End-Web-Development-with-Modern-HTML-CSS-and-JavaScript
What You Will Learn
How to create webpages with HTML and CSS
Create interactive web content with JavaScript
Bring your web pages to life with code
Learn the basics of JavaScript
Learn how to build modern responsive websites
Create interactive and dynamic web pages
Audience
This course is for beginners in web design and for anyone who wants to learn more about coding or for anyone curious to learn HTML, CSS, and JavaScript. This course can also be taken by someone who wants to create interactive web pages and who wants a quick and effortless way to start coding.
Approach
In this practical hands-on course, you will have 9+ hours of premium content with source codes, tips, resources, and challenges to get the most out of this course.
Key Features
Understand how to create elements with code and add them to your web page * Learn to select elements from your web page with JavaScript * Learn to style your web pages with CSS
Github Repo
https://github.com/PacktPublishing/Front-End-Web-Development-with-Modern-HTML-CSS-and-JavaScript
About the Author
Laurence Svekis
Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world.
Course Outline
1. Introduction to Modern Web Design and Development with HTML, CSS, and JavaScript

1. Promotional Video
This video explains the course and the author.
2. Introduction to Getting Started with the Course and HTML Code
This video explains the guide to JavaScript code.
3. Getting Started with Web Design: Create Your Web Environment and Start Coding
This video explains how to create your first web environment and start coding.
4. How to Create Your First HTML Page HTML Coding Beginners
This video explains how to create your first HTML.
5. What is an HTML Element; How HTML Works with HTML Samples
This video explains HTML elements and how HTML works with HTML samples.
6. Start with HTML Headings Common Tags HTML
This video explains HTML headings common tags.
7. Create HTML Self-Closing Tags and How They Work
This video explains how to create HTML self-closing tags and how they work.
8. Setting Element Attributes in HTML Code
This video explains setting element attributes in HTML code.
9. How to Create Links HTML Hyperlinks HTML Links Anchor Tag
This video explains how to create links HTML hyperlinks HTML links anchor tag.
10. Adding Images to HTML Pages
This video explains adding images to HTML pages HTML images.
11. HTML Lists Adding Content Lists with HTML Lists
This video explains adding content lists with HTML lists.
12. What Are HTML Tables and How to Use Tables to Present Readable Content
This video explains HTML tables and how to use tables to present readable content.
13. HTML5 New Semantic Elements Meaning in the Element Tag Name
This video explains HTML 5 new semantic elements.
14. How to Create a Simple HTML Webpage
This video explains how to create a simple HTML webpage.
15. HTML Online Create a GitHub Page Create Your First Webpage on GitPages
This video explains how to create a GitHub page. Create your first webpage on GitPages.
2. Style Your Webpages with Cascading Style Sheets

1. Introduction to Getting Started with CSS
This video explains getting started with CSS.
2. Adding Styling to Your HTML with CSS Code for Beginners
This video explains adding styling to your HTML with CSS code for beginners.
3. Styling Overview Get Styling with CSS
This video explains styling overview get styling with CSS.
4. Colors Background and Font Color with CSS Update HTML Element Colors
This video explains colors background and font colors with CSS.
5. What Is the CSS Box Model - Box Model Border Padding Margin
This video explains box model border padding margin.
6. Text Options with CSS Code Setting Properties and Value to Transform Text
This video explains text options with CSS code setting properties and values to transform text.
7. Adding Fonts and Font Styles to Your Webpage Elements with CSS
This video explains adding fonts and font styles to your webpage elements with CSS.
8. Link States Pseudo-Classes Setting Different States with CSS
This video explains link states pseudo-classes setting different states with CSS.
9. How to Set Display Properties for Page Elements CSS Styling Code Examples Inline
This video explains how to set display properties for page elements CSS styling code examples inline.
10. CSS Position Static Relative Fixed Absolute Sticky Examples
This video explains CSS position static relative fixed absolute sticky examples.
11. CSS Float Setting Floats in CSS Setting Left Right and None Clearing Floats
This video explains CSS float setting floats in CSS setting left-right and no clearing floats.
12. More Useful CSS Properties such as z-index, outline, overflow, max-width, and More
This video explains properties such as z-index, outline, overflow, max-width, and more.
13. CSS Combinators to Select Elements from Your HTML Page Options and Examples
This video explains how CSS Combinators select elements from your HTML page options and examples.
14. Examples of Common CSS Pseudo Elements firstLetter firstLine After Adding Content
This video explains examples of common CSS pseudo elements.
15. How to Create a Simple CSS Styled Website Responsive Website CSS Float
This video explains how to create a simple CSS styled website responsive website CSS float.
16. Creating a Responsive Website with CSS Flexbox Setup Three Column Design Site Example
This video explains creating a responsive website with CSS Flexbox setup three column design site example.
17. How to Create a Fully Responsive Website with CSS Grid Modern Web Design CSS
This video explains how to create a fully responsive website with CSS Grid modern web design CSS.
3. Getting Started with JavaScript

1. Introduction to Coding JavaScript Making Pages Interactive
This video explains an introduction to coding JavaScript and making pages interactive.
2. Getting Started with JavaScript Introduction to JavaScript Code with Examples
This video explains JavaScript code with examples.
3. How to Set Up Your Live Server Local Web Design Setup for HTTP Local Pages
This video explains setting up your live server local web design setup for HTTP local pages.
4. JavaScript Variables Let and Const and How to Assign Values to Declare Variables
This video explains how to assign values to declare variables.
5. What Are JavaScript Data Types and How to Set Datatypes Basic Data Types of Strings
This video explains JavaScript data types and how to set datatypes basic data types of strings.
6. JavaScript Objects and Arrays to Store Multiple Values in the Same Variable
This video explains JavaScript objects and arrays to store multiple values in the same variable.
7. Examples of Operators in JavaScript Code and How Operators Work
This video explains examples of operators in JavaScript code how operators work.
8. What JavaScript Functions Are and How to Pass Arguments into a Function and Return
This video explains JavaScript functions and how to pass arguments into a function and return them.
9. JavaScript Conditions Applying Logic in Code in JavaScript Example
This video explains JavaScript conditions by applying logic in code in JavaScript example.
10. Adding Loops to Your JavaScript Code with Examples of Loop Methods
This video explains adding loops to your JavaScript code with examples of loop methods.
4. JavaScript and the DOM Document Object Model (DOM)

1. Introduction to JavaScript DOM with Coding Examples
Document Object Model (DOM) is a programming interface for HTML documents; that is, the logical structure of a page and how the page content can be accessed and manipulated. In this video, you will learn how to create fully interactive content that responds to the user.
2. Introduction to the DOM and the DOM Tree with JavaScript
This video explains the DOM tree with JavaScript.
3. Element Selection from Webpages with JavaScript Code Examples
This video explains element selection from webpages with JavaScript code examples.
4. JavaScript Element Manipulation DOM Select and Update Your Page Elements with Code
This video explains JavaScript element manipulation DOM select and update your page elements with code.
5. How to Set Styling Attributes with JavaScript Code - Update Webpage Elements
This video explains how to set styling attributes with JavaScript code - update webpage elements.
6. DOM and Form Elements Getting Values from Input Fields with JavaScript Code
This video explains DOM and form elements getting values from input fields with JavaScript code.
7. DOM Element Event Listeners Create Interactive Webpages with JavaScript
This video explains DOM element event listeners create interactive webpages with JavaScript.
8. How to Add Event Listeners to Your Webpage Elements with JavaScript Code
This video explains how to add event listeners to your webpage elements with JavaScript code.
9. Setting Page Event Listener for DOM Content Loaded and keyup and keydown Events
This video explains setting page events listener for DOM content loaded and keyup and keydown events.
10. How to Create Page Elements with JavaScript Code
This video explains how to create page elements with JavaScript code.
11. Update Element Position and Move Page Elements with JavaScript Code
This video explains how to update element position and move page elements with JavaScript code.
12. How to Add Animation to Your Webpage Elements Using JavaScript requestAnimation
This video explains the process of adding animation to your webpage elements using JavaScript requestAnimation.
5. How to Create a Modern Website from Scratch - Responsive Web Design

1. Promotional Video - Creating a Website from Scratch
This video is an introduction about how you will learn to create a modern and dynamic website with a responsive navigation bar.
2. Website from Scratch with Floats
This video explains a website from scratch with floats.
3. Editor Setup and Code
This video explains editor setup and code.
4. HTML Structure Tags
This video explains HTML structure tags.
5. Create an HTML Page
This video explains how to create an HTML page.
6. Use CSS to Design a Responsive NavBar for the Website
This video explains how to use CSS to design a responsive NavBar for the website.
7. Add Google Fonts Select from Web Fonts CSS Web Design
This video explains adding Google Fonts select from web fonts CSS web design.
8. How to Style Main Webpage Content Create Columns
This video explains how to style main webpage content create columns.
9. How to Add Columns to Webpage Footer CSS Web Design Lesson
This video explains how to add columns to webpage footer CSS web design lesson.
10. Add JavaScript for Navbar Functions
This video explains how to add JavaScript for navbar functions.

Learn all the core fundamentals of modern web design, covering all the commonly used syntax for HTML, CSS, JavaScript, and JavaScript DOM with the help of this beginner-friendly course. Go from a static web page to an interactive one with JavaScript. This course is designed to get you started quickly and easily with creating web pages.

Front-End Web Development with Modern HTML, CSS, and JavaScript

<strong>Learn JavaScript from Scratch: JavaScript for Everyone is a hands-on course that teaches the ins and outs of modern JavaScript. It is the perfect course for anyone who wants to learn the programming language from scratch and wants to develop engaging, interactive websites that leverage all the latest features JavaScript comes with.</strong>
        <p>Despite the deluge of new coding languages over the years, JavaScript continues to dominate the web. The language is a staple in most of the front-ends; if not vanilla JavaScript, you won't be surprised to find one of its derivatives on the next website you visit. This ubiquity makes JavaScript a sought-after skill. This course is designed to teach you that skill from scratch.

You'll begin by learning how to set up your coding playground and then gain some familiarity with the JavaScript syntax. Once you've gotten your hands dirty, you'll discover how to store data in variables, comment out your code, and do more with your variables by learning about operators.

Next, you'll learn about data structures and conditional statements, further shoring up your JavaScript skills. By learning about the Document Object Model (The DOM), you will be able to change the elements of a webpage and add interactivity to it. You'll also learn to work with strings and arrays, and then, to make your code concise, learn how to write your own functions. Toward the end of the course, you'll work on a final project wherein you'll get to use all these skills together.

By completing this course, not only will you have a solid understanding of modern JavaScript language, you'll also be able to use it to create engaging, interactive webpages.</p>
        <h2>What You Will Learn</h2><p>Learn about different variable types, including let and const<br>Discover how to do more with your variables using operators<br>Gain an in-depth understanding of data structures in JavaScript<br>Learn in detail the structure of the Document Object Model (The DOM)<br>Using the knowledge of the DOM, learn to modify elements of an HTML page<br>Discover how to manipulate strings and how to work with numbers<br>Learn how to store and work with multiple elements through arrays<br>Make your code concise by learning how to write your own functions</p>
        <h2>Audience</h2><p>If you're someone who has never coded in JavaScript but always wanted to, this course is for you. Since you'll be making interactive webpages, a rudimentary knowledge of HTML CSS would be beneficial (though it's not a hard requirement).</p>
        <h2>Approach</h2><p>Whether or not you have any code editing software installed on your system, you'll be writing JavaScript code from the very first lecture. The course focuses on teaching you the key concepts of modern JavaScript through hands-on practice. In the end, you'll work on an interactive project where you'll be making use of all the concepts you learned in the course so far.</p>
        <h2>Key Features</h2><p>Learn JavaScript fundamentals, especially if you've never written JavaScript code before * Learn all the modern JavaScript concepts such as template literals, let, const, and more * Put everything you learned to test by building an interactive project at the end of the course</p>
        
        <h2>About the Author</h2><h3>Kalob Taulien</h3><p>Kalob Taulien is a professional web developer who has been developing websites and working with start-ups since 1999. Since many years, he has been writing codes in Python and Django. He is in the core Wagtail CMS team and one of the core leaders in Wagtail-based education. The passion to learn and to share his knowledge by teaching and helping others is something that drives him constantly. His ability to turn complex programming concepts into easy-to-understand bits of knowledge has been called his 'superpower'. Throughout the years, he has built numerous websites. He even provides one-on-one coaching and start-up consulting to new organizations.</p>
        <h2>Course Outline</h2><h4>1. Introduction</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Introduction</p><p style='margin: 0'>This video introduces the course.</p></td></tr></tbody></table><br><h4>2. Getting Started</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Getting Your Hands Dirty</p><p style='margin: 0'>In this video, you'll start writing code in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>2. What is JavaScript?</p><p style='margin: 0'>In this video, you'll learn what exactly JavaScript is and where it is used.</p></td></tr><tr><td style='padding: 15px;'><p>3. You Need a Text Editor</p><p style='margin: 0'>In this video, you'll get set up with a text editor.</p></td></tr><tr><td style='padding: 15px;'><p>4. JavaScript Syntax</p><p style='margin: 0'>In this video, you'll get an overview of JavaScript syntax.</p></td></tr></tbody></table><br><h4>3. Coding with JavaScript</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Console Logging</p><p style='margin: 0'>In this video, you'll learn what console logging is and why you need to use it.</p></td></tr><tr><td style='padding: 15px;'><p>2. Debugging External Files</p><p style='margin: 0'>In this video, you'll learn how to debug external files.</p></td></tr><tr><td style='padding: 15px;'><p>3. Storing Data in Variables</p><p style='margin: 0'>In this video, you'll learn how to store data in variables.</p></td></tr><tr><td style='padding: 15px;'><p>4. Let and Const Variable Types</p><p style='margin: 0'>In this video, you'll learn all about let and const.</p></td></tr><tr><td style='padding: 15px;'><p>5. Coding Comments</p><p style='margin: 0'>In this video, you'll learn how and why you should write code comments.</p></td></tr><tr><td style='padding: 15px;'><p>6. JavaScript Operators</p><p style='margin: 0'>In this video, you'll learn the different types of operators in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>7. Data Structures</p><p style='margin: 0'>In this video, you'll learn the importance of data structures.</p></td></tr><tr><td style='padding: 15px;'><p>8. Conditional Statements</p><p style='margin: 0'>In this video, you'll learn what conditional statements are.</p></td></tr><tr><td style='padding: 15px;'><p>9. The Document Object Model (DOM)</p><p style='margin: 0'>In this video, you'll get an overview of the DOM.</p></td></tr><tr><td style='padding: 15px;'><p>10. Selecting Elements by Their IDs</p><p style='margin: 0'>In this video, you'll learn how to select elements by their IDS and what it does in the DOM.</p></td></tr><tr><td style='padding: 15px;'><p>11. JavaScript Objects</p><p style='margin: 0'>In this video, you'll learn what objects are in JavaScript and why they are useful.</p></td></tr><tr><td style='padding: 15px;'><p>12. String Methods</p><p style='margin: 0'>In this video, you'll learn how to work with string methods.</p></td></tr><tr><td style='padding: 15px;'><p>13. Demystifying Data Types</p><p style='margin: 0'>In this video, you'll learn how to identify the different data types in a code.</p></td></tr><tr><td style='padding: 15px;'><p>14. Casting Data Types</p><p style='margin: 0'>In this video, you'll learn how to convert data types from one type to another.</p></td></tr><tr><td style='padding: 15px;'><p>15. String Concatenation</p><p style='margin: 0'>In this video, you'll learn to mix and merge variable types together.</p></td></tr><tr><td style='padding: 15px;'><p>16. JavaScript Numbers</p><p style='margin: 0'>In this video, you'll learn how to work with numbers in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>17. JavaScript Arrays</p><p style='margin: 0'>In this video, you'll learn to work with lists/arrays in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>18. Array Iteration</p><p style='margin: 0'>In this video, you'll learn to loop over arrays.</p></td></tr><tr><td style='padding: 15px;'><p>19. Selecting Multiple DOM Nodes</p><p style='margin: 0'>In this video, you'll learn what happens when you select multiple DOM nodes.</p></td></tr><tr><td style='padding: 15px;'><p>20. Functions: the DRY (Don't Repeat Yourself) Principle</p><p style='margin: 0'>In this video, you'll learn the effectiveness of the DRY principle.</p></td></tr><tr><td style='padding: 15px;'><p>21. Functions: Reusing Code</p><p style='margin: 0'>This video builds upon the DRY principle and you'll learn how to write larger pieces of code.</p></td></tr><tr><td style='padding: 15px;'><p>22. Functions: the Rest Operator</p><p style='margin: 0'>In this video, you'll learn about the Rest operator, which is relatively new in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>23. Objects with Functions</p><p style='margin: 0'>In this video, you'll learn how to create objects with the help of functions.</p></td></tr><tr><td style='padding: 15px;'><p>24. Final Project</p><p style='margin: 0'>In this video, you'll get a brief of the project you will work on.</p></td></tr></tbody></table><br><h4>4. Section Summary</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Summary</p><p style='margin: 0'>This video gives a summary of the course covered so far.</p></td></tr></tbody></table><br><h4>5. JavaScript 201 - Getting Started</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. introduction</p><p style='margin: 0'>This video gives an introduction to the next sections.</p></td></tr><tr><td style='padding: 15px;'><p>2. Styling Your Code</p><p style='margin: 0'>In this video, you'll learn how to make your code look clean.</p></td></tr><tr><td style='padding: 15px;'><p>3. Waiting for the Page to Load</p><p style='margin: 0'>In this video, you'll learn how to make sure that everything in your page is loaded using JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>4. When the Page is Refreshed</p><p style='margin: 0'>In this video, you'll learn what to do when you hit the refresh button on a webpage.</p></td></tr></tbody></table><br><h4>6. Intermediate JavaScript</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Strict Comparisons</p><p style='margin: 0'>In this video, you'll learn how to use comparisons in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>2. JavaScript Scope</p><p style='margin: 0'>In this video, you'll learn about scope in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>3. JavaScript Hoisting</p><p style='margin: 0'>In this video, you'll learn a unique feature in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>4. JavaScript Closures</p><p style='margin: 0'>In this video, you'll learn what closures are in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>5. Callback Functions</p><p style='margin: 0'>In this video, you'll learn about callback functions.</p></td></tr><tr><td style='padding: 15px;'><p>6. Strict Mode</p><p style='margin: 0'>In this video, you'll learn what strict mode is and how it is useful.</p></td></tr><tr><td style='padding: 15px;'><p>7. Timeout and Intervals</p><p style='margin: 0'>In this video, you'll get introduced to timeout and intervals in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>8. While Loops</p><p style='margin: 0'>In this video, you'll learn to work with while loops in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>9. Date Formatting</p><p style='margin: 0'>In this video, you'll learn the importance of date formatting in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>10. Destructuring Arrays and Objects</p><p style='margin: 0'>In this video, you'll learn a modern JavaScript technique.</p></td></tr><tr><td style='padding: 15px;'><p>11. Deleting Object Properties</p><p style='margin: 0'>In this video, you'll learn what it means to delete object properties.</p></td></tr><tr><td style='padding: 15px;'><p>12. JavaScript Math</p><p style='margin: 0'>In this video, you'll learn about the math module in JavaScript.</p></td></tr></tbody></table><br><h4>7. Mini-Project</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Random Numbers</p><p style='margin: 0'>In this video, you'll learn about 'math.random' in the math module.</p></td></tr><tr><td style='padding: 15px;'><p>2. Random Number Guessing Game</p><p style='margin: 0'>This video teaches you to develop a short game on guessing a random number.</p></td></tr></tbody></table><br><h4>8. Professional JavaScript</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Try, Catch, and Finally</p><p style='margin: 0'>In this video, you'll learn how to use try, catch, and finally in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>2. The 'This' Keyword</p><p style='margin: 0'>In this video, you'll learn what 'this' represents.</p></td></tr><tr><td style='padding: 15px;'><p>3. Arrow Functions</p><p style='margin: 0'>In this video, you'll learn about arrow functions.</p></td></tr><tr><td style='padding: 15px;'><p>4. JavaScript Classes</p><p style='margin: 0'>In this video, you'll learn about classes.</p></td></tr><tr><td style='padding: 15px;'><p>5. Class Constructors</p><p style='margin: 0'>In this video, you'll learn an important feature in JavaScript.</p></td></tr><tr><td style='padding: 15px;'><p>6. JavaScript Object Notation</p><p style='margin: 0'>In this video, you'll get a brief introduction to JSON.</p></td></tr><tr><td style='padding: 15px;'><p>7. Ajax</p><p style='margin: 0'>In this video, you'll learn about asynchronous JavaScript and XML.</p></td></tr><tr><td style='padding: 15px;'><p>8. Fetch API</p><p style='margin: 0'>In this video, you'll learn to work with the fetch API to handle ajax requests.</p></td></tr></tbody></table><br><h4>9. Final Project</h4><p></p><table width='100%'><tbody><tr><td style='padding: 15px;'><p>1. Your Project</p><p style='margin: 0'>In this video, you'll get a brief of the project that you'll create.</p></td></tr><tr><td style='padding: 15px;'><p>2. Summary</p><p style='margin: 0'>This video gives a summary of the last 2 sections.</p></td></tr></tbody></table>

Learn JavaScript from Scratch: JavaScript for Everyone is a hands-on course that teaches the ins and outs of modern JavaScript. It is the perfect course for anyone who wants to learn the programming language from scratch and wants to develop engaging, interactive websites that leverage all the latest features JavaScript comes with.
Despite the deluge of new coding languages over the years, JavaScript continues to dominate the web. The language is a staple in most of the front-ends; if not vanilla JavaScript, you won't be surprised to find one of its derivatives on the next website you visit. This ubiquity makes JavaScript a sought-after skill. This course is designed to teach you that skill from scratch. You'll begin by learning how to set up your coding playground and then gain some familiarity with the JavaScript syntax. Once you've gotten your hands dirty, you'll discover how to store data in variables, comment out your code, and do more with your variables by learning about operators. Next, you'll learn about data structures and conditional statements, further shoring up your JavaScript skills. By learning about the Document Object Model (The DOM), you will be able to change the elements of a webpage and add interactivity to it. You'll also learn to work with strings and arrays, and then, to make your code concise, learn how to write your own functions. Toward the end of the course, you'll work on a final project wherein you'll get to use all these skills together. By completing this course, not only will you have a solid understanding of modern JavaScript language, you'll also be able to use it to create engaging, interactive webpages.
What You Will Learn
Learn about different variable types, including let and const
Discover how to do more with your variables using operators
Gain an in-depth understanding of data structures in JavaScript
Learn in detail the structure of the Document Object Model (The DOM)
Using the knowledge of the DOM, learn to modify elements of an HTML page
Discover how to manipulate strings and how to work with numbers
Learn how to store and work with multiple elements through arrays
Make your code concise by learning how to write your own functions
Audience
If you're someone who has never coded in JavaScript but always wanted to, this course is for you. Since you'll be making interactive webpages, a rudimentary knowledge of HTML CSS would be beneficial (though it's not a hard requirement).
Approach
Whether or not you have any code editing software installed on your system, you'll be writing JavaScript code from the very first lecture. The course focuses on teaching you the key concepts of modern JavaScript through hands-on practice. In the end, you'll work on an interactive project where you'll be making use of all the concepts you learned in the course so far.
Key Features
Learn JavaScript fundamentals, especially if you've never written JavaScript code before * Learn all the modern JavaScript concepts such as template literals, let, const, and more * Put everything you learned to test by building an interactive project at the end of the course
About the Author
Kalob Taulien
Kalob Taulien is a professional web developer who has been developing websites and working with start-ups since 1999. Since many years, he has been writing codes in Python and Django. He is in the core Wagtail CMS team and one of the core leaders in Wagtail-based education. The passion to learn and to share his knowledge by teaching and helping others is something that drives him constantly. His ability to turn complex programming concepts into easy-to-understand bits of knowledge has been called his 'superpower'. Throughout the years, he has built numerous websites. He even provides one-on-one coaching and start-up consulting to new organizations.
Course Outline
1. Introduction

1. Introduction
This video introduces the course.
2. Getting Started

1. Getting Your Hands Dirty
In this video, you'll start writing code in JavaScript.
2. What is JavaScript?
In this video, you'll learn what exactly JavaScript is and where it is used.
3. You Need a Text Editor
In this video, you'll get set up with a text editor.
4. JavaScript Syntax
In this video, you'll get an overview of JavaScript syntax.
3. Coding with JavaScript

1. Console Logging
In this video, you'll learn what console logging is and why you need to use it.
2. Debugging External Files
In this video, you'll learn how to debug external files.
3. Storing Data in Variables
In this video, you'll learn how to store data in variables.
4. Let and Const Variable Types
In this video, you'll learn all about let and const.
5. Coding Comments
In this video, you'll learn how and why you should write code comments.
6. JavaScript Operators
In this video, you'll learn the different types of operators in JavaScript.
7. Data Structures
In this video, you'll learn the importance of data structures.
8. Conditional Statements
In this video, you'll learn what conditional statements are.
9. The Document Object Model (DOM)
In this video, you'll get an overview of the DOM.
10. Selecting Elements by Their IDs
In this video, you'll learn how to select elements by their IDS and what it does in the DOM.
11. JavaScript Objects
In this video, you'll learn what objects are in JavaScript and why they are useful.
12. String Methods
In this video, you'll learn how to work with string methods.
13. Demystifying Data Types
In this video, you'll learn how to identify the different data types in a code.
14. Casting Data Types
In this video, you'll learn how to convert data types from one type to another.
15. String Concatenation
In this video, you'll learn to mix and merge variable types together.
16. JavaScript Numbers
In this video, you'll learn how to work with numbers in JavaScript.
17. JavaScript Arrays
In this video, you'll learn to work with lists/arrays in JavaScript.
18. Array Iteration
In this video, you'll learn to loop over arrays.
19. Selecting Multiple DOM Nodes
In this video, you'll learn what happens when you select multiple DOM nodes.
20. Functions: the DRY (Don't Repeat Yourself) Principle
In this video, you'll learn the effectiveness of the DRY principle.
21. Functions: Reusing Code
This video builds upon the DRY principle and you'll learn how to write larger pieces of code.
22. Functions: the Rest Operator
In this video, you'll learn about the Rest operator, which is relatively new in JavaScript.
23. Objects with Functions
In this video, you'll learn how to create objects with the help of functions.
24. Final Project
In this video, you'll get a brief of the project you will work on.
4. Section Summary

1. Summary
This video gives a summary of the course covered so far.
5. JavaScript 201 - Getting Started

1. introduction
This video gives an introduction to the next sections.
2. Styling Your Code
In this video, you'll learn how to make your code look clean.
3. Waiting for the Page to Load
In this video, you'll learn how to make sure that everything in your page is loaded using JavaScript.
4. When the Page is Refreshed
In this video, you'll learn what to do when you hit the refresh button on a webpage.
6. Intermediate JavaScript

1. Strict Comparisons
In this video, you'll learn how to use comparisons in JavaScript.
2. JavaScript Scope
In this video, you'll learn about scope in JavaScript.
3. JavaScript Hoisting
In this video, you'll learn a unique feature in JavaScript.
4. JavaScript Closures
In this video, you'll learn what closures are in JavaScript.
5. Callback Functions
In this video, you'll learn about callback functions.
6. Strict Mode
In this video, you'll learn what strict mode is and how it is useful.
7. Timeout and Intervals
In this video, you'll get introduced to timeout and intervals in JavaScript.
8. While Loops
In this video, you'll learn to work with while loops in JavaScript.
9. Date Formatting
In this video, you'll learn the importance of date formatting in JavaScript.
10. Destructuring Arrays and Objects
In this video, you'll learn a modern JavaScript technique.
11. Deleting Object Properties
In this video, you'll learn what it means to delete object properties.
12. JavaScript Math
In this video, you'll learn about the math module in JavaScript.
7. Mini-Project

1. Random Numbers
In this video, you'll learn about 'math.random' in the math module.
2. Random Number Guessing Game
This video teaches you to develop a short game on guessing a random number.
8. Professional JavaScript

1. Try, Catch, and Finally
In this video, you'll learn how to use try, catch, and finally in JavaScript.
2. The 'This' Keyword
In this video, you'll learn what 'this' represents.
3. Arrow Functions
In this video, you'll learn about arrow functions.
4. JavaScript Classes
In this video, you'll learn about classes.
5. Class Constructors
In this video, you'll learn an important feature in JavaScript.
6. JavaScript Object Notation
In this video, you'll get a brief introduction to JSON.
7. Ajax
In this video, you'll learn about asynchronous JavaScript and XML.
8. Fetch API
In this video, you'll learn to work with the fetch API to handle ajax requests.
9. Final Project

1. Your Project
In this video, you'll get a brief of the project that you'll create.
2. Summary
This video gives a summary of the last 2 sections.

Learn JavaScript from Scratch: JavaScript for Everyone is a hands-on course that teaches the ins and outs of modern JavaScript. It is the perfect course for anyone who wants to learn the programming language from scratch and wants to develop engaging, interactive websites that leverage all the latest features JavaScript comes with.

Learn JavaScript from Scratch: JavaScript for Everyone

Build 20 mini frontend projects from scratch with HTML5, CSS, and JavaScript
All the code and supporting files for this course are available on GitHub at https://github.com/PacktPublishing/20-Web-Projects-with-Vanilla-JavaScript
This course will show you how to design projects with HTML5, CSS, and JavaScript without using additional frameworks or libraries. You'll build every project from scratch and explore dynamic functionalities in each apps ranging from simple games and an expense tracker to a breathing relaxation app.
The course starts with an introduction to Project HTML and Project CSS along with a brief on how to check the length, email, and password match. In the next section, you'll build a project for movie seat booking and learn how to save data to local storage and then populate the UI with the saved data. As you advance, you'll work on several other projects such as creating a custom video player, creating an exchange rate calculator, hangman game, and much more!
By the end of the course, you'll be able to build your own mini frontend projects from scratch confidently using HTML 5, CSS, and JavaScript.
What You Will Learn
Build 20 frontend projects from scratch
Learn about modern JavaScript (ES6+) - arrows, fetch, promises, and more
Explore the HTML5 Canvas, Speech API, audio, and video
Implement animations with CSS and JavaScript
Get to grips with the concepts of fetch and JSON with third-party APIs
Audience
This course is for anyone who wants to build beginner-level as well as intermediate-level projects using just HTML5, CSS, and JavaScript.
Approach
A practical course that has mini-projects designed for learners to complete in just a few hours.
Key Features
Gain proficiency in building frontend projects from scratch using HTML 5 * Explore different concepts of modern JavaScript (ES6+) such as Arrows and Fetch * Create animations using CSS and JavaScript
Github Repo
https://github.com/packtpublishing/20-web-projects-with-vanilla-javascript
About the Author
Brad Traversy
Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.
Course Outline
1. Introduction

1. Welcome to the Course
Introduction: Welcome to the Course
2. Getting Setup
Introduction: Getting Setup
2. Form Validator | Intro Project

1. Project Intro
Form Validator | Intro Project: Project Intro
2. Project HTML
Form Validator | Intro Project: Project HTML
3. Project CSS
Form Validator | Intro Project: Project CSS
4. Adding Simple Validation
Form Validator | Intro Project: Adding Simple Validation
5. Check Required & Refactor
Form Validator | Intro Project: Check Required & Refactor
6. Check Length, Email & Password Match
Form Validator | Intro Project: Check Length, Email & Password Match
3. Movie Seat Booking | DOM & Local Storage

1. Project Intro
Movie Seat Booking | DOM & Local Storage: Project intro
2. Project HTML
Movie Seat Booking | DOM & Local Storage: Project HTML
3. Project CSS
Movie Seat Booking | DOM & Local Storage: Project CSS
4. Selecting Movie & Seats From UI
Movie Seat Booking | DOM & Local Storage: Selecting Movie & Seats From UI
5. Save Data To Local Storage
Movie Seat Booking | DOM & Local Storage: Save Data To Local Storage
6. Populate UI With Saved Data
Movie Seat Booking | DOM & Local Storage: Populate UI With Saved Data
4. Custom Video Player | HTML5 Video API

1. Project Intro
Custom Video Player | HTML5 Video API: Project Intro
2. Project HTML
Custom Video Player | HTML5 Video API: Project HTML
3. Project CSS
Custom Video Player | HTML5 Video API: Project CSS
4. Play, Pause & Stop
Custom Video Player | HTML5 Video API: Play, Pause & Stop
5. Video Progress Bar & Timestamp
Custom Video Player | HTML5 Video API: Video Progress Bar & Timestamp
5. Exchange Rate Calculator | Fetch & JSON Intro

1. Project Intro
Exchange Rate Calculator | Fetch & JSON Intro: Project Intro
2. Project HTML
Exchange Rate Calculator | Fetch & JSON Intro: Project HTML
3. Project CSS
Exchange Rate Calculator | Fetch & JSON Intro: Project CSS
4. A Look at JSON & Fetch
Exchange Rate Calculator | Fetch & JSON Intro: A Look at JSON & Fetch
5. Fetch Rates & Update DOM
Exchange Rate Calculator | Fetch & JSON Intro: Fetch Rates & Update DOM
6. DOM Array Methods | forEach, map, filter, sort, reduce

1. Project Intro
DOM Array Methods | forEach, map, filter, sort, reduce: Project Intro
2. Project UI
DOM Array Methods | forEach, map, filter, sort, reduce: Project UI
3. Generate Random Users - Fetch w/ Async/Await
DOM Array Methods | forEach, map, filter, sort, reduce: Generate Random Users - Fetch w/ Async/Await
4. Output Users - forEach() & DOM Methods
DOM Array Methods | forEach, map, filter, sort, reduce: Output Users - forEach() & DOM Methods
5. Double Money - map()
DOM Array Methods | forEach, map, filter, sort, reduce: Double Money - map()
6. Sort By Richest - sort()
DOM Array Methods | forEach, map, filter, sort, reduce: Sort By Richest - sort()
7. Show Millionaires - filter()
DOM Array Methods | forEach, map, filter, sort, reduce: Show Millionaires - filter()
8. Calculate Wealth - reduce()
DOM Array Methods | forEach, map, filter, sort, reduce: Calculate Wealth - reduce()
7. Menu Slider & Modal | DOM & CSS

1. Project Intro
Menu Slider & Modal | DOM & CSS: Project Intro
2. Project HTML
Menu Slider & Modal | DOM & CSS: Project HTML
3. Navbar Styling
Menu Slider & Modal | DOM & CSS: Navbar Styling
4. Header & Modal Styling
Menu Slider & Modal | DOM & CSS: Header & Modal Styling
5. Menu & Modal Toggle
Menu Slider & Modal | DOM & CSS: Menu & Modal Toggle
8. Hangman Game | DOM, SVG, Events

1. Project Intro
Hangman Game | DOM, SVG, Events: Project Intro: Project Intro
2. Draw Hangman with SVG
Hangman Game | DOM, SVG, Events: Draw Hangman with SVG
3. Main Styling
Hangman Game | DOM, SVG, Events: Main Styling
4. Popup & Notification Styling
Hangman Game | DOM, SVG, Events: Popup & Notification Styling
5. Display Words Function
Hangman Game | DOM, SVG, Events: Display Words Function
6. Letter Press Event Handler
Hangman Game | DOM, SVG, Events: Letter Press Event Handler
7. Wrong Letters & Play Again
Hangman Game | DOM, SVG, Events: Wrong Letters & Play Again
9. Meal Finder | Fetch & MealDB API

1. Project Intro
Meal Finder | Fetch & MealDB API: Project Intro
2. Project HTML & Base CSS
Meal Finder | Fetch & MealDB API: Project HTML & Base CSS
3. Search & Display Meals from API
Meal Finder | Fetch & MealDB API: Search & Display Meals from API
4. Show Single Meal Page
Meal Finder | Fetch & MealDB API: Show Single Meal Page
5. Display Random Meal & Single Meal CSS
Meal Finder | Fetch & MealDB API: Display Random Meal & Single Meal CSS
10. Expense Tracker | Array Methods & Local Storage

1. Project Intro
Expense Tracker | Array Methods & Local Storage: Project Intro
2. Project HTML
Expense Tracker | Array Methods & Local Storage: Project HTML
3. Project CSS
Expense Tracker | Array Methods & Local Storage: Project CSS
4. Show Transaction Items
Expense Tracker | Array Methods & Local Storage: Show Transaction Items
5. Display Balance, Income & Expense
Expense Tracker | Array Methods & Local Storage: Display Balance, Income & Expense
6. Add & Delete Transactions
Expense Tracker | Array Methods & Local Storage: Add & Delete Transactions
7. Persist To Local Storage
Expense Tracker | Array Methods & Local Storage: Persist To Local Storage
11. Music Player | HTML5 Audio API

1. Project Intro
Music Player | HTML5 Audio API: Project Intro
2. Project HTML
Music Player | HTML5 Audio API: Project HTML
3. Music Container & Rotate Animation
Music Player | HTML5 Audio API: Music Container & Rotate Animation
4. Music Info Styling & Animation
Music Player | HTML5 Audio API: Music Info Styling & Animation
5. Load, Play & Pause Song
Music Player | HTML5 Audio API: Load, Play & Pause Song
6. Next, Prev Song & Progress
Music Player | HTML5 Audio API: Next, Prev Song & Progress
12. Infinite Scroll Posts | Fetch, Async/Await, CSS Loader

1. Project Intro
Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Project Intro
2. Project HTML
Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Project HTML
3. Project CSS & Loader Animation
Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Project CSS & Loader Animation
4. Get Initial Posts From API
Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Get Initial Posts From API
5. Add Infinite Scrolling
Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Add Infinite Scrolling
6. Filter Fetched Posts
Infinite Scroll Posts | Fetch, Async/Await, CSS Loader: Filter Fetched Posts
13. Typing Game | DOM, Intervals, Events

1. Project Intro
Typing Game | DOM, Intervals, Events: Project Intro
2. Project HTML
Typing Game | DOM, Intervals, Events: Project HTML
3. Project CSS
Typing Game | DOM, Intervals, Events: Project CSS
4. Word Match & Score
Typing Game | DOM, Intervals, Events: Word Match & Score
5. Adding The Timer
Typing Game | DOM, Intervals, Events: Adding The Timer
6. Difficulty Setting
Typing Game | DOM, Intervals, Events: Difficulty Setting
14. Speech Text Reader | Speech Synthesis

1. Project Intro
Speech Text Reader | Speech Synthesis: Project Intro
2. HTML & Output Speech Boxes
Speech Text Reader | Speech Synthesis: HTML & Output Speech Boxes
3. Project CSS
Speech Text Reader | Speech Synthesis: Project CSS
4. Get Speech Voices
Speech Text Reader | Speech Synthesis: Get Speech Voices
5. Speech Buttons
Speech Text Reader | Speech Synthesis: Speech Buttons
6. Change Voice & Custom Text Box
Speech Text Reader | Speech Synthesis: Change Voice & Custom Text Box
15. Memory Cards | CSS Effects, Local Storage

1. Project Intro
Memory Cards | CSS Effects, Local Storage: Project Intro
2. Project HTML
Memory Cards | CSS Effects, Local Storage: Project HTML
3. Basic Card Styling
Memory Cards | CSS Effects, Local Storage: Basic Card Styling
4. Card Rotation & Slide Effect
Memory Cards | CSS Effects, Local Storage: Card Rotation & Slide Effect
5. Add Card Container & Form Styling
Memory Cards | CSS Effects, Local Storage: Add Card Container & Form Styling
6. Create Cards & Flip Effect with JS
Memory Cards | CSS Effects, Local Storage: Create Cards & Flip Effect with JS
7. Prev & Next Button Functionality
Memory Cards | CSS Effects, Local Storage: Prev & Next Button Functionality
8. Set & Get Card Data from Local Storage
Memory Cards | CSS Effects, Local Storage: Set & Get Card Data from Local Storage
16. Lyrics Search App | Fetch, Pagination, Lyrics.ovh API

1. Project Intro
Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Project Intro
2. Project HTML & Header Stying
Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Project HTML & Header Stying
3. Form Styling
Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Form Styling
4. Fetching Songs & Artists
Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Fetching Songs & Artists
5. Update DOM & Add Pagination
Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Update DOM & Add Pagination
6. Get & Display Song Lyrics
Lyrics Search App | Fetch, Pagination, Lyrics.ovh API: Get & Display Song Lyrics
17. Relaxer App | CSS Animations, setTimeout

1. Project Intro
Relaxer App | CSS Animations, setTimeout: Project Intro
2. Creating the Large Circle
Relaxer App | CSS Animations, setTimeout: Creating the Large Circle
3. Creating & Animating the Pointer
Relaxer App | CSS Animations, setTimeout: Creating & Animating the Pointer
4. Breath Animation with JS Trigger
Relaxer App | CSS Animations, setTimeout: Breath Animation with JS Trigger
18. Breakout Game | HTML5 Canvas API

1. Project Intro
Breakout Game | HTML5 Canvas API: Project Intro
2. Creating & Styling the Page
Breakout Game | HTML5 Canvas API: Creating & Styling the Page
3. Canvas Plan Outline
Breakout Game | HTML5 Canvas API: Canvas Plan Outline
4. Draw Ball, Paddle & Score
Breakout Game | HTML5 Canvas API: Draw Ball, Paddle & Score
5. Creating the Bricks
Breakout Game | HTML5 Canvas API: Creating the Bricks
6. Move Paddle
Breakout Game | HTML5 Canvas API: Move Paddle
7. Move Ball & Break Bricks
Breakout Game | HTML5 Canvas API: Move Ball & Break Bricks
8. Lose & Reset Game
Breakout Game | HTML5 Canvas API: Lose & Reset Game
19. New Year Countdown | DOM, Date & Time

1. Project Intro
New Year Countdown | DOM, Date & Time: Project Intro
2. Landing Page HTML & Styling
New Year Countdown | DOM, Date & Time: Landing Page HTML & Styling
3. Create The Countdown
New Year Countdown | DOM, Date & Time: Create The Countdown
4. Dynamic Year & Spinner
New Year Countdown | DOM, Date & Time: Dynamic Year & Spinner
20. Sortable List | Drag & Drop API

1. Project Intro
Sortable List | Drag & Drop API: Project Intro
2. Insert List Items Into DOM
Sortable List | Drag & Drop API: Insert List Items Into DOM
3. Scramble List Items
Sortable List | Drag & Drop API: Scramble List Items
4. Core CSS
Sortable List | Drag & Drop API: Core CSS
5. Drag & Drop Functionality
Sortable List | Drag & Drop API: Drag & Drop Functionality
6. Check Order
Sortable List | Drag & Drop API: Check Order
21. Speak Number Guessing Game | Speech Recognition

1. Project Intro
Speak Number Guessing Game | Speech Recognition: Project Intro
2. Project UI
Speak Number Guessing Game | Speech Recognition: Project UI
3. Capture Mic Input
Speak Number Guessing Game | Speech Recognition: Capture Mic Input
4. Check Guessed Number
Speak Number Guessing Game | Speech Recognition: Check Guessed Number

Build 20 mini frontend projects from scratch with HTML5, CSS, and JavaScript

Educators providing DOM courses in Andover delivered On Demand