Styled Components Basics Tutorial | Everything you need to know | CSS in JS | Reactjs styling

In this video, you will learn the basics of Styled Components. Styled components is CSS in js library which allows you to style your react components. Resources: - CSS in js: https://youtu.be/Be_C_Op8Tx8 - Xbox clone demo: https://xbox-clone-yt.vercel.app/ Timestamp: 0:00 Introduction 3:25 Self Introduction 4:12 Setup 4:55 How to create Styled Components 7:00 Global Style 9:05 Inherit Components 10:50 Use Selectors in Components 15:15 Add attributes 17:05 Change style using props 20:25 Themes 24:35 Mixins 25:55 Media Queries 28:25 Outro About me Why do I do what I do? -- The Internet has revolutionized our life. I want to make the internet more beautiful and useful. What do I do? -- I ended up being a full-stack software engineer. What can I do? -- I can develop complex full-stack web applications like social media applications or e-commerce sites. What have I done? -- I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories. I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don't miss the cool stuff. Want to work with me? -- I am looking for a team where I can show my ambition and passion and produce great value for them. Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you. Contacts Email: [email protected] Linkedin: https://linkedin.com/in/thatanjan/ portfolio: https://thatanjan.vercel.app/ Github: https://github.com/thatAnjan/ Instagram personal: https://instagram.com/thatAnjan/ Twitter: https://twitter.com/thatAnjan Blogs you might want to read: Eslint, prettier setup with TypeScript and react: https://www.culescoding.space/blog/setup-eslint-prettier-with-typescript-and-react What is Client-Side Rendering?: https://www.culescoding.space/blog/what-is-client-side-rendering What is Server Side Rendering?: https://www.culescoding.space/blog/what-is-server-side-rendering Everything you need to know about tree data structure: https://www.culescoding.space/blog/everything-you-need-to-know-about-tree-data-structure 13 reasons why you should use Nextjs: https://www.culescoding.space/blog/13-reasons-why-you-should-use-Nextjs Videos you might want to watch: Setup Eslint Prettier with Typescript and React -Nextjs, Create React App: http://youtu.be/T-n0mrssDiw Everything you need to know about CSS in JS: https://youtu.be/Be_C_Op8Tx8 Toggle Dark mode with Material-UI: https://youtu.be/ag3je1g0BN8 Build a real-time view counter: https://youtu.be/B3HX2rWyKlU Build a small search engine with MongoDB: https://youtu.be/C6VytdSDNSk Playlists you might like: Build a blog using JAMstack: https://www.youtube.com/watch?v=KYLBb1W1ZBA&list=PLEr-WXao6eSPQzQAlkYpNLfcSm6pTiTpd Material-UI basics course: https://www.youtube.com/watch?v=grjle8AcQRs&list=PLEr-WXao6eSMddsL31fYlOGdbIk5nT-Pi Quick tricks: https://www.youtube.com/watch?v=RECwLOZdiR4&list=PLEr-WXao6eSPspqYqDd0ISbLdDbBAIPNR Crash course: https://www.youtube.com/watch?v=rSa8sUC8m_4&list=PLEr-WXao6eSNuG2mQyV_48RQoj5p8WM_q How-to videos: https://www.youtube.com/watch?v=T-n0mrssDiw&list=PLEr-WXao6eSOVI5LSBn23tsqCp-pCAwiu Stay safe and good bye.