Learn Styled Components in React

Unlock CourseGet started!

Join 948 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenge
Join a friendly community
Unlock Course
Subscribe to access!
Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.
Subscription includes
All courses, bootcamps, paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
New courses monthly
The course creator Ania Kubow

with Ania Kubow

948 students enrolled

Course level: Intermediate

Learn how to use the Styled Components package in React by building a fun, hands-on project with software developer and YouTuber Ania Kubow.

You'll learn

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
man

Prerequisites

Before taking this course, you should have a basic understanding of HTML, CSS, JavaScript, and React. If you're not there yet, check out some of our free courses.

Meet your teacher

The course creator

Ania Kubow

Hi My Name is Ania and I am a software Developer and YouTuber. I like to make all sorts of tutorials mainly around JavaScript Games. I also like to teach React.js and a little bit of mobile development in React-native.

Follow me on twitter

Why this course rocks

The Styled Components package is the result of wondering how to enhance your CSS for styling React component systems. So if you’re looking for a great way to style your React projects, look no further!

Why use styled components?

Styled components are helpful for many reasons. They reduce class name bugs, they make your components more readable, and they allow you to navigate your CSS more easily. They also allow for dynamic styling and automatic vendor prefixing.

What is the structure of this course? This one-hour course follows a “lesson and project” approach. You’ll learn the core concepts and complete mini-challenges to test your understanding. Then you'll put your new skills to good use with a fun and practical project.

By the end of the course, you'll have a cool progress tracker to add to your portfolio or even expand upon to show off your coding skills.

Will I need to do any setup?

Thanks to Scrimba’s handy interface, there is hardly any setup required for this course. You're ready to begin learning straight away, so let’s get started!

Go Pro!
Built with Imba