No video
Styled Components Crash Course & Project
Рет қаралды 254,584
Күн бұрынA small project to get you familiar with using styled components with React
Code:
github.com/bra...
Udemy Courses:
traversymedia.com
💖 Support The Channel!
/ traversymedia
paypal.me/trav...
Frontend Mentor Challenges:
www.frontendme...
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
@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
@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!!
@thedannydarko 2 ай бұрын
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!
@TheRubiosMusic 4 ай бұрын
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!
@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
@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.
@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 KZfaq channel.
@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 :)
@youngzproduction7498 Ай бұрын
I learn a lot from you in only 1 vid. Thanks for sharing your knowledge on styled components. 🎉
@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 :)
@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!
@newseven385 2 жыл бұрын
thank you so much, look forward to all the upcomming videos
@yayz_ 2 жыл бұрын
I swear I can learn anything as long as Brad is teaching it
@maximilianoInfinito 2 жыл бұрын
Hey I don't normally leave comments but wanted to say thanks for explaining everything so well and using a good pace.
@marcoscarvalhodev Жыл бұрын
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.
@ThiagoSilva-jn6ov Ай бұрын
Good Course, just completed, was my first time using Styled Components.
@lofi_Insomnia_ 2 жыл бұрын
Just started a new job and need to learn styled component. This is super helpful!
@kevinvz5387 2 жыл бұрын
Bro what, i just started learning and using styled components a few days ago this is perfect timing
@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
@JohnDoe-pb1qf Жыл бұрын
Thanks Brad, difficult concepts become easy with your tutorials.
@BarakAlmog 2 жыл бұрын
Every new video release is a cause for celebration! Thank you so much, Brad.
@christiannwodo2151 2 жыл бұрын
I started watching your videos in 2019. Your Nodejs courses really helped me
@jatayukataria7760 2 жыл бұрын
U are the best teacher on KZfaq
@TraversyMedia 2 жыл бұрын
Thanks so much, I appreciate that
@muhammadhazman3064 Жыл бұрын
Lucky I found this video in youtube. Really help me to understand about styled components in short time. thumb up!
@rogeclash2631 Жыл бұрын
Thank you very much for this tutorial , i am using style component at work and this helped me a lot
@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
@marianogonzalez33 2 жыл бұрын
very useful comment, thank you
@ahmad-murery 2 жыл бұрын
@@marianogonzalez33 You're welcome
@ikramulhaq6657 2 жыл бұрын
At 38:30 we can also do in this way: &:nth-child(2n) { flex-direction: row-reverse; }
@victorekea 2 жыл бұрын
Styled components is cool. No much difference from writing plain CSS. Awesome video Brad. 🔥
@benvahaba 2 жыл бұрын
wow man you're awesome. thank you so much for that video
@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
@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!!
@Marsjemijntje 10 ай бұрын
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
@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. 💐
@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-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
@bosscoding3999 2 жыл бұрын
good to see you back after the vacation brad
@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
@devmo9474 2 жыл бұрын
Brad! Your Intro. Just LOVE YOU Man. Hope you're doing well❤️
@martin_martin_00 2 жыл бұрын
this is starting to get suspicious, I honestly just started using styled components :D thanks Brad!
@UserNameNiemand 2 жыл бұрын
Not only I've been using it on a recent project, but what srtikes me the most is the fact, that I'm using the same font for the project! Just as it is here )
@ebunoluwaoni3962 2 жыл бұрын
Thank you Brad...for an explicit explanation. God bless you always
@laxmansutar7937 2 жыл бұрын
I was looking for the styled component tutorial.. at the right time...thank you so much Brad
@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.
@mostafahabib97 2 жыл бұрын
Thank you so much for this fantastic crach course.
@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.
@vanessa_c 2 жыл бұрын
Thank you Brad!! This content is great. I’m going to use styled components in my next React project. 🙌🏼
@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.
@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.
@brunofilgueiras3518 Жыл бұрын
wanted ideas for how to organize folder structure, I like the way you organized things, Brad
@luislla3142 2 жыл бұрын
Amazing Job!!!
@chriscastillo8068 2 жыл бұрын
This is super helpful. Currently learning to use this at work. Thanks for all you do Brad. It's fantastic.
@tedfitzpatrickyt 2 жыл бұрын
In general, this will create a lot more work for devs than just classing components. This tightly couples structure and styling - it will lead to headaches with responsive/adaptive code; also with optimizing our UI for a11y, and is massively anti-DRY. All that said, it is useful if ill-advised to have a way to apply styles locally like this.
@manish2412 2 жыл бұрын
So helpful nice video it's worth To watch the video💜
@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.
@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
@0x0abb 2 жыл бұрын
Thank you for yet another one of your great tutorials!
@user-oy4kf5wr8l 2 жыл бұрын
Amazing job! Thanks buddy!
@jasonsakim 2 жыл бұрын
Thanks for such an awesome course. Learned a lot stuff.
@MikeyMyco 2 жыл бұрын
What is that extension that autocompletes the path to your imports!!!??? That's awesome. Nice Job explaining as usual. Thank you sir.
@BryanChance 2 жыл бұрын
Right in time! I've been looking for something like this. Thanks :-)
@godfreyndiritu369 2 жыл бұрын
Just when I wanted to request you to do a Video on styled components, boom! Thanks Brad
@kaderlakhdar5735 2 жыл бұрын
😍😍😍😍 Brad is here 😎
@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.
@isaiahdaniel2522 2 жыл бұрын
Been waiting for this brad, really love it thank you
@DrLouellLSala 2 жыл бұрын
Thank you for this video. Helped me a lot 🙂
@ariolverab 2 жыл бұрын
Great and useful crash course Brad, thanks a lot! You always come with really handy technologies.
@gloirebeya5127 6 ай бұрын
This was a very excellent work. Thank you so much
@Lio_08 2 жыл бұрын
I love u so much. In fact, i 'm not good at english but I can know what you do. Maybe this video and speend little slow but I really like this speed. thanx a lot.
@ThunderSlav 2 жыл бұрын
-The best you are! Row-Yoda
@sheikhrashed4002 2 жыл бұрын
thank you so much brad i really hoping to this and finally got it from you
@automatic5236 2 жыл бұрын
You're the best, Brad. Thank you very much!
@peshrawhasan6980 2 жыл бұрын
Thanks for all this great contents Brad, I have learned a lot from you :3
@xtsxo9872 2 жыл бұрын
Excellent content, thank you for taking the time to put this together. It helped me out a lot.
@DemiZhao-pi7qp Жыл бұрын
nice video, thought have to wrap every html tag in styled comp
@aryankhan-tl6lx 2 жыл бұрын
Thank you so much for this tutorial it's worth watching
@santhoshm1847 2 жыл бұрын
You read my mind Brad, thank you for this crash course😍
@Lotpite 2 жыл бұрын
really nice and useful content) thanks
@worldclasscode1847 2 жыл бұрын
I agree
@johanlofgren5793 2 жыл бұрын
Hi, maybe a stupid question, but when you´re styling your components, how do you get that suggestion box to show? I mean if ou start writing "back" you get that box of suggetsion as everywhere else in vs with "background, background-color etc.." guess i dont see them because of backthicks but how to reveal that?
@jamesamava320 2 жыл бұрын
Thank you Brad for all you do.
@nuni233 2 жыл бұрын
First thanks for the great tutorial , but how does Styled- Components effect CSS debugging in Browser Class Names ect. ?
@Oli_web 2 жыл бұрын
Hey by chance did you find how to fix that issue? Many thanks in advance
@nuni233 2 жыл бұрын
@@Oli_web What to Fix ? I only asked a question ! I hoped maybe somebody knows how to and will answer or send a link to .... !!
@marian_tsx 2 жыл бұрын
Wow, i;m amazed by the styled-components D: Reminds me of when i used React-Native, the result is a super clean code. without soo many className={} everywhere. And i'm guessin that since you have a callback function in there for the props, you can easily add some custom logic too to be returned and set to the prop. Love it.
@worldclasscode1847 2 жыл бұрын
Yes, it's super clean, the result
@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!
@taniakedrova Жыл бұрын
Thanks for this amazing tutorial!
@sebastianvasco3087 2 жыл бұрын
Always great content, love your videos Brad have learned a lot from you ✌🏽
@Shahidulidseacademy 2 жыл бұрын
It's very helpful video for me, Thank you Traversy Media.
@labialkosta261 2 жыл бұрын
you are really an inspiration for me, I'm new at react and I'm following your adviceces, hope i get there ^^.
@muhammadans7071 Жыл бұрын
video is very long but its too worthy thanks bro
@rizanmohomed8029 2 жыл бұрын
I only knew there is something called Styled component. But now I feel like I am a master on that 🤩. Excellent tutorial 🎉. Thank you very much Brad 🤗
@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.
@nikoreva2078 2 жыл бұрын
Love styled components! Just feels great!
@alpaykatipogullari1276 Жыл бұрын
You are awesome as always . Many thanks
@adolphus1011 Жыл бұрын
This was an amazing crash course! Thank you, sir 🙂
@bishnuthapako Жыл бұрын
You are a Great inspiration for me. Thanks
@codr6934 2 жыл бұрын
Dude this is exacly what i needed!!!
@_rachid 2 жыл бұрын
Thank you dear Brad, you are brilliant.
@blue_berry_pie64 Жыл бұрын
Thank you Brad so much!
@ahmaddawood9691 2 жыл бұрын
As you always inspire us with great tutorials ,Please we need Styled components with React Native Tutorial,,or is this one can be applicable for both ? ...Thanks
@JhonatanMorais Жыл бұрын
amazing explanation. thanks for sharing.
@stoqnbochukov5503 2 жыл бұрын
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!!