Initial Setup For This Course

What is the DOM

Navigating the DOM Tree

Accessing Elements On The DOM - Overview

Introduction to the DOM (Document Object Model)

Introduction to API Usage

Understanding the Card Layout

Setting Up the HTML and CSS Files

Creating the Rick and Morty Card in the HTML

Styling the Rick and Morty Card

Integrating the JavaScript

Fetching Data from the API

Using QuerySelector to Grab The Container Element

Clearing the Parent Container's Inner HTML

Looping Through Character Data In The Console

Creating a Pattern for Displaying Individual Cards

Adding Rick and Morty Images to the HTML Page

Adding the Character Information To The Card

Conclusion

API Rick and Morty

<h3 id="1601d4fe-050f-4d27-b029-0fbdec6edb7e" data-toc-id="1601d4fe-050f-4d27-b029-0fbdec6edb7e">Course Description</h3>Phase II of JavaScript at PreCodeCamp is designed to elevate your programming skills by introducing you to the core concepts of dynamic web development. In this course, you’ll explore the power of the Document Object Model (DOM) to create interactive web pages and learn how to fetch and display data from external sources using the Fetch API. With a hands-on approach, you'll master techniques like selecting and manipulating HTML elements, responding to user events, and integrating data from APIs into your projects. By the end of this course, you’ll have the tools to build dynamic, user-driven web applications and the confidence to tackle more advanced JavaScript concepts.<h3 id="8cfd92b5-675b-4c46-823b-45d5d0e3c817" data-toc-id="8cfd92b5-675b-4c46-823b-45d5d0e3c817">Benefits of Taking This Course</h3><ul><li>Practical Skills: Learn how to create interactive web pages that respond to user actions, a key skill for any front-end developer.</li><li>Hands-On Experience: Gain real-world experience by working on projects like a to-do list, weather app, and data-driven applications.</li><li>Data Integration: Understand how to fetch, process, and display data from external APIs, an essential component of modern web applications.</li><li>Problem-Solving Abilities: Improve your debugging skills by working through common challenges in DOM manipulation and API integration.</li><li>Portfolio Boost: Build projects that you can showcase in your developer portfolio to impress potential employers or clients.</li><li>Foundation for Advanced Learning: Prepare for more complex JavaScript topics, such as frameworks, libraries, and full-stack development.</li></ul>This course is perfect for anyone who has a grasp of JavaScript basics and wants to take their skills to the next level by building engaging, data-driven websites. Whether you’re aiming for a career in web development or just enhancing your coding knowledge, this course will provide a solid foundation for your journey.

Learn to manipulate the DOM, handle user events, and integrate APIs using the Fetch API in this hands-on JavaScript course. Build interactive, data-driven web applications and elevate your coding skills for modern web development. Perfect for beginners!

First Unit	Last Unit	Per Unit
1	1	$99
2	10	$79
11	∞	$69

Course content

JavaScript Fundamentals II: Understanding DOM, Events, and API's

PreCodeCamp Learning