← Back to Course Overview
Code-Alongs
Code-Along 1: Object-Oriented Programming
In this code-along, you'll refactor a functional programming implementation into an object-oriented design using ES6 classes. Learn how to identify opportunities for creating classes and implement inheritance to create a more maintainable codebase.
Learning Objectives:
- Transform function-based code into class-based architecture
- Implement classes with constructors, properties, and methods
- Create inheritance relationships between classes
- Understand when and how to use the 'this' keyword in classes
- Implement instance methods versus static methods
Code-Along 2: Advanced Functions
This code-along focuses on applying advanced function concepts to solve real-world problems. You'll work with callback functions, arrow functions, closures, and higher-order functions to create a more functional and maintainable codebase.
Learning Objectives:
- Convert standard functions to arrow functions where appropriate
- Implement and use callback functions to handle asynchronous operations
- Create and use higher-order functions for code reuse
- Apply closures to maintain state between function calls
- Use destructuring to simplify function parameters and returns
Code-Along 3: Modern CSS Layout with Flexbox
In this code-along, you'll build a responsive web layout using CSS Flexbox. You'll start with a basic HTML structure and apply Flexbox properties to create a modern, flexible design that adapts to different screen sizes.
Learning Objectives:
- Set up flex containers and flex items
- Control the direction, alignment, and distribution of elements
- Apply flex-grow, flex-shrink, and flex-basis properties
- Create responsive designs using Flexbox
- Build common UI components like navigation bars and card layouts