Styled Components Crash Course & Project

Подписаться 2,3 млн

Просмотров 252 тыс.

50% 1

A small project to get you familiar with using styled components with React
Code:
github.com/bradtraversy/huddl...
Udemy Courses:
traversymedia.com
💖 Support The Channel!
/ traversymedia
paypal.me/traversymedia
Frontend Mentor Challenges:
www.frontendmentor.io/
Timestamps:
0:00 - Intro
2:10 - Install & Setup
3:15 - First Styled Component
7:40 - Header Styled Component
9:23 - Nesting
10:27 - Passing Props
11:40 - Theme Provider
14:07 - Global Styles
16:28 - Project

Наука

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 283

@includejoe 2 года назад

I'm so glad to be part of those who were able to complete this course. This guy is a blessing to the webdev community! Thank you!!

@mahmoudalhussain9291 2 года назад

_You were a great inspiration for me, am doing good in my job i gathered a lot of new skills i just feel happy that am making big steps forward and all that because of you and your tutorials,_ *Thank you very much Brad*_, i really appreciate your effort._

@TraversyMedia 2 года назад

That's awesome congrats. Glad to have helped in any way :)

@gulraizgull8044 2 года назад

Congrats Mate...Are You Working With React Js?

@sinabeyraghdar6292 2 года назад

Congratulation Mahmoud!

@franklynokenwa9151 2 года назад

Kindly appreciate his effort by sending him some money, gifts or buying his paid courses on Udemy.

@lokeshkumar8672 2 года назад

@@TraversyMedia can you tell me font family in your vscodr

@mandihaase2744 2 года назад

Oh my goodness! What a blessing! I was just looking for a good tutorial on Styled Components and this tutorial appeared magically. Thank you so much!

@sakawathossain532 2 года назад

I just started learning react for three days and this is the best project that i can practice as a newbie..Thank you so much🖤

@worldclasscode1847 2 года назад

Yes, it's perfect for the beginner

@Pandemonius88 2 года назад

Really appreciated this. Saw a few Styled-Components guides and found this by far the most clearly explained, and the example project was a nice touch. Thanks!!

@thedannydarko Месяц назад

I'm a backend dev and frontend is taking a little effort to wrap my head around. You condensed a lot of knowledge into a relatively short amount of time and it made total sense to me. Learned a lot. Thank you!

@wasiuadekunle8980 2 года назад

Thanks so much Brad...This is a double blessing for me, firstly it's comes at the time when u want to improve my knowledge on styled components and secondly I'm also completing another front end mentor challenge

@hamzahmd_ 2 года назад

The best thing about styled-components is, we can use Sass nested syntax in them. It seems like a way of adding plain css in JS frameworks with JS.

@abg71297 2 года назад

This is exactly what my new project with the client has in requirements. Styled components. Thanks a ton @Brad!! Kudos and as always, great content. Big Fan. 💐

@BarakAlmog 2 года назад

Every new video release is a cause for celebration! Thank you so much, Brad.

@marcoscarvalhodev 10 месяцев назад

So far I have been using css.modules in my projects but this is impressive how the scalability is easier with Styled Components, I really loved it.

@christiannwodo2151 2 года назад

I started watching your videos in 2019. Your Nodejs courses really helped me

@JohnDoe-pb1qf Год назад

Thanks Brad, difficult concepts become easy with your tutorials.

@ariolverab 2 года назад

Great and useful crash course Brad, thanks a lot! You always come with really handy technologies.

@ebunoluwaoni3962 Год назад

Thank you Brad...for an explicit explanation. God bless you always

@vanessa_c 2 года назад

Thank you Brad!! This content is great. I’m going to use styled components in my next React project. 🙌🏼

@chriscastillo8068 2 года назад

This is super helpful. Currently learning to use this at work. Thanks for all you do Brad. It's fantastic.

@maheshr5282 2 года назад

It's really an awesome explanation with an real world example clearly explained. My knowledge is increased drastically after wathcing this video. Thank you so much.

@maximilianoInfinito 2 года назад

Hey I don't normally leave comments but wanted to say thanks for explaining everything so well and using a good pace.

@MrCoderYt 2 года назад

This is the first time I have heard of it. I am going to learn it now.😁 Although I have already done that huddle landing page challenge from frontendmentor and uploaded on my RU-vid channel.

@kevinvz5387 2 года назад

Bro what, i just started learning and using styled components a few days ago this is perfect timing

@TheRubiosMusic 2 месяца назад

You are my hero. I've completed your courses in Packt. I came across this video by coincidence, and kept wondering why that voice sounded so familiar! Obviously subscribed now!

@clevermissfox Год назад

Holy cow this programming playlist is bananas. You sir are very valuable and skilled. I’m enjoying learning from you! You could start a training school with these videos !!

@luisbiancardi6928 2 года назад

Amazing styled-component course, had no experience with styled-component but now I feel ready to create my first project, Thank you.

@worldclasscode1847 2 года назад

Yes, make that project :)

@laxmansutar7937 2 года назад

I was looking for the styled component tutorial.. at the right time...thank you so much Brad

@lofi_Insomnia_ 2 года назад

Just started a new job and need to learn styled component. This is super helpful!

@satyendra_pandit 2 года назад

Great video Brad. In past as well have learnt me things from you. You videos are always great without any nonsense stuffs.

@newseven385 2 года назад

thank you so much, look forward to all the upcomming videos

@munahussien807 2 года назад

I watch some of your Udemy lessons but I was not able to understand the styling , now It is so clear and I had understand how it is organized. Thank you for making things simple and easy to learn them.

@user-fh3sr2lr2x Год назад

You made so great lecture about styled-components which I've been searching to get used to styled-components. I really appreciate your effort.

@jeklo3713 Год назад

bud are you still using style-components

@Marsjemijntje 9 месяцев назад

This was an AMAZING tutorial, the content was just prefect - so many topic in one video, all one point! Thank you so much! Thank you for your time

@santhoshm1847 2 года назад

You read my mind Brad, thank you for this crash course😍

@rogeclash2631 Год назад

Thank you very much for this tutorial , i am using style component at work and this helped me a lot

@yayz_ 2 года назад

I swear I can learn anything as long as Brad is teaching it

@Sabin184 2 года назад

Thanks dude this tutorial was really helpful. I was working on a project with vanilla CSS and the files were starting to get way too confusing after a while. I think this will help.

@youngzproduction7498 9 дней назад

I learn a lot from you in only 1 vid. Thanks for sharing your knowledge on styled components. 🎉

@bosscoding3999 2 года назад

good to see you back after the vacation brad

@czubai 2 года назад

A recruitment interview kinda surprised me with styled components. Never used those. At least they gave me a heads-up in advance. :D This knowledge capsule gave me a great confidence boost, thank you!

@jamesamava320 2 года назад

Thank you Brad for all you do.

@mostafahabib97 2 года назад

Thank you so much for this fantastic crach course.

@godfreyndiritu369 2 года назад

Just when I wanted to request you to do a Video on styled components, boom! Thanks Brad

@isaiahdaniel2522 2 года назад

Been waiting for this brad, really love it thank you

@victorekea 2 года назад

Styled components is cool. No much difference from writing plain CSS. Awesome video Brad. 🔥

@muhammadhazman3064 Год назад

Lucky I found this video in youtube. Really help me to understand about styled components in short time. thumb up!

@evandromottaz 2 года назад

Hello buddy.. i'm writing just to thank you for your video... i'ts help me a lot to learn about styled-components.. the ThemeProvider and GlobalStyle blow my mind.. i dont know why, but documentation is very hard for me to understand, but when someone use in the practical form, it's makes easier. I thank God to has people like you, giving knowledge for free. Sorry for my bad english, it's not my primary language :)

@sheikhrashed4002 2 года назад

thank you so much brad i really hoping to this and finally got it from you

@adolphus1011 Год назад

This was an amazing crash course! Thank you, sir 🙂

@0x0abb 2 года назад

Thank you for yet another one of your great tutorials!

@mahendrasyathi5318 2 года назад

thanks a lot Brad, you did it so clean and tidy, love it. I'm waiting for your next tuts with tailwindcss, keep rocks!

@peshrawhasan6980 2 года назад

Thanks for all this great contents Brad, I have learned a lot from you :3

@jasonsakim 2 года назад

Thanks for such an awesome course. Learned a lot stuff.

@xtsxo9872 2 года назад

Excellent content, thank you for taking the time to put this together. It helped me out a lot.

@ThiagoSilva-jn6ov 6 дней назад

Good Course, just completed, was my first time using Styled Components.

@BryanChance 2 года назад

Right in time! I've been looking for something like this. Thanks :-)

@nikoreva2078 2 года назад

Love styled components! Just feels great!

@sebastianvasco3087 2 года назад

Always great content, love your videos Brad have learned a lot from you ✌🏽

@devmo9474 2 года назад

Brad! Your Intro. Just LOVE YOU Man. Hope you're doing well❤️

@Unkown5880 2 года назад

Wow this is a really good tutorial, I've learned more than I was expecting. Thank you for the effort 🙏🏽.

@worldclasscode1847 2 года назад

Yes, I agree, it's great

@_rachid 2 года назад

Thank you dear Brad, you are brilliant.

@Savage_Gamer777 2 года назад

Inspiration me so much. There’s some videos I watch that confuse me like scss but I just gotta take my time and learn from the grown up.

@automatic5236 2 года назад

You're the best, Brad. Thank you very much!

@jeevanthalluri2200 2 года назад

Thank you very much Brad. It is a mini but good project covering all my requirements. Please upload one Dash board project with React+Styled Componets+Formik Forms

@darkmift 2 года назад

Love your vids, concise and accurate.

@NA-ex9xk 2 года назад

awesome tutorial (commenting 8min into the video)l! I like to keep my styled-components in the component I'm styling. I don't have to navigate between files, especially if I have a big project I'm working on. This was one of the main reasons why I started using css-in-js.

@gloirebeya5127 5 месяцев назад

This was a very excellent work. Thank you so much

@blue_berry_pie64 Год назад

Thank you Brad so much!

@a5tr00 2 года назад

Exactly what I wanted to learn about the React Js Styled Components. Very well done. Did anyone notice the folder project name is named "hubble" and not "huddle" :D.

@user-oy4kf5wr8l 2 года назад

Amazing job! Thanks buddy!

@taniakedrova Год назад

Thanks for this amazing tutorial!

@Shahidulidseacademy 2 года назад

It's very helpful video for me, Thank you Traversy Media.

@0549213650 2 года назад

Thank you so much Brad!

@Dorchwoods 2 года назад

I'm still trying to wrap my head around the benefits of styled components. It's definitely cool, I think I just need to play with it a bit more

@HeyNoah 2 года назад

Super super awesome! Thanks so much for this!

@DrLouellLSala 2 года назад

Thank you for this video. Helped me a lot 🙂

@Omar45 2 года назад

Thanks a lot, Brad! Great as always

@mdbicky9460 2 года назад

awesome as always thanks Brad 🧡🤍

@aryankhan-tl6lx 2 года назад

Thank you so much for this tutorial it's worth watching

@labialkosta261 2 года назад

you are really an inspiration for me, I'm new at react and I'm following your adviceces, hope i get there ^^.

@JhonatanMorais 11 месяцев назад

amazing explanation. thanks for sharing.

@bishnuthapako Год назад

You are a Great inspiration for me. Thanks

@alpaykatipogullari1276 Год назад

You are awesome as always . Many thanks

@ilyiclen 2 года назад

Awesome tutorial. Thanks you!

@benvahaba 2 года назад

wow man you're awesome. thank you so much for that video

@pjos6406 Год назад

Thanks for that Brad

@codr6934 2 года назад

Dude this is exacly what i needed!!!

@mariobanovac4708 2 года назад

Awesome content Brad!

@Geomaverick124 2 года назад

Good to see you Brad :)

@hardwired89 2 года назад

thanks brad for this. ❤️❤️

@JointyTv 2 года назад

Would suggest checking out emotion. Since Material UI updated to V5 and supports it. You can you styled components too, but I find emotion a bit cleaner to write.

@idohershkovits7151 2 года назад

So informative, this is a great video.

@ahmad-murery 2 года назад

Hello Brad, Nice video as usual, at 37:58 you used id % 2 to switch the layout direction which may work but only when the ids are in sequence and incremented by 1, I think using index instead of id can be more reliable if item ids are not incremented by fixed number (in case of some items were deleted or their order was changed) Thanks for the great content, your making developers life easier