React: Building Styles with CSS Modules
1h 34mIntermediate2021-10-06
Authors
Emmanuel Henri
Executive with 20+ years of experience in programming and design
Course details
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. But with so many options, it may be confusing on where to get started, especially if you’ve worked with CSS on non-React-based projects. In this course, Emmanuel Henri brings some clarity to your options and introduces the concepts and syntax for CSS modules with React. 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 an attractive and maintainable style using React and CSS modules.
Skills covered
React.jsWeb StandardsMetaWeb DesignFront-End Web DevelopmentWeb DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Building a React site with CSS Modules
- 02 - Course prerequisites
1. Setting Up
- 03 - React with CSS Modules without ejecting
- 04 - Clean up of your created file
2. Basics of CSS Modules
- 05 - Introduction to CSS Modules
- 06 - Initial directory structure
- 07 - Add components to the app
- 08 - CSS syntax with the components
- 09 - Use composes to leverage other styles
- 10 - Set up your state and grid component
- 11 - Complete your grid item
3. Interactions and Responsive Design
- 12 - Basic animation with CSS keyframes
- 13 - SVG loading with state
- 14 - Add final elements
- 15 - Media queries and combining styles
Conclusion
- 16 - Next steps