Тёмный

CSS Grid Crash Course 

Traversy Media
Подписаться 2,3 млн
Просмотров 320 тыс.
50% 1

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

 

26 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 446   
@robrice4076
@robrice4076 2 года назад
I remember taking your crash course on html, 8 months ago and now I’m starting my first front end dev job next week. Thanks for all you do Brad!
@GuitarHope
@GuitarHope 2 года назад
If you don't mind, what have you learnt in these 8 months in order to be be able to do the job?
@Muffi606
@Muffi606 2 года назад
Can you share a little bit more about your journey, just starting front end development
@robrice4076
@robrice4076 2 года назад
@@GuitarHope Sorry for the late response. But the technologies that ive learned are HTML, CSS/SASS, Vanilla JavaScript, Bootstrap, and learned my way around github and the terminal. I made learning an everyday thing and listened to what the big tech youtubers said about finding a job , replicated a lot of sights from frontendmentor, took as much classes from scrimba. And i think most important, when i talked to companies that wanted to hire me i just sounded excited and passionate to talk to them and told them im ready to give it my all.
@robrice4076
@robrice4076 2 года назад
@@Muffi606 So i had no professional tech experience, i transitioned from a barber to a front end dev. I woke up early in the mornings before work / after laying my child down at night and followed tutorials, built my own ideas, or just replicated sites. Listen to podcast/youtube videos on the way to work/at lunch, i made development my life. For real give it time, consistency is key, trust the process. I've learned things that i thought i could never learn. And have trust in your self and believe everything brad says.
@Muffi606
@Muffi606 2 года назад
@@robrice4076 this is awesome
@noahdiez9400
@noahdiez9400 Год назад
The way you teach and show alternative ways of doing stuff than just one example are the type of tutorials that give people better perspectives. Very well done
@favouritecomics2177
@favouritecomics2177 2 года назад
Brad is the reason why I have not given up on web development.. Thank you so much sir
@fablyinspirations7783
@fablyinspirations7783 2 года назад
Thank you Brad. Amazing tutorial as always. I personally do not take your generous sharing of knowledge for granted because I can imagine how much work goes into creating great tutorials like these.
@kratty
@kratty 2 года назад
This is by far my favorite grid tutorial. Not only did you show the basics and syntax, but we got example of how to incorporate it into a somewhat real scinero. It was a great touch combining the use of grid and flex box to help tie both uses together. Bravo.
@TheSharkbeast
@TheSharkbeast 2 года назад
Just in time i actually skipped Grid while learning Css and moved to Js after a few projects now i was reconsidering Grid literally few hours ago !! Thanks alot your React front to back is Golden
@stevenwilson5556
@stevenwilson5556 Год назад
5:54 the hack to add 9 numbered items in VS code felt like a superpower. Thanks for this video. I am already lovin' it.
@nomagix
@nomagix 2 года назад
Hey Brad, I just wanna thank you so much for your hard work. Your channel is invaluable! You're awesome.💕
@AYUSH-fn6ql
@AYUSH-fn6ql Год назад
In the media queries part, instead of using grid-template-columns:1fr and changing all that spanning stuff, i used display:block and added a little margin here and there. It worked.
@ezeobisochima9944
@ezeobisochima9944 2 года назад
I finished grid system with your modern HTML and CSS course from udemy and also with your crash course on RU-vid and all of them really make sense. But I feel that this one is also a must watch crash course 😂. Any video from Brad for me it is a must watch 😁
@mobeenrajpoot5315
@mobeenrajpoot5315 2 года назад
Now you are one of my favourite teachers. I really like the project base tutorials especially when you build things from scratch and give us a chance to learn some fundamental things from it.
@ScriptRaccoon
@ScriptRaccoon 2 года назад
Really concise course, thanks! As for the project in the end, I suggest to change the media queries from max-width to min-width, i.e. do mobile first design. Then the "default" view of the cards is just stacked and very simple, and all the grid spans, cols and rows go to the media query. The advantage of this is that we do *not* have to reset the grid styles as shown in the video (51:00). So we achieve the same result with less code! This is very well explained as well in Kevin Powell's videos on responsive design.
@lloadded
@lloadded 2 года назад
oh i just understood that
@AbhishekTiwari-cf8sp
@AbhishekTiwari-cf8sp 2 года назад
Always waiting for your new crash course, most powerful and useful for me❤️
@henrymacartney381
@henrymacartney381 2 года назад
Thank you, sir for another excellent tutorial. I am a pensioner who worked in the medical device industry, where we worked with embedded SW systems. Huge difference but fun!
@azazali1785
@azazali1785 2 года назад
I'm just watching your flexbox video and you came up with Grid video. Thank you so much
@TraversyMedia
@TraversyMedia 2 года назад
Nice. I would suggest watching the flex video first and then this.
@robertmacwan8144
@robertmacwan8144 2 года назад
Thanks for this video, i was so much struggling to learn css grid but you make this so easy to understand.
@sumayaNoman
@sumayaNoman 2 года назад
Hi Brad, I can't thank you enough for these videos which you make. You are doing such a GREAT JOB by sharing your knowledge with us.Thank you soooooo much.
@christopherlopez2491
@christopherlopez2491 5 месяцев назад
I first followed your html tutorial a few years ago. I always refer you as being the OG of web dev and I am very grateful for you opening the door for me. Ive learned so much and am learning tons, thanks to you. I took a boot camp and really got a leg up thanks to your teachings. Hope you have a great weekend.
@jesseemana9598
@jesseemana9598 2 года назад
been seriously waiting on this, just diving into CSS and I loved how simplified your Flexbox crash course was and was looking to get into Grid next but other videos just weren't doing it for me until I found this, awesome
@bekhzodjamolov3682
@bekhzodjamolov3682 Год назад
This guy knows how to teach things properly and shows on actual examples what he taught. Thank you for the great video!
@atifkhankarachi6271
@atifkhankarachi6271 2 года назад
Just in time i actually slipped Grid while learning CSS and moved to JS after a few projects now I was reconsidering Grid literally few hours ago!! Thanks alot your React front to back is Golden
@manashbehera961
@manashbehera961 Год назад
thank you for explaining this in a very simple manner.
@jakeochukoidamatie723
@jakeochukoidamatie723 2 года назад
Thanks Brad for making this video, I have been running away from grid and using only Flexbox, but you just changed my mind, CSS grid is so powerful and easy. THANKS !!!
@MAli-o4r1j
@MAli-o4r1j Год назад
The way you explain grid i sure who watch it complete there will be no need to watch some other video on grid Just amazing Best wishes from Pakistan Just keep it up
@getoutoftheway419
@getoutoftheway419 7 месяцев назад
zindaa hona bhai. thoda sa phikr rakh khud pe
@jamesmassa1999
@jamesmassa1999 2 года назад
I've gone over this several times... this time it just clicked. Brad, not ever a waste of time watching your videos! Nice job as usual. 🙂
@Amar11115
@Amar11115 Год назад
every time i feel low and want to quit coding, I watch your videos. you teach concepts easily and most of the time you make me feel that I can learn to code, I just need to keep going. thanks man, thanks a bunch!😊
@MichaelSalo
@MichaelSalo 2 года назад
Good demo of grid. At 50:40 it seems like mobile-first CSS would be the clean solution.
@WW-zy9un
@WW-zy9un 2 года назад
From somehow who is old-school with the old way of tables & columnspan's , your videos help a lot, & maybe I won't throw all the prior knowledge away. I want to get back into it & this is sooooo much simpler. A new learning curve. Glad I ran across you.
@KeithHeilner
@KeithHeilner 9 месяцев назад
Old guy here(retired). I'm not looking for a job but I love programming. Thank you for your crash courses. I'm in the process of building a weather station and I want to collect weather data and display it(dynamically) on my web page. Your courses are helping me achieve something that I would not be embarrassed to put out there.
@discoRyne
@discoRyne 2 года назад
Grid and Flexbox is such a fun and powerful combo once mastered. The new (first time I'm seeing it) intro animation also looks great with the code editor in the background, good job there!
@Davidkiania
@Davidkiania 2 года назад
Brad this is awesome and I loved every moment of it. You make it really seem easy and will certainly put this tutorial into good use. Much appreciation from Kenya!
@awg-oc1nu
@awg-oc1nu Год назад
Thank you Brad to you and your company Traversy Media for getting this polished and easy to follow video up online. Me after 13 years of touching any code I have to update a product calculator. CSS Grid with @media, wow! You are correct the younger ones may not know how good they've got it :)
@Igor-ge1py
@Igor-ge1py Год назад
Getting back into front end development. Grid and flex is a game changer. I remember doing table layouts in dreamweaver when I first started and then floats. I got so good with floats that I get an urge to use them again but have to catch myself and use grid and flex since they are so much cleaner and powerful. No more hacks to align stuff 🤭
@upstatenyrider8413
@upstatenyrider8413 8 месяцев назад
Fantastic tutorial. I love you’re teaching style and the pace was spot on. This took my game up a notch in a sorely needed area.
@crimsonred0786
@crimsonred0786 2 года назад
This is incredible! I'm good with CSS in terms of knowing how to use Flex and Grid, but never knew how to actually make it look good on a webpage, thank you!
@vladimirtomic
@vladimirtomic 2 года назад
"I like to do things from start to finish and not just paste things in..." This is where you had my definite thumbs up. Thank you!
@dujanabaloch9479
@dujanabaloch9479 2 года назад
for media query ,i just used flex box and set flex-direction :column . Easy and Thank you Brad ,Credit goes to you
@drawdownwind6636
@drawdownwind6636 Год назад
I'm 9 months into web dev // This tutorial has been very enlightening and extremely helpful. Thank you!!
@keshavakumar9828
@keshavakumar9828 2 года назад
Thank you . I have learnt so much from watching your tutorials. I more skill added to resume.
@Racine14
@Racine14 2 года назад
Merci pour cette video qui est tres benefique pour nous. Je suis tres content de regarder celle-ci. Merci pour les explications qui sont bien detaillees.
@pw.70
@pw.70 2 года назад
This is the best CSS grid tutorial on RU-vid. Thanks for this.
@MrSickonebk
@MrSickonebk Год назад
my man I have learn so much with you! thank you... you don't know how much I appreciate your tutorials
@simply_the_dev7588
@simply_the_dev7588 2 года назад
How you use Grid is how I imagined it would be used for. Thanks for the refresher. I keep forgetting things and not writing them down. If I can visualize it like how you are setting it up I can remember it.
@shutomasi
@shutomasi Год назад
This is one of the first times I've genuinely preferred to learn over doing something else. Your tutorials are great. I've only been following them for about a week now and I have a better grip on HTML & CSS then I did from secondary school & college.
@rohandeshmukh3989
@rohandeshmukh3989 8 месяцев назад
Thank you!! One of the best tutorials i have seen on css grid .
@iancarr3923
@iancarr3923 Год назад
Excellent as usual. Appreciated the notion that the grid is useful for page layout and that flex (and grid) can then be use to organize elements within the grid area.
@ahmad-murery
@ahmad-murery 2 года назад
Nice, clean and quick video, regarding the media query, instead of resetting each card grid-column/grid-row and figuring out what are the correct numbers, we can simply set both properties to initial like this: .testimonials .card { grid-column: initial; grid-row: initial; } Thanks Brad,
@solomonhaile4502
@solomonhaile4502 Год назад
The way you organize the topics is awesome and I am into web development because of you making such informative content.
@king-manu2758
@king-manu2758 Год назад
The other day my senior dev refactored some of my flexbox code with css grid and I was so impressed that I thought, I need to dig deeper into this. By the way, yes, I learned to code with Brad and now I'm happily employed.
@geekstudio.
@geekstudio. 2 года назад
Its crazy how much ive learned over the years with Travis....I first started watching his html and css tutorials then I stopped watching....then I moved on to full stack,wordpress,and shopify development...
@codewithfarhad8594
@codewithfarhad8594 2 года назад
Hy Brad, Nice tut as always. jut want to add that having this in the media query also works: @media (max-width: 768px) { .testimonials { display: block; } .testimonials > * + * { margin-top: 2rem; } }
@ahonui
@ahonui 6 месяцев назад
Brad, I've dabbled with html since '97. I tables was fun @ 22:00. Grid reminds me of tables a lot.
@kaseycarr9130
@kaseycarr9130 6 месяцев назад
I've taken a couple of courses already and they all go deep in the specifics but I still wasn't getting it, but you really teach the same way I learn with practical use explanations that are just really simple and easy to understand, and I learned so many VS Code shortcuts just from watching you work. Thank you so much, I will be doing your other courses as well
@ashishtripathy2768
@ashishtripathy2768 Год назад
Just Wow.To The Point Content. Making Complex topics easy . Thanks
@arunkumar-ic8kl
@arunkumar-ic8kl 2 года назад
Thankyou for the free course. Really helped learning CSS GRID.
@ElementoryMyDearWatson
@ElementoryMyDearWatson Год назад
Terrific tutorial, clear concise and very easy to follow. Not an easy thing to pull off. Many thanks indeed.
@gngn2973
@gngn2973 2 года назад
I've literally came back to this video 5 times already. Thanks so much for this makes things a lot easier. I've come a long way with dev since taking your Mongo course lol.
@kathirmldata7411
@kathirmldata7411 2 года назад
❤ from south india.. I have learned so many frontend concepts . Because of you. Thanks a lot 🙏
@amieexxcauntie2671
@amieexxcauntie2671 2 года назад
I am your fans.... You are great in teaching... Briefly.. And very generous
@alanjerram9258
@alanjerram9258 2 года назад
A double thank you for the great instruction, from those learning to use grid and VS code at the same time. You are basically covering both. Your pace is quick, but that's why they invented the pause button!
@nivellen1168
@nivellen1168 2 года назад
I thank you this! Recently, I noticed how much I sucked at CSS and thought of CSS Grids as the first thing to learn.
@safwanmalik3139
@safwanmalik3139 2 года назад
Great video, I finally understand how to use CSS grid now. I recommend people who are going to watch this video to do the testimonials section all by yourself first and then watch the video to see how Brad does it so that you can see something you went wrong with or can improve on. Once again thanks Brad for another amazing video!
@safwanmalik3139
@safwanmalik3139 2 года назад
Also a tip for the testimonials section is that if you design mobile first, then it will be much simpler to design for larger screens as less media queries will be involved.
@idorenyinbenson1161
@idorenyinbenson1161 11 месяцев назад
Thank you for taking out time to help me with this vital piece of information.
@jadonsunshine9613
@jadonsunshine9613 2 года назад
this guy is really good this is a video you have to watch
@JayantBB78
@JayantBB78 2 года назад
Brad, I don't have words to thank you. You are really a great mentor for countless learners like me. You are awesome man. God bless you. Keep posting. Keep teaching. Love from INDIA. ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
@sepandarmoeeni9299
@sepandarmoeeni9299 Год назад
hey Brad, thanks alot for your hardwork and generous spirit.
@sirsanctified9380
@sirsanctified9380 Год назад
Great video, followed through till the end and the good thing is I really got something out of it
@dsofiap15
@dsofiap15 3 месяца назад
Thank you so much for your detailed tutorials. They're really helpful as a beginner, and make everything understandable.
@patrickb2668
@patrickb2668 2 года назад
Great Video! Just a quick tip: Instead of resetting each card with their respective numbers you could just do an overall reset, since the cards will span over 1 col / 1 row anyways. .card { grid-column: auto; grid-row: auto; }
@keldaniel234
@keldaniel234 Год назад
You are the best web dev I have seen so far, great work and you’ve also help so many beginner on this channel of yours thanks u traversy media
@jaegercrown964
@jaegercrown964 9 месяцев назад
A big thanks to you i was able to clarify the concept of flexbox and grid
@MsLotus9
@MsLotus9 Год назад
Excellent video! This was the first one I watched where I really understood Grid. Thank you so much :)
@certifiedmicronaut4901
@certifiedmicronaut4901 2 года назад
Thank you so much for this Brad! Sincerely, Self-teaching Front-End Developer (to be).
@DrAlghazali
@DrAlghazali 2 года назад
First time to fully understand css grid, Super!
@spelf
@spelf Год назад
Another fantastic video, I find your teaching style to be absolutely perfectly suited to how I like to learn. Thanks again 👍
@dileepbc5901
@dileepbc5901 Год назад
I always loved your teaching style your my goto for any JS framework, library, html css crashcourse etc..Thanks brad please keep doing what your doing love from india.
@DragonInTheWest
@DragonInTheWest 2 года назад
Thanks for all the detail and we'll explained tutorial
@NurioonSoftware
@NurioonSoftware Год назад
Great lesson. Thank you very much
@AverageComputerGeek
@AverageComputerGeek 2 года назад
This was an excellent lesson, very good pacing and explanations. I love that you showed the incorporation of Flexbox in the real world example. As a Flexbox fanboy, I do appreciate the ease of Grid and the additional layout css properties. I will have to go ahead and give it a go! Thank you!
@kopilkaiser8991
@kopilkaiser8991 2 месяца назад
Absolutely stunning tutorial. The tutor is well taught and has the skills to be able to teach the topic most effectively. I have learnt quite a lot. My deep appreciation for all your great effort and help in conveying your precious knowledge. 📖📓📚🧠. It is easy to learn but the most difficult to teach 😁
@amrismail7336
@amrismail7336 2 года назад
started learning front end couple months ago, we got an instructor that made us ocasionally use table layouts because "it'll help showing you how things progressed when we learn flexbox" ,,, and tbh he was right XD using tables was a big headache XD
@sanjeevsharma4819
@sanjeevsharma4819 2 года назад
Without watching whole video , you deserve my like . I know it will be great video
@geekstudio.
@geekstudio. 2 года назад
Will definately start watching Trav again as a supplement to my full stack studies...Currently doing node.js,python,php,and SQL!
@filipcruz7688
@filipcruz7688 2 года назад
Great tutorial. Clear, organized, and totally professional.
@jordynmuldrow3885
@jordynmuldrow3885 2 года назад
Thank you Brad for another amazing educational tutorial. This help me understand my css grid assignment so much better
@TheKtiekat
@TheKtiekat 2 года назад
That was super helpful. Better than most vids I've seen in explanation.
@lukramingo1496
@lukramingo1496 2 года назад
Great tutorial Brad, I learn a lot from your channel and now i survive coding journey from giving up way in last couple of years back.🏋‍♀
@npcconversation
@npcconversation 8 месяцев назад
You are the best teacher in the world ! no doubt !
@mohammadurgur953
@mohammadurgur953 Год назад
You mentioned that you like to do everything from start, not copy paste. That is only one of your strengths in teaching, and what makes your tutorials stand out. Thank you
@victorekea
@victorekea 2 года назад
I'm a testimony of Brad's awesome css grid courses. Thanks for sharing another awesome tutorial, Brad. ✨✨
@codingaustralia3748
@codingaustralia3748 2 года назад
Thanks again Brad. I'm preparing a plan to work with first nation youth keen on displaying their origins and this should be a manageable method.
@hgilbert
@hgilbert 2 года назад
I stopped doing websites for 6 years. Recently came back and was like: what??? ... Reading fast all entries on MDN CSS, but your flex & grid - crash course - helped me understand these concepts the most. JS and HTML5 changed a lot too. But am fine with those now (except Promises; which I don't need yet.).
@zakariahassan123
@zakariahassan123 2 года назад
coding along with brad always seems easy for me and my confidence level is way up. The problem starts when I code on my own and everything gets messed up. i dont know what to do man! if anyone of you is intresten in becoming my partner in web dev, your welcome. html, css and i started javscript now
@alfiartya23
@alfiartya23 2 года назад
Thank you so much Brad! this is what I need to understanding more about Grid Layout
@okwongvictor6215
@okwongvictor6215 2 года назад
Thanks Traversy Media. I learnt alot from this one
@misterrandompro6181
@misterrandompro6181 2 года назад
you explained things so clearly 🙂🙂 i mean you got almost 2 million subs so its pretty obvious but still i will say that your content is the best....
@tamasorvos8882
@tamasorvos8882 Год назад
Thank you, helpful tutorial!
@lordvexxie8175
@lordvexxie8175 2 года назад
Thanks for yet another awesome video Brad! Love the new look in the videos by the way ✨
@joshjakkrit6085
@joshjakkrit6085 Год назад
The last part for media queries: I think you can simply set the .testimonial to 1fr and the rest of the cards that were specified row/column, just set all of them to auto instead of specific numbers. ;)
@mdbicky9460
@mdbicky9460 2 года назад
watch the whole thanks brad for such an amazing video 😍💖
Далее
MySQL Crash Course | Learn SQL
1:11:35
Просмотров 472 тыс.
Flexbox Crash Course 2024
46:54
Просмотров 432 тыс.
Brilliant Budget-Friendly Tips for Car Painting!
00:28
Я ИДЕАЛЬНО ПОЮ
00:31
Просмотров 354 тыс.
Flexbox CSS In 20 Minutes
19:59
Просмотров 1,8 млн
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,6 млн
10 CSS Pro Tips - Code this, NOT that!
9:39
Просмотров 2,2 млн
Flexbox or grid - How to decide?
18:51
Просмотров 728 тыс.
Learn CSS Grid the easy way
37:04
Просмотров 911 тыс.
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 335 тыс.
The secret to mastering CSS layouts
17:11
Просмотров 282 тыс.
The Importance of Specialization in Coding
7:13
Просмотров 231 тыс.