Learn how to use the Styled Components package in React by building a fun, hands-on project with software developer and YouTuber Ania Kubow.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
Why to use styled components
Setup & syntax
Styling through props
Separating components
Extending styles
Polymorphic props
Passing props
Statement-based styling
If-else statements in styled components
Nesting
Animations
How to build a progress tracker
01. Learn Styled Components in React
- Introduction to Styled Components
- Why Use Them?
- Setup and Syntax
- Setting Up from Scratch – Project Work
- Styling Through Props
- Separating Components and Passing Props – Project Work
- Extending Styles
- Extended Styles in Real Life Examples – Project Work
- Polymorphic Prop
- Passing Props
- Passing Props in Real Life Examples – Project Work
- If Else Statements in Styling
- If Else Statements in Styled Components – Project Work
- Nesting
- Animations
- Rendering Our Progress Tracker Based on Todays Date – Project
- Update Your Own Progress – Project
- Outro
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
Why to use styled components
Setup & syntax
Styling through props
Separating components
Extending styles
Polymorphic props
Passing props
Statement-based styling
If-else statements in styled components
Nesting
Animations
How to build a progress tracker
COURSE OUTLINE
01. Learn Styled Components in React
- Introduction to Styled Components
- Why Use Them?
- Setup and Syntax
- Setting Up from Scratch – Project Work
- Styling Through Props
- Separating Components and Passing Props – Project Work
- Extending Styles
- Extended Styles in Real Life Examples – Project Work
- Polymorphic Prop
- Passing Props
- Passing Props in Real Life Examples – Project Work
- If Else Statements in Styling
- If Else Statements in Styled Components – Project Work
- Nesting
- Animations
- Rendering Our Progress Tracker Based on Todays Date – Project
- Update Your Own Progress – Project
- Outro
