No video

Learn Flexbox In 20 Minutes | Learn HTML & CSS | Flexbox Tutorial

  Рет қаралды 362,415

developedbyed

developedbyed

Күн бұрын

Check out my courses and become more creative!
developedbyed.com
Learn Flexbox In 20 Minutes | Learn HTML & CSS | Flexbox Tutorial
Today we are going to cover how to build modern responsive layouts using flexbox and all of its properties.
Going into 2019 flexbox will be the defacto way we build modern websites (also CSS grid). Since the browser support is above 95% and going up, I highly recommend you giving some time learning flexbox.
❤Become a patreon for exclusive videos and more!
/ dev_ed
Follow me on:
/ deved94

Пікірлер: 315
@mahmoudshayeb2286
@mahmoudshayeb2286 5 жыл бұрын
As a front-end developer your videos really helped me and I really wanna see more from you. Thanks ed
@amongdoomers9464
@amongdoomers9464 4 жыл бұрын
@@kamielbreyne7859 Take a look at traversy flex box in 20 min ,this is gold when compared to that.
@amongdoomers9464
@amongdoomers9464 4 жыл бұрын
@@kamielbreyne7859 I watched his tut before this and he didn't explained completely, but this guy nailed it
@kamielbreyne7859
@kamielbreyne7859 4 жыл бұрын
@@amongdoomers9464 yeah ikr
@fredoscott2346
@fredoscott2346 3 жыл бұрын
@@kamielbreyne7859 Brad Traversy WAS better, but now he's teaching too much at the same time. Makes it impossible to follow along. This video is way higher in educational quality for my sake.
@reisezone4574
@reisezone4574 2 жыл бұрын
@@kamielbreyne7859 dont advertise another channel on someone else channel, i
@developedbyed
@developedbyed 5 жыл бұрын
Happy holidays everyone! Excited for 2019!
@bikramchettri9405
@bikramchettri9405 5 жыл бұрын
Thanks.
@rajusam5
@rajusam5 5 жыл бұрын
Happy holidays ✌
@thedarkproject2786
@thedarkproject2786 4 жыл бұрын
Happy holidays , Excited for 2020
@ResolveX11
@ResolveX11 4 жыл бұрын
commenting in 2020, may the next year be better than this .
@underscorecheered
@underscorecheered 4 жыл бұрын
@@ResolveX11 true
@murat6018
@murat6018 3 жыл бұрын
By far, this is the best flexbox explanation I've seen! It doesn't go into unnecessary complications, explains everything very clearly, and most importantly, practical. Thank you for putting in the time and making this video!
@worldclasscode1847
@worldclasscode1847 2 жыл бұрын
Yes, a great video
@bambinoesu
@bambinoesu 4 күн бұрын
Definitely the best one I've come across
@newnam
@newnam 3 жыл бұрын
Watching this in Nov 2020 and still extremely useful! Keep up the great work!
@kaanergunlu7836
@kaanergunlu7836 3 жыл бұрын
Will last much longer than expected I believe so
@confuze1500
@confuze1500 3 жыл бұрын
still helpful
@worldclasscode1847
@worldclasscode1847 2 жыл бұрын
Watching this march 2022. Still Flexbox is top 3 CSS technology to know :)
@hazemgalal8562
@hazemgalal8562 5 жыл бұрын
actually you been one of my favorite tutorial resource in the web field in youtube . easy way to describe the idea ,good sound and style in showing the point,but bad keyboard skills loool.
@Geo-im7lb
@Geo-im7lb 5 жыл бұрын
thanks dude that was really useful and by the way you are such a nice person i can see it in your eyes may the most high bless you
@developedbyed
@developedbyed 5 жыл бұрын
Thank you so much for the lovely comment! I highly appreciate it.
@e.s.3904
@e.s.3904 Жыл бұрын
Hey Ed, here is Ed ^^ Your voice and your way to speak is so unbelievable calm and chill, its magic! Thank you so much for your superb content.
@filipusis21
@filipusis21 3 жыл бұрын
Thank you Ed for everything. You helped me alot with understanding and learning react and now with css fundamentals. Sooooo many tutorials are on the net, but u are really fun to watch and even more importantly easy to follow and understand.
@worldclasscode1847
@worldclasscode1847 2 жыл бұрын
Yes, a good video
@jimbo-dev
@jimbo-dev 5 жыл бұрын
Your tutorials are better in quality than most courses sold in Udemy! Your way of describing things is superior and it has helped a lot in my studies in computer science.
@VinodKumar-zx5lk
@VinodKumar-zx5lk 3 жыл бұрын
I wonder why would people dislike his videos.. Hey Ed your videos are not just one more course video, you are the only you-tuber who mixes teaching with fun. It is much entertaining and knowledgeable..
@Mathias-cq3zo
@Mathias-cq3zo 3 жыл бұрын
we all nerdy devs know very well that struggle when changing to a new keyboard. hahhaha cheers mate. Thanks for this tutorials!
@JordanT111596
@JordanT111596 3 жыл бұрын
You are by far the best coding teacher on KZfaq
@roachjuice5222
@roachjuice5222 2 жыл бұрын
I am more confident using Flexbox now, you are a great teacher!
@artful_dodger59
@artful_dodger59 3 жыл бұрын
I cannot express my thanks enough! This concisely and easily made clear what days of searching frustration couldn't! I'm beyond grateful.
@mohitranjan8876
@mohitranjan8876 4 жыл бұрын
Watching this video at the end of 2019😂. Wish I had found it earlier. Happy new year btw to you
@jornstaals2880
@jornstaals2880 4 жыл бұрын
Before the hell started
@itssankizboi1337
@itssankizboi1337 3 жыл бұрын
& I am watching this video at the end of 2020
@edgysphere
@edgysphere 3 жыл бұрын
Bad belated new year
@jamessantomaed5214
@jamessantomaed5214 4 жыл бұрын
It is 2020 and at an older age I need new skills, and I needed a teacher- not a presenter. You sir a true teacher. I hope by 2021 I know something to start my own shop. When your my age you have to, as no one wants us seniors. Thanks
@ResolveX11
@ResolveX11 4 жыл бұрын
Thank you very much for explaining in such a crisp and clear manner .I am confident now that I can work with flex-box in my web-sites.
@bhupeshpattanaik7150
@bhupeshpattanaik7150 3 жыл бұрын
Always smiling and laughing ..... Such a positive vibes from this channel 😌🕊️🏳️☮️😊
@72invocations
@72invocations Жыл бұрын
This is the best video to understand CSS flexbox!! thanks for sharing this!
@kjn5991
@kjn5991 5 жыл бұрын
umm.... at 15:30 The box "One" is not 2 times bigger than box "Two". The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. "One" box with "flex-grow : 2" will grow 2 times faster than "Two", not 2 times bigger.
@enricomoriggia615
@enricomoriggia615 4 жыл бұрын
stfu no one asked
@kjn5991
@kjn5991 4 жыл бұрын
@@enricomoriggia615 somehow 35 people gave this a like.
@senorzed6483
@senorzed6483 4 жыл бұрын
@@kjn5991 Yes I gave it a like too, but I'm pretty sure Dev Ed also knows this, but there was a language barrier and he simply left it to the viewers brain to comprehend what's happening
@kieran2347
@kieran2347 4 жыл бұрын
what do you mean - it will grow 2 times faster, doesnt make sense
@kjn5991
@kjn5991 4 жыл бұрын
@@kieran2347 It means that the box grows with 2 times faster rate, in other words, when you expand the screen view, the other box will grow faster than the other one.
@lollilolli4582
@lollilolli4582 3 жыл бұрын
I like your humor way of teaching which makes me awake ;)
@asokthegreat7781
@asokthegreat7781 2 жыл бұрын
thank you. This is the best explained video I've ever found on internet related to CSS,
@sriramadithya4799
@sriramadithya4799 3 жыл бұрын
Every css learning person should take this course.it's very very useful for me.I understand it completely in 2nd time
@ProSimples
@ProSimples 2 жыл бұрын
This is the channel that makes everything clear. Love it.
@niteshprajapat7918
@niteshprajapat7918 2 жыл бұрын
Thank you so much...... this helped me a lot... Before I was not able to image how things are work
@paulcharman8113
@paulcharman8113 2 жыл бұрын
Dev Ed, I've been playing with web site design now using Html and CSS but using some of the dreamweaver extensions provided by the Project 7 team. I really like what they do and have purchased quite a number of their extensions. After watching your initial free crash course in html and CSS I've no purchased the entire course as I was so impressed with how you explain how to combine html and CSS. I now understand a lot more of the coding that is supplied within the P7 CSS files and its given me the confidence to have a go at it myself and perhaps use fewer of the P7 extensions. Thankyou Paul - Uk
@ng3apis
@ng3apis 5 жыл бұрын
Btw is it possible to ask you show up us a whole webpage template using flexbox? And yes, thank you a lot for your tutorials
@mr.toastthat151
@mr.toastthat151 3 жыл бұрын
Great tutorial. I can finally say I understand Flex Box thanks to you.
@mdyousufislam5812
@mdyousufislam5812 3 жыл бұрын
Thank you so much. *Dev Ed* brother.
@webart5544
@webart5544 3 жыл бұрын
Great explanation dev . You cleared all my doubts .
@mahendranath2504
@mahendranath2504 3 жыл бұрын
today is the last date for 2020 and tomorrow is 2021 but still, useful :-), I have learned node express rest and now flex box, thank you for your help
@1809ines
@1809ines 3 жыл бұрын
The most important things in flexbox is to master or at least to remember the change between main axis and cross axis when changing flex direction
@karandesai
@karandesai 3 жыл бұрын
Thank you. Best tutorial so far on YT! You're the best! Love!!
@gavinputterill8175
@gavinputterill8175 3 жыл бұрын
The most useful thing to know and understand in CSS. Thank you!
@saidrakhaoui3786
@saidrakhaoui3786 3 жыл бұрын
The best tutorial about flexbox, good job
@Peywan
@Peywan 9 ай бұрын
great video and love your way of explaining , thanks :)
@quickphantom9496
@quickphantom9496 3 жыл бұрын
I didn't even knew what Flexbox was. So suddenly this video pops up, and I was like "hmm, Flexbox..eh? Sounds important!..Let's see!" xD btw, Thanks a lot this video, Explained wonderfully!
@jarkkosaijem4795
@jarkkosaijem4795 4 жыл бұрын
God Bless you Ed.. Thank you for this beautiful tutorial.. YOu are a Amazing.
@isolatedspace9317
@isolatedspace9317 3 жыл бұрын
Amazingly clear and fun. Thankyou,
@HCoRE8
@HCoRE8 3 жыл бұрын
Man talk about a coincidence but the previous video I just watched from TechsquidTV had the same background music and it was also about flex box. So when the previous video ended autplay played this video and it was like a transition to this one. Anyways, nice video!
@animatiuspannaperis800
@animatiuspannaperis800 4 жыл бұрын
Excellent video to understand all these easily ... Thanks Ed!
@micoferdinand
@micoferdinand 4 жыл бұрын
I want to see more of your great content Dev Ed! awesome tutorials man! 👨🏻‍💻💯✔
@dark9y8
@dark9y8 3 жыл бұрын
Happy New Year, Love from India
@Paradisogg
@Paradisogg 5 жыл бұрын
Thank you. Your tutorial videos are more better than the documentation.
@wajahatiqbal4242
@wajahatiqbal4242 3 жыл бұрын
such an amazing developer and teacher. Appreciate your efforts
@lamthaotran19
@lamthaotran19 2 жыл бұрын
Not sure if a tutorial video or a physical comedy showcase. I lol'd hard!!!
@fortin75
@fortin75 4 жыл бұрын
Ed you are fantastic your videos are precise and to the point.
@yoshithakuntumalla7614
@yoshithakuntumalla7614 3 жыл бұрын
simple understanding tutorial. Watching this video at the end of 2020.😅 Your tutorials are amazing. Thanks, DEV. Advance HAPPY SAFE NEW YEAR 2021. 😊
@nikolaprogramer33
@nikolaprogramer33 3 жыл бұрын
bro u are king with ur keyboard :D
@bragiodinsen4604
@bragiodinsen4604 3 жыл бұрын
17:00 flex default is : flex: 0 1 auto; just so newbies dont get confused. grow is off, shrink is 1
@FFergussond
@FFergussond 3 жыл бұрын
Bro your videos are gold !
@WitoonThreamthakanpon
@WitoonThreamthakanpon 4 жыл бұрын
Your teaching is so clearly. Thk so much.
@javadmh7827
@javadmh7827 4 жыл бұрын
Thank you man, i learn many thing with you
@benahmedemir
@benahmedemir 4 жыл бұрын
"we're just gonna do our children now" 😂😂🤣
@Jishan007
@Jishan007 4 жыл бұрын
Now my children are very responsive 🤣
@minstreet_studio6265
@minstreet_studio6265 4 жыл бұрын
@@Jishan007 😂😂😂
@harveyspector1463
@harveyspector1463 3 жыл бұрын
yes officer this man here
@akashgawande7448
@akashgawande7448 3 жыл бұрын
12:25
@pokszymon
@pokszymon 3 жыл бұрын
@@neildominic7967 Dunno if anyone gives a shit but this seems to be a pretty bad advertisement.
@sanjibdey01
@sanjibdey01 3 жыл бұрын
13:49 "orphans". OH BOY !! 😂 Btw the tutorial was such a breeze. Thanks, mate !!!
@marcelotrader3105
@marcelotrader3105 3 жыл бұрын
"without changing anything in HIT-tml ... " amazing
@alirezaafshar6528
@alirezaafshar6528 4 жыл бұрын
very helpfull! thank you so much dev
@hamzaanis2321
@hamzaanis2321 4 жыл бұрын
Best Flexbox Lecture Ever
@consoledoterror971
@consoledoterror971 4 жыл бұрын
Thanks Ed EDIT: Once again THANKS A LOT MY GORGEOUS FRIEND
@talkshowwithpaulosama
@talkshowwithpaulosama 4 жыл бұрын
Thank You this gave me much clarity on flexboslx
@senorzed6483
@senorzed6483 4 жыл бұрын
13:48 I love how he laughs when he sees orphans XD I died lmao
@janschneider12
@janschneider12 3 жыл бұрын
Great video! whish I found this one 2 years ago.
@SHAJ3304
@SHAJ3304 4 жыл бұрын
Thanks so much! This was really useful!
@adithyaajay1097
@adithyaajay1097 4 жыл бұрын
The way you talk makes css more interesting
@Rivederchee
@Rivederchee 3 жыл бұрын
this is golden my man
@usmansabir5295
@usmansabir5295 4 жыл бұрын
Today. I really understand the meaning of, "All superheroes don't wear capes".
@AinYuChannel
@AinYuChannel 3 жыл бұрын
love watching your tutorials
@Itz_Anim_Hub
@Itz_Anim_Hub 4 жыл бұрын
Thanks now it is clear for me 👍
@ahmedelmawrdy4381
@ahmedelmawrdy4381 4 жыл бұрын
Thanks! keep it up , smiling .
@SinanZen1981
@SinanZen1981 3 жыл бұрын
really well explained thank you
@erfankhodaee4864
@erfankhodaee4864 4 жыл бұрын
actually the default for align items is not flex-start and its stretch and the reason in your code it shows like that is because you are using a px for your children's height and width but if you use percentage or viewpoint, flex-start for align-items will remove the extra space for any child.
@ziaurrahman4890
@ziaurrahman4890 4 жыл бұрын
Great Tutorial Bro.....Love from India :)
@mrg3921
@mrg3921 4 жыл бұрын
As always, great explanation and great tutorial!
@nobita7933
@nobita7933 5 жыл бұрын
Hey... Thank you so much ...love from india... 🙋
@arx2796
@arx2796 4 жыл бұрын
@@hkktr F
@dataflexlink
@dataflexlink 3 жыл бұрын
Wonderfully done.
@medilies
@medilies 4 жыл бұрын
Best flexbox tuts on youtube
@erickbriceno9108
@erickbriceno9108 4 жыл бұрын
Never before was that easy! Thanks
@sidikidiaby56
@sidikidiaby56 3 жыл бұрын
Thank you so much this help a lot
@chawukohilda1036
@chawukohilda1036 2 жыл бұрын
I enjoy your videos. Thank you ❤️❤️❤️
@CaioTeixeira19951
@CaioTeixeira19951 5 жыл бұрын
Ed, greetings from Brazil. I want to thank you, i learned Flex Box Very easy with your vídeo. Keep going man!!
@gokulacreiro3333
@gokulacreiro3333 5 жыл бұрын
that's it Caio Baianor
@bharathv499
@bharathv499 4 жыл бұрын
Wonderful video, thanks
@barathsingh5584
@barathsingh5584 3 жыл бұрын
Please could you explain how to control the text position within the boxes? I enjoy your video and would like to say thank you for your great work.
@Ginfio
@Ginfio 4 жыл бұрын
*Use your children to learn flex box.* that’s how you learn.
@krishnakantkushwaha9084
@krishnakantkushwaha9084 4 жыл бұрын
good away of explaining and easy to understand thanks so much sir
@SanishkaJayasena
@SanishkaJayasena 4 жыл бұрын
Thank you for this video! Saved me tons of time :)
@Kodegems
@Kodegems 3 жыл бұрын
Nice way of teaching. Thank you!
@saikrishnakalangi6231
@saikrishnakalangi6231 3 жыл бұрын
Good job sir
@georgemugambi7175
@georgemugambi7175 3 жыл бұрын
When you apply the flex-wrap:wrap to the parent and reduce screen size at 8:53, why does 'child 4' skip the 2nd row and go the 3rd row? is it due to the total available space in the container?
@dpffpself
@dpffpself 5 жыл бұрын
i love all your vids... thank you!!!
@jacquesgoudreau7594
@jacquesgoudreau7594 3 жыл бұрын
Excellent, thanks!
@aks897
@aks897 3 жыл бұрын
You videos are amazing 👍👍👍
@WillyBoy75
@WillyBoy75 3 жыл бұрын
Now I got it clear! Pura vida!
@rameshkumararumugam9947
@rameshkumararumugam9947 4 жыл бұрын
Simple and Good.
@pratikthorat3480
@pratikthorat3480 4 жыл бұрын
Content flows Horizontally : Main Axis Content flows Vertically : Cross Axis. Am I correct ? If so i understand Flexbox. Thank you Edwin :))))))))))))))))))))))))))))))))))))))))
@gdd9866
@gdd9866 3 жыл бұрын
You're the god - Happy 2021 XD
@patrickbateman7665
@patrickbateman7665 4 жыл бұрын
Very Neat Explanation
@originunknown4273
@originunknown4273 3 жыл бұрын
This was helpful. thanks
@niloben659
@niloben659 2 жыл бұрын
Great video, thanks.
@ershadebrahimi
@ershadebrahimi 3 жыл бұрын
Thanks a lot, it was very helpful.
@danielahermosillo8991
@danielahermosillo8991 3 жыл бұрын
Good explanation, thank you!
Learn Sass In 20 Minutes | Sass Crash Course
19:42
developedbyed
Рет қаралды 932 М.
CSS Flexbox Tutorial - Learn the right way
35:41
FollowAndrew
Рет қаралды 6 М.
Can This Bubble Save My Life? 😱
00:55
Topper Guild
Рет қаралды 84 МЛН
Мы сделали гигантские сухарики!  #большаяеда
00:44
Пройди игру и получи 5 чупа-чупсов (2024)
00:49
Екатерина Ковалева
Рет қаралды 4,1 МЛН
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 944 М.
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Рет қаралды 1,5 МЛН
Learn CSS Displays in 12 Minutes | Grid, Flexbox, Inline Block, Block
12:15
Flexbox Tutorial (CSS): Real Layout Examples
28:46
LearnWebCode
Рет қаралды 1 МЛН
CSS Grid Tutorial | CSS Grid Crash Course
29:01
developedbyed
Рет қаралды 553 М.
10 CSS Pro Tips - Code this, NOT that!
9:39
Fireship
Рет қаралды 2,2 МЛН
Learn Every CSS Selector In 20 Minutes
19:38
Web Dev Simplified
Рет қаралды 447 М.
Are You Making These CSS Height Mistakes?
8:54
Web Dev Simplified
Рет қаралды 128 М.
Avoid These 5 Awful CSS Mistakes
20:42
Kevin Powell
Рет қаралды 192 М.
Flexbox CSS In 20 Minutes
19:59
Traversy Media
Рет қаралды 1,8 МЛН
Can This Bubble Save My Life? 😱
00:55
Topper Guild
Рет қаралды 84 МЛН