Тёмный

Flexbox CSS In 20 Minutes 

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

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

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 1 тыс.   
@TraversyMedia
@TraversyMedia 2 года назад
New 2022 Flexbox Crash Course - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3YW65K6LcIA.html
@joemoussally2927
@joemoussally2927 2 года назад
Just in time! lol... thanks for your vids
@danieleduardoperezrossi2767
@danieleduardoperezrossi2767 2 года назад
Thanks for the heads up!
@fabspark1631
@fabspark1631 2 года назад
update the new vdos in the playlist itself🥺🥺
@computerhoofd
@computerhoofd 4 года назад
Narrators in a lot of other videos sound too enthusiastic for my taste. That's why I love the way this guy explains things. He sounds so bored, and I love it. So soothing.
@sebastianbriones5413
@sebastianbriones5413 3 года назад
He's got a life aside from coding, he doesn't live with cats like some other devs.
@Jester2b04
@Jester2b04 3 года назад
Yea I agree. I like the matter-of-fact way of talking from him, because he sounds like he's done it for so long and seen so much that he sounds chill, calm, and collected; something you get from years of experience.
@ObieR
@ObieR 3 года назад
You’re right i love it
@exspider64
@exspider64 3 года назад
I feel like I'm back in school
@yvestrung7387
@yvestrung7387 3 года назад
I can't realize it before. There's more space for me to listen to what he said, not his emotion
@JustPerfectDesigns
@JustPerfectDesigns 3 года назад
This was recorded 4years ago and it still helped solve all my problems with flex box. You’re awesome T 💪
@spaghetticode3107
@spaghetticode3107 6 лет назад
"Thay may be very well be the only thing you want to do, and that's fine." Iove that one line so much
@yupkeetoki
@yupkeetoki Год назад
I really like the way you explain each flex property. In other videos, they just go through things so quickly that I find myself lost most of the time. Thanks for showing examples of how each of the properties function!
@bikkikumarsha
@bikkikumarsha 5 лет назад
With 2x speed learn Flexbox in 10 minutes
@VivekRai05
@VivekRai05 5 лет назад
1.5x is the sweet spot
@EnglishLaw
@EnglishLaw 5 лет назад
I managed 2x - good idea!
@zay5872
@zay5872 5 лет назад
thanks bro
@superpotato787
@superpotato787 4 года назад
I knew It before it was developed. You still aside
@ralpha112
@ralpha112 4 года назад
life hack.
@liamc545
@liamc545 2 года назад
Find myself having to use a variety of different explanation sources to get my head around new concepts as I learn, this has solved my issues with Flexbox, thanks
@aseemlalfakawma5084
@aseemlalfakawma5084 7 лет назад
Really informative, can't believe how easy it is to make column layouts now.
@seemakanwal2607
@seemakanwal2607 3 года назад
You demonstrated it nicely with little examples first and then added it in the main code. I understood it without a problem. Thanks.
@00el04
@00el04 4 года назад
i always go back to this video for a refresher :)
@emmanuellucius95
@emmanuellucius95 4 года назад
Been following up on some of your courses lately and... I hardly leave comments but, I've got to say "YOU TEACH SUPER WELL" thanks for the support man! Really enjoy taking your courses
@adamtak3128
@adamtak3128 7 лет назад
Nice! I'd like to make a request if it's not too much to ask. Could you do a tutorial on creating a website for a fictional client? I would love to see what the process is like. Frontend, and Backend with node.js?
@JamesQQuick
@JamesQQuick 7 лет назад
That's a great idea. Would love to see that as well!
@moca3417
@moca3417 7 лет назад
Would be very nice...although it would be a lot of work I guess. Anyways cool that he shares his knowledge ;)
@stunningmesh6263
@stunningmesh6263 6 лет назад
good idea
@nedu7971
@nedu7971 6 лет назад
Thats what I would really love too see!!!
@dereckportela1298
@dereckportela1298 6 лет назад
Up
@philly_Will
@philly_Will 5 лет назад
Thanks again - Another great tutorial - I typed out the code with explaining comments as I watched. That's the only way I can thoroughly absorb and understand it. 3 weeks ago I knew nothing about html or css - after your short tutorials I am creating a professional website for our Knights of Columbus Council - THANK YOU!
@andylib
@andylib 5 лет назад
17:35 - wasn't expecting that 😂
@lyesbeyoud
@lyesbeyoud 5 лет назад
i have a f*** what is it six boxes ........ he meant to say five 😂
@zippytyro
@zippytyro 4 года назад
Your ears passed the test.
@VictorBalaguera
@VictorBalaguera 4 года назад
language!
@igorscream
@igorscream 4 года назад
Yeah. Laughing too. You're like serious and explaining flexbox to lammers and then you're just "fuck..what is it?" hhahaha
@gilly5809
@gilly5809 4 года назад
i actually went back when i heard this and was like.. uhh did he just say fuck? lol
@Free_Bird78
@Free_Bird78 2 года назад
this is what a learner wants --> no unnecessary excitements and no 'try hard' to make audience watch the video giving heavy expectations. Excellent work😀
@hirbodkhatami9906
@hirbodkhatami9906 4 года назад
TIP: align-items is for laying items along cross axis and justify-content is for laying items along main axis.
@hiiamantonio
@hiiamantonio 3 года назад
Thanks, bro!
@jackyeelo3705
@jackyeelo3705 3 года назад
Great
@prakashreddy438
@prakashreddy438 3 года назад
Thanks for hack
@thatoneuser8600
@thatoneuser8600 2 года назад
No bruh, justify-items does that
@japhethachimba174
@japhethachimba174 2 года назад
what is main axis and cross axis
@TanyaGor22
@TanyaGor22 4 года назад
Really like the way you explain, Brad! Giving details in an understandable manner showing both the code and the result, but also not dragging on for too long repeating obvious things. Thank you!
@kieran2347
@kieran2347 4 года назад
Thanks Brad. Your tutorials look easy compared to others. It's just hard to remember all of it, especially when you just start learning alongside JS
@matthewr6940
@matthewr6940 3 года назад
Thank you. Creating these videos and taking the time to help has made a tremendous impact on my developing career.
@sumanbanerjee4756
@sumanbanerjee4756 7 лет назад
Wow flex is such an easy solution to complex CSSing! Thanks for creating this awesome tutorial :)
@glimpseoflifebd
@glimpseoflifebd 4 года назад
Very helpful specially for those who wanna start css and getting too many problems while trying to give a perfect position of elements. Thanks Brad.
@TheUofastudent
@TheUofastudent 4 года назад
Man I don’t think I can ever pay you back for all the help you have give... I am truly great full ... thank you !!!!
@susanrose9056
@susanrose9056 7 лет назад
I find flexbos so incredibly confusing by other instructors. Thanks once again Brad for making this straightforward and easy to understand!
@jeremy_s
@jeremy_s 7 лет назад
Wow. Why I have not used this before...
@serpent465
@serpent465 7 лет назад
exactly my thoughts!
@luzaw4957
@luzaw4957 6 лет назад
CSS grid is amazing it can do more than flex
@goodester6924
@goodester6924 5 лет назад
@Calin Belut that is why browser prefix is a thing
@graczmisiek4131
@graczmisiek4131 5 лет назад
@@goodester6924 was not enough for IE back in the day. It was easier to use "good" old floats which were at least "consistent"
@namisanws2340
@namisanws2340 5 лет назад
Flexbox is god
@ranjanadissanayaka5390
@ranjanadissanayaka5390 2 года назад
excellent course...been stuck with flex boxes but now I'm starting to get the hang of it.
@manehclovis9956
@manehclovis9956 6 лет назад
When you know how difficult it is to fine a good tutorial then you must like this guy .
@josephgarza5973
@josephgarza5973 2 года назад
Thank you for the quick crash course video. I thought it was rather helpful to be honest and I appreciate you taking your time to make it. Well done, Sir!
@habib077
@habib077 4 года назад
Tuesday 21st April 2020 Learning Class: Flexbox CSS In 20 Minutes Thank you Brad Traversy.
@chethankambi31
@chethankambi31 5 лет назад
Probably one of those rare guys who says... "go ahead and dislike if you did not like the video". Brad you so genuine and we love it!!! Keep doing what you do and please continue your good work :)
@steve_matin
@steve_matin 4 года назад
Just took a Udemy course that didn't explain flexboxes -- you sir are a hero.
@cohenschellenberg3325
@cohenschellenberg3325 3 года назад
lmao same, not like we payed for it or anything
@Methgaard
@Methgaard 7 лет назад
Great tutorial, I'm convinced to leave Bootstrap behind and use Flexbox!
@SVJY15
@SVJY15 6 лет назад
LOL good idea !!
@jefjef418
@jefjef418 5 лет назад
now bootstrap 4 uses flexbox, there is no scape.
@codethebeast975
@codethebeast975 5 лет назад
You will definitely kick off the bootstrap from your computer if you ever watch one video on css grid this thing is savage man.
@Codificando
@Codificando 5 лет назад
If you just use the bootstrap Grid System it's better. But, in my case for example, I like the way bootstrap 4 looks, so I use it in my web systems.
@ChristopherCorvo
@ChristopherCorvo 4 года назад
This was extremely helpful. I think it was one of the better videos I've seen on the subject. Really appreciate you taking the time to make this video.
@mikacar8905
@mikacar8905 7 лет назад
Bravo. Easy and clear tutorial. Just what I need.
@susilaraju8993
@susilaraju8993 5 лет назад
Mikacar890
@jackashii2588
@jackashii2588 3 года назад
The one guy who says: give a dislike if you don't like it He already knows that there will be at least someone who like it and find it useful Thanks a lot Brad
@CodingPhase
@CodingPhase 7 лет назад
thank u need it this
@michaelarcher2496
@michaelarcher2496 6 лет назад
Lol u have a channel teaching people but didn't know how to do this 9 months ago, priceless
@FirstLast-rm7mb
@FirstLast-rm7mb 6 лет назад
@CodingPhake, You need to learn english.
@Ndzzle
@Ndzzle 5 лет назад
Oh I guess everyone should have everything they learn memorized. If not then you must be a fake developer. Or is this just a really nice, quick tutorial for anyone to refresh upon? Get off his nuts
@harshilgarg846
@harshilgarg846 3 года назад
Thank you sooooooooooooooooo much for this tutorial. I've been struggling for FlexBox for a long time, and then I finally took some time to search up some basic tutorials, and your video cleared up so much for me.
@ITentrepreneur
@ITentrepreneur 4 года назад
I've learned CSS Grid before Flexbox and this makes me learn Flexboxes faster because it is much easier to understand now.
@mccama19
@mccama19 5 лет назад
Thank you so much! This really helped me to visualize how flex box works. The text book I'm using to learn web dev had us apply flex box as one of the last steps in creating a website. It seems like it would be much easier to apply flex box at the beginning and add in the content of the website after all the boxes are properly arranged. Should flex box be applied at the beginning or end of a project?
@humblebumblebee5017
@humblebumblebee5017 3 года назад
Thank you! Flexbox is a game changer and a big concept to wrap your head around, this really helped me.
@KoDesign0
@KoDesign0 5 лет назад
Sweet tutorial man! Cleared up a lot of shit for me. My teacher was outdated apparently.
@thatmarinescienceguy
@thatmarinescienceguy Год назад
This truly is a useful tutorial. So many youtube videos A) do not explain and B) they just show you how to build 'this exact' website.. etc... Traversy Media explains and teaches, that's cool! {Thank you!} I'll be watching more of your videos for sure, like the one you pinned below - the '22 Crash Course. Thank you again!
@AntinutellasFC
@AntinutellasFC 2 года назад
this Dude Genius Traversy changed my life. I always wanted learn HTML and CSS I always noticed that all other guys are more looking for ranking their videos and get some ads to make money with views, likes and other BSs. in this case here, This Guy is calm, clear, nice voice intonation, a fantastic pace for beginners and a superb knowledge about what he presents. I appreciate your time my friend.
@ДмитрийВалентинович-р7и
Thank you sp much! Its very simple but i hought it was harder :)
@romko-romario
@romko-romario 3 года назад
The best tutorial on flexbox I've ever seen! Also, there's another great video about grid on this channel.
@КалинаВ0505
@КалинаВ0505 2 года назад
You have a talent for explaining things. Love the organized way you explain everything! Rarely have I watched a tutorial with such quality.
@Dimlutube
@Dimlutube 5 лет назад
This made more sense than any other tutorial I've watched on flexbox. You really are an amazing instructor Brad.
@milad8436
@milad8436 5 лет назад
your channel and your videos are awesome. Now I am learning how css works. I am planning on my front end dev according to your videos
@christyguy59
@christyguy59 7 лет назад
Thank you, man! I think I'll soon owe my career to you.
@Igerster80
@Igerster80 4 года назад
Just learning html and css. This seems so much better and I’ll definitely be using his method
@TalhaZahid
@TalhaZahid 7 лет назад
Really really helpful video.. thanks ... your new subscriber from pakistan :)
@tuby1502
@tuby1502 3 года назад
By far the most clear explanation of flex. For me, that is.
@LexRexLibertarian
@LexRexLibertarian 3 года назад
this was very helpful! More and more people are migrating from youtube to odysee for more control of their content and more consistent payment, i'd love to be able to watch your videos there!
@mohitdas5292
@mohitdas5292 5 лет назад
Best video on flexbox...😎
@susilaraju8993
@susilaraju8993 5 лет назад
Mohit Goodwin I
@mohitdas5292
@mohitdas5292 5 лет назад
@@susilaraju8993 yes
@worldclasscode1847
@worldclasscode1847 2 года назад
Nice vid! I love Flexbox. It's so useful. I use it on each and every web page, multiple times.
@selfsage1
@selfsage1 7 лет назад
thank you for the tutorial..
@vidicanrazvan7398
@vidicanrazvan7398 3 года назад
Amazing explanation. I am doing a course in parallel...had to resort to this video...splendid explanation. Thank you for the value provided.
@ilayali_
@ilayali_ 3 года назад
You are the best teacher for this!! I've been racking my brain to figure this out and then I found your channel! Thank you so much!!!
@kidando
@kidando 7 лет назад
Mind blown... How have we bee developing sites and apps without flexbox?
@manavkalra5279
@manavkalra5279 7 лет назад
With css grid
@imanqoly
@imanqoly 4 года назад
I'm 3 years follower of your great videos... Thanks
@nevinkuser9892
@nevinkuser9892 4 года назад
"Alright, so what the hell is flexbox?" 😂😂😂
@srinicnu5283
@srinicnu5283 3 года назад
didn't you see the video man!!
@subhamagarwal1665
@subhamagarwal1665 3 года назад
@@srinicnu5283 dude @nevin kuser was just quoting what he said at 0:46
@80Vikram
@80Vikram 4 года назад
Great video, thanks a ton for your awesome efforts. Somebody who is new to web development like me; I suggest first finish "CSS Flexbox" from FCC "Responsive Web Design Certification (300 hours)". Later refer to this.
@andersonlazochavez8838
@andersonlazochavez8838 6 лет назад
Wow. The way you explain the tutorial is amazing. I'm watching like 8 videos from you and I'm learning so much more than my clases. Hope to get more videos for fullstack. Greetings from Perú.
@МиколаУкроповичь
very useful thanks
@elrubio8091
@elrubio8091 5 лет назад
Wow!!! just got to understand the Flexbox better and in more depth than i had learn before in another website. thanks
@zetagundam20x
@zetagundam20x 4 года назад
You and Net Ninja are my favorite Web Dev channels...keep fighting the good fight Brad! Awesome tutorial!!
@muhammadablugg3723
@muhammadablugg3723 5 лет назад
but can it *W O R K U N D E R W A T E R ?*
@hasanabir115
@hasanabir115 5 лет назад
I just sawed this container into half and fixed with FLEX TAP- BOX!
@aegisgfx
@aegisgfx 5 лет назад
And can it run Crysis??
@bpdobson8660
@bpdobson8660 5 лет назад
Only on Fridays
@soufianeodf5386
@soufianeodf5386 5 лет назад
your way of explaning is really unbelievable...i feel like i'm doped while i'm watching you
@susilaraju8993
@susilaraju8993 5 лет назад
Soufiane Odf
@marcelo25758
@marcelo25758 3 года назад
Thank you so much! I was struggling a lot to understand the whole parent child relationship of Flex but not anymore! :D
@nerissataylor
@nerissataylor 5 лет назад
Thank you made it finally click after two weeks of staring at css tricks flexbox and playing flexbox froggy and tons of notes. Just had my breakthrough @7:25 into your video. Im sorry had to tell somebody thanks again !God Bless u!! Love ya
@TechnicallyData
@TechnicallyData 5 лет назад
17:36 Who else heard what I heard?
@v3r0nica101
@v3r0nica101 5 лет назад
"5, what is it? 6 boxes in here..?"
@kolyxix
@kolyxix 5 лет назад
I am going though my free-code camp project (web design), and I just came across your video at the right time. This is extremely helpful.
@exeedit9105
@exeedit9105 5 лет назад
*Hey i just created a professional website with wix*
@namisanws2340
@namisanws2340 5 лет назад
Fuckk youu
@notanarutard6951
@notanarutard6951 4 года назад
AHAHAHAHAHA
@eminm6383
@eminm6383 6 лет назад
Perfect explanation for beginners. Please keep going teaching stuff like that for beginners.
@JimmysJunk
@JimmysJunk 2 года назад
Excellent use of 20 minutes of my time! Thank you!
@MayankTiwari24
@MayankTiwari24 4 года назад
Awesome tutorial, I have been using flex indirectly with bootstrap and oxygen but now i finally understand it for what it is. Thanks a lot.
@hailedagmawi8109
@hailedagmawi8109 Год назад
everytime I forget flex i come here. probably my 3rd or 4th time. todays occation was... studying bootstrap flex so i need to refresh my flex before going to bootstrap. as always thank you
@spef7396
@spef7396 3 года назад
I know this is an old video but thank you. You do a really good job of explaining everything. unlike some other tutorials I appreciate that we can see you html, styles and end product all at the same time. Makes it very easy to take in. Good job!
@tapfumamanhanga
@tapfumamanhanga 2 года назад
This was quite useful. I believe the newer video is even better. Will definitely check it out.
@milad8436
@milad8436 3 года назад
short, simple and useful. Thank you
@sirnatanielson
@sirnatanielson 7 лет назад
I was reading some documentation on flex and it wasn't making much sense. This helped visualize some of it. I'll be checking out your new Flex video soon too. Thanks!
@simonkalu
@simonkalu 7 лет назад
Very easy and clear to grasp. Thanks Traversy Media for this one.
@giftsonjohn6289
@giftsonjohn6289 6 лет назад
Great video this the first time i can able to understand flexbox clearly thanks a lot
@OrincyWhyteDesigns
@OrincyWhyteDesigns 2 года назад
Usually my brain is confused. Great video. Gonna go practice ! Thank you
@MarkusEicher70
@MarkusEicher70 2 года назад
Thanks a lot! May be not the newest video, but nails it. Short and crisp.
@renatamelo6590
@renatamelo6590 2 года назад
Brad, you're absolutely THE BEST!
@yukapikin.3249
@yukapikin.3249 5 лет назад
you can make anyone a good student, I salute you Mr.Traversy
@BlakeT87
@BlakeT87 2 года назад
Thank you for the tutorial. I’m new to programming and still learning the basics of CSS. This is really helpful!
@viallymboma9874
@viallymboma9874 4 года назад
My day by day success is closely related to the hard work you put out there to help me and many others like me....thank you a bunch Mr Traversy media...wish I could get in touch with u
@BobbyBundlez
@BobbyBundlez 4 года назад
that feeling when you forget the most basic shit cuz u have been heavy with javascript, material ui, and react lately.... and THEN you find another UNREAL traversy media video to help u quickly brush up.. learning code can be so funny sometimes. over a year coding now and completely forgot flexbox from juggling so much new material lol.... luckily it comes back easier ever time
@raviveer2007
@raviveer2007 3 года назад
I am really appreciated with examples provided by you . Thanks so much
@josema-boy7610
@josema-boy7610 5 лет назад
Simple, quick, and effective. Thank you very much for the info. Now time to practice it. Cheers mate!
@aliulanowar7802
@aliulanowar7802 4 года назад
Thanks a lot sir, really, you provide for us something excellent which helps us lot much. Again thanks with hope for your healthy and long life .
@SleekCollins
@SleekCollins 7 лет назад
Oh shoot! I've been ignoring Flexbox for long when it could have been ideal for so many things. Silly me! Thanks, as always, Brad.
@24306529
@24306529 3 года назад
this is me today- 4years later than you
@Bobo011
@Bobo011 4 года назад
Thank you very much for the video, i recently bough a course online and it didn't have this and my friend who works as a front-end, told me i needed to study this.
@henriquemoreira978
@henriquemoreira978 4 года назад
Straight to the point, thanks bro!
@hughclarke8504
@hughclarke8504 2 года назад
Just fantastic. I really appreciate your teaching and helping. Thank you.
@Ahm3dAshour
@Ahm3dAshour 4 года назад
The sound of keyboard is awesome ❤
@junkyard2758
@junkyard2758 4 года назад
hi brad. Can you use css grid and flexbox in the same page or each of them for the layout?
@baldmike
@baldmike 7 лет назад
Absolutely perfect Flexbox tutorial, thank you.
@Pokemonman44441
@Pokemonman44441 5 лет назад
You really helped me understand the way the boxes float on HTML! Thank you so much!
@Morquioo
@Morquioo 2 года назад
it's not float!!!!
Далее
Flexbox Crash Course 2024
46:54
Просмотров 432 тыс.
CSS Grid Layout Crash Course
27:55
Просмотров 2 млн
Qalpoq - Amakivachcha (hajviy ko'rsatuv)
41:44
Просмотров 90 тыс.
Learn flexbox the easy way
34:04
Просмотров 710 тыс.
Build An HTML5 Website With A Responsive Layout
1:01:15
CSS Grid Crash Course
53:45
Просмотров 320 тыс.
HTML Crash Course For Absolute Beginners
1:00:42
Просмотров 7 млн
How to take control of Flexbox
16:01
Просмотров 135 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 961 тыс.
Learn Flexbox in 15 Minutes
15:12
Просмотров 1,2 млн