Styled Components Crash Course & Project
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
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!!
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!
_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._
That's awesome congrats. Glad to have helped in any way :)
Congrats Mate...Are You Working With React Js?
Congratulation Mahmoud!
Kindly appreciate his effort by sending him some money, gifts or buying his paid courses on Udemy.
@@TraversyMedia can you tell me font family in your vscodr
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!!
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!
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. 💐
Every new video release is a cause for celebration! Thank you so much, Brad.
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
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🖤
Yes, it's perfect for the beginner
Great and useful crash course Brad, thanks a lot!
You always come with really handy technologies.
Thanks Brad, difficult concepts become easy with your tutorials.
I started watching your videos in 2019. Your Nodejs courses really helped me
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
Hey I don't normally leave comments but wanted to say thanks for explaining everything so well and using a good pace.
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 !!
This is super helpful. Currently learning to use this at work. Thanks for all you do Brad. It's fantastic.
Great video Brad. In past as well have learnt me things from you. You videos are always great without any nonsense stuffs.
I was looking for the styled component tutorial.. at the right time...thank you so much Brad
Thank you Brad!! This content is great. I’m going to use styled components in my next React project. 🙌🏼
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!
Been waiting for this brad, really love it thank you
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 TH-cam channel.
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.
thank you so much, look forward to all the upcomming videos
Thank you Brad...for an explicit explanation. God bless you always
I learn a lot from you in only 1 vid. Thanks for sharing your knowledge on styled components. 🎉
Right in time! I've been looking for something like this. Thanks :-)
Lucky I found this video in youtube. Really help me to understand about styled components in short time. thumb up!
Thank you for yet another one of your great tutorials!
You read my mind Brad, thank you for this crash course😍
good to see you back after the vacation brad
Excellent content, thank you for taking the time to put this together. It helped me out a lot.
Thanks for all this great contents Brad, I have learned a lot from you :3
Thank you Brad for all you do.
thanks a lot Brad, you did it so clean and tidy, love it.
I'm waiting for your next tuts with tailwindcss, keep rocks!
Thank you so much for this fantastic crach course.
You made so great lecture about styled-components which I've been searching to get used to styled-components.
I really appreciate your effort.
bud are you still using style-components
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.
Always great content, love your videos Brad have learned a lot from you ✌🏽
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 :)
Amazing styled-component course, had no experience with styled-component but now I feel ready to create my first project, Thank you.
Yes, make that project :)
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.
Thanks for such an awesome course. Learned a lot stuff.
thank you so much brad i really hoping to this and finally got it from you
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!
Just started a new job and need to learn styled component. This is super helpful!
This was an amazing crash course! Thank you, sir 🙂
Thank you very much for this tutorial , i am using style component at work and this helped me a lot
Styled components is cool. No much difference from writing plain CSS. Awesome video Brad. 🔥
Just when I wanted to request you to do a Video on styled components, boom! Thanks Brad
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.
Bro what, i just started learning and using styled components a few days ago this is perfect timing
Love styled components! Just feels great!
Love your vids, concise and accurate.
Wow this is a really good tutorial, I've learned more than I was expecting.
Thank you for the effort 🙏🏽.
Yes, I agree, it's great
Thanks a lot, Brad! Great as always
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.
This was a very excellent work. Thank you so much
You're the best, Brad. Thank you very much!
Thank you dear Brad, you are brilliant.
Amazing job! Thanks buddy!
Dude this is exacly what i needed!!!
Awesome content Brad!
awesome as always thanks Brad 🧡🤍
Thanks for this amazing tutorial!
Good Course, just completed, was my first time using Styled Components.
I swear I can learn anything as long as Brad is teaching it
Thank you for this video. Helped me a lot 🙂
Amazing Job!!!
wow man you're awesome. thank you so much for that video
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.
Thank you so much for this tutorial it's worth watching
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.
It's very helpful video for me, Thank you
Traversy Media.
Super super awesome! Thanks so much for this!
You are awesome as always . Many thanks
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.
Brad! Your Intro. Just LOVE YOU Man. Hope you're doing well❤️
Thank you Brad so much!
you are really an inspiration for me, I'm new at react and I'm following your adviceces, hope i get there ^^.
You are a Great inspiration for me. Thanks
Good to see you Brad :)
So helpful nice video it's worth To watch the video💜
Awesome video, I really learned a lot as I'm new in react! Thanks, Brad!! And not only for this video but for all. I'm doing college now and I got the feeling that I'm learning more from your videos rather than college lectures!!
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
amazing explanation. thanks for sharing.
Thank you so much Brad!
So informative, this is a great video.
thanks brad for this. ❤️❤️
Awesome tutorial. Thanks you!
Thanks for that Brad
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
very useful comment, thank you
@@marianogonzalez33 You're welcome
Brad is the GOAT!!!
Great informative video.
Great tutorial !
Thxx you so much man for teaching everything I know about web
Wow this really helped me
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
awesome video keep going!
😍😍😍😍 Brad is here 😎