English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 7 Hours | 5.34 GB
Step by Step Learn Styled-Components and Create Interesting Project
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
What you’ll learn
- Using Styled-Components in React Applications
Table of Contents
Introduction
1 Course Info
2 Low Quality Video Fix
3 Course Review
4 What Are Styled-Components
5 Course Requirements
6 VS Code Setup
Styled Components Tutorial
7 Create Tutorial Application
8 Resource Files
9 Spring Cleaning
10 Inline CSS
11 Global CSS
12 CSS Variables
13 File CSS
14 Global CSS Collision
15 Styled-Components Install
16 Basic Syntax
17 Seperate File
18 VS-CODE Extension
19 Basic Variables
20 Advanced Variables
21 Nesting and Selecting Styled Component
22 Props – Basics
23 Props – Ternary Operator
24 Global Styles
25 Extending Styled Components
26 Extending Continued
27 Alternative Syntax – React Components as Styled Components
28 Hero Component Example
29 Banner Component Added
30 attrs Method
31 CSS Helper Function
32 Animations
33 Themes
34 Simple Media Queries
35 Media Queries with a Object
Beachwalk Resort Project
36 About Project
37 Project Intro
38 Setup Files
39 Bootstrap Application
40 Folder Structure
41 Global Styles
42 Helper Functions Intro
43 Polished.js
44 Hero Component
45 Background and Flexbox Helper Functions
46 Banner Component Basics
47 Banner Component CSS
48 Banner Component Helper Functions
49 Banner Component Animation
50 Button Component
51 as Prop
52 Section Component and Title Components
53 About Section
54 Rooms Component Setup
55 Rooms Component
56 Single Room Component
57 Grid Shortcut
58 Finished Project
Resolve the captcha to access the links!