React: Building Styles with CSS Modules

Learn how to leverage CSS modules, components, grids, and more in this course designed for developers in the React community.

React styles and CSS styles haven't always agreed in the use of inline styling. As React development has grown, developers have figured out more and more ways of smoothly integrating and maintaining a style with their code. Whether you need to style a React-based user interface or want to create dramatic animation, this course gives you the keys you need to build attractive and maintainable style using React and CSS modules.

Introduction

• Welcome
• Course prerequisites
• Using the exercise files

1. Setting Up

• React with CSS modules without ejecting
• Clean up our created file

2. CSS Modules Basics

• Introduction to CSS modules
• Initial directory structure
• Add components to the app
• CSS syntax with the components
• Use composes to leverage other styles
• Set up our state and grid component
• Complete our GridItem

3. Interactions and Responsive

• Basic animation with CSS keyframes
• SVG loading with state
• Add final elements
• Media queries and combine styles

Conclusion

• Next steps