Learn Styled Components in React

Enroll for free Get started!

Join 2359 other students

Log in to get

Access to all our free courses

Interactive hands-on content

100s of code challenges

Join a friendly community

Enroll for free

Subscribe to access!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 and career paths

100s of coding challenges

Certificates of completion

Exclusive Pro members chat

with Ania Kubow

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.

What's inside

This course contains 18 interactive screencasts

Learn Styled Components in React

18 lessons1 hour 39 min

1. Introduction to Styled Components

2. Why use them?

3. Setup and Syntax

4. Setting up from scratch - Project work

5. Styling through Props

6. Separating Components and passing props - Project work

7. Extending Styles

8. Extended Styles in real life examples - Project work

9. Polymorphic Prop

10. Passing props

11. Passing props in real life examples - Project work

12. If else statements in styling

13. If else statements in styled Components - Project work

16. Rendering our Progress Tracker based on todays Date - Project

17. Update your own Progress - Project

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

Prerequisites

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

Learn JavaScript

207 lessons | 10 hours 23 min

with Per Harald Borgen

Per Harald Borgen

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!