React Styled Components Tutorial and Project Course
4.8 (218 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,511 students enrolled

React Styled Components Tutorial and Project Course

Step by Step Learn Styled-Components and Create Interesting Project
4.8 (218 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,511 students enrolled
Created by John Smilga
Last updated 7/2019
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 1 article
  • 45 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Using Styled-Components in React Applications
Course content
Expand all 58 lectures 06:53:09
+ Styled Components Tutorial
29 lectures 02:56:18
Resource Files
00:28
Spring Cleaning
01:53
Inline CSS
02:39
Global CSS
01:17
CSS Variables
04:23
File CSS
04:30
Global CSS Collision
01:06
Styled-Components Install
02:04
Basic Syntax
08:51
Seperate File
04:28
VS-CODE Extension
02:06
Basic Variables
03:21
Advanced Variables
05:40
Nesting and Selecting Styled Component
05:55
Props - Basics
07:00
Props - Ternary Operator
01:44
Global Styles
04:26
Extending Styled Components
05:04
Extending Continued
05:39
Alternative Syntax - React Components as Styled Components
06:14
Hero Component Example
11:57
Banner Component Added
09:44
attrs Method
09:42
CSS Helper Function
07:44
Animations
08:38
Themes
33:06
Simple Media Queries
07:25
Media Queries with a Object
06:31
+ Beachwalk Resort Project
23 lectures 03:42:05

Course Project is Currently Being Recorded

About Project
00:56
Setup Files
02:20
Bootstrap Application
03:17
Folder Structure
13:05
Global Styles
14:06
Helper Functions Intro
10:12
Polished.js
02:08
Hero Component
11:25
Background and Flexbox Helper Functions
16:55
Banner Component Basics
11:10
Banner Component CSS
07:44
Banner Component Helper Functions
12:10
Banner Component Animation
08:31
Button Component
16:56
"as" Prop
02:45
Section Component and Title Components
11:05
About Section
14:34
Rooms Component Setup
09:14
Rooms Component
16:08
Single Room Component
25:52
Grid Shortcut
08:46
Finished Project
00:01
Requirements
  • Basic Knowledge of React
Description

As styled-components co-creator Max Stoiber says:

“The basic idea of styled-components is to enforce best practices by removing the mapping between styles and components.”

Styled-Components are part of CSS-in-JS movement where we can create components that possess their own encapsulated styles.No longer we need to create component decide on a selector and then rush to app.css or any other stylesheet to write separate styles for that particular component. What makes Styled-Components so cool is their awesome tagged template syntax that allows to create normal react components by only defining styles.With zero configuration styled-components support css modularity, variables in css, nesting in css, extending components styles and many more. Styled Components also allows us to  write plain CSS in your components without worrying about class name collisions


Who this course is for:
  • Everyone who wants to learn Styled-Components