In these code-alongs, you'll build practical applications that demonstrate the concepts learned in the modules. You'll work on building a component library using JavaScript classes and creating a data-driven application that consumes data from an API.
Code-Along 1: JavaScript Classes
Build a component library using JavaScript classes. Learn about object-oriented programming and component design patterns that enable code reuse and maintainability.
What You'll Build
In this code-along, you'll create a robust component library that includes:
- A base Component class that all other components will extend
- Reusable UI components like Button, Card, Modal, and Form elements
- Event handling and state management within component classes
- Methods for rendering components to the DOM and handling lifecycle events
Key Concepts Covered
- Using ES6 classes to create component blueprints
- Implementing inheritance with the extends keyword
- Encapsulating component state and behavior
- Creating reusable component templates
- Composition of complex components from simpler ones
Note: Please visit the platform to access the current code-along materials and videos.
Code-Along 2: Network Requests
Create a data-driven application using the fetch API. Learn about handling API responses, processing JSON data, and managing application state based on network responses.
What You'll Build
In this code-along, you'll develop a complete web application that:
- Fetches data from a public API
- Displays loading states during requests
- Handles and displays errors appropriately
- Transforms API data into dynamic DOM elements
- Implements search, filter, or pagination functionality
Key Concepts Covered
- Using the Fetch API to make HTTP requests
- Working with Promises and async/await syntax
- Handling JSON responses and error conditions
- Implementing proper loading and error states in the UI
- Creating dynamic components from API data
- Making different types of requests (GET, POST, PUT, DELETE)
Note: Please visit the platform to access the current code-along materials and videos.