Code-Alongs
These guided coding exercises will help you practice the concepts learned in the modules. You'll build practical applications step-by-step, reinforcing your understanding of DOM manipulation, events, components, and network data.
Code-Along 1: JavaScript Classes
Build a component library using JavaScript classes. Learn about object-oriented programming and component design patterns.
Introduction to JavaScript Classes
In this code-along, we'll build a component library using JavaScript classes. Classes provide a blueprint for creating objects, encapsulating data and behavior into a single unit. This approach allows us to create reusable components with clear interfaces and organization.
Components We'll Create
We'll build the following components:
- Button Component - Reusable buttons with various styles and states
- Card Component - Information cards with customizable content
- Modal Component - Pop-up dialogs for user interactions
What You'll Learn
- Class syntax and constructor methods
- Creating and using class methods
- Encapsulating functionality within components
- Creating customizable component instances
- Building a component library architecture
Code-Along 2: Network Requests
Create a data-driven application using the fetch API. Learn about handling API responses and managing application state.
Building a Data-Driven App
In this code-along, we'll create an application that fetches data from an API and displays it to users. We'll use the Fetch API to make network requests, handle responses, and update the UI based on the data we receive.
Features We'll Implement
- Fetching data from a public API
- Displaying the data in a structured layout
- Implementing search and filtering functionality
- Creating and submitting new data via POST requests
- Handling loading states and errors
What You'll Learn
- Making GET, POST, PUT, and DELETE requests
- Handling asynchronous operations with Promises
- Processing JSON data
- Dynamic DOM updates based on data changes
- Error handling for network requests