Learn CSS Flexbox in 20 Minutes (Course)

Поделиться
HTML-код
  • Опубликовано: 24 окт 2024

Комментарии • 110

  • @Stratnik
    @Stratnik 2 месяца назад +198

    He did it, he finally answered the biggest question in programming, “How to center a div”

    • @Nico-ly7lh
      @Nico-ly7lh Месяц назад +2

      :D:D:D same here!

    • @Starchild2077
      @Starchild2077 19 дней назад +1

      I'm new to the "div lore" ,is it really that hard to learn how to centre a div or just a meme lol

    • @98f5
      @98f5 19 дней назад +2

      @@Starchild2077 literally never heard this in my life but designers are a different breed

    • @Stratnik
      @Stratnik 19 дней назад +2

      @@Starchild2077 I think it was a common question in beginners that got memed or something like that

    • @user-sy9hm8cl2h
      @user-sy9hm8cl2h 16 дней назад

      damn bruv, I already was gone with css until I found out flex. Back to life again. Those soviet methods of margin gaps and etc is so wack and pathetic to be honest.

  • @nivthefox
    @nivthefox 2 месяца назад +50

    I've been doing CSS since the late 90s, and it has changed so much from what I learned. At some point I moved to primarily working in the backend and I stopped keeping up. Then I came back to do some frontend stuff and there was all this new flex-box stuff and it was so damned confusing to me. I learned more in this short video than I could figure out with my own research and experimentation over the last several years. Well done, and thank you. I am definitely a subscriber, after this.

  • @CodeWithOgochukwu
    @CodeWithOgochukwu Месяц назад +7

    This is value packed ❤❤
    To all new programmers a reminder that you are doing your best. Don't give up now. A little more push could bring the break you so desperately need.
    I am rooting for you ❤❤

  • @stratfanstl
    @stratfanstl 2 месяца назад +5

    The amount of thought devoted to writing this content, devising the demonstrations and synchronizing the narrative with the changes in the demo is awe inspiring. The topic itself is still difficult to learn cuz the designers of CSS didn't seem to step back and contemplate consistency in property names but given that hurdle, this is the best way to teach these techniques.

  • @keyurjethava-y6j
    @keyurjethava-y6j 6 часов назад

    I really appreciate for this crash course. It was so beneficial for me. Thanks a lot.

  • @ericgathinji
    @ericgathinji 8 дней назад

    This is the first video I watched about CSS Flexbox, and was accurate. Thank you!

  • @saikattunga
    @saikattunga 2 месяца назад +26

    Your teaching is very helpful for begginer like me. Thank you so much...

  • @lifestyle-hq5qz
    @lifestyle-hq5qz 18 дней назад +2

    Teaching method is wonderfull with editing and animation thanks Bro that's great coding channel we want more....

  • @GaneshV-sq9cz
    @GaneshV-sq9cz 4 дня назад

    bro, iam from india your teaching is very nice. your explanation is also very proud.tnx bro.

  • @PicSta
    @PicSta 2 месяца назад +5

    For layouts, I prefer grid to flexbox. Grid has some advantages as it takes care of their child items (columns). Flexbox has it strength when aligning items in a row or column structure. UL lists or like in a header to give space between logo and navigation. If the number of items is unknown, and you define a structure with grid, it will take care of the child items. Anyway, good explained flexbox video. Thanks!

  • @nikkonnii
    @nikkonnii 5 дней назад

    I learn a lot in just 20 minutes, thank you so much

  • @Djdjrkejcjfjf
    @Djdjrkejcjfjf 15 дней назад

    Dang now it is just like Flutter Column and Row widgets. I couldn't figure it out in React and now I get it. Cheers!

  • @mykalimba
    @mykalimba Месяц назад +7

    Yes, it's important to remember that "align-items" and "justify-content" work on the two different axes. But... there's nothing implicit in the naming of these two properties to associate them with the corresponding axis on which they operate. So, when I'm writing new CSS to arrange content in a flexbox, I'm always guessing at which property I need. Why, for example, didn't the CSS consortium name the properties "align-items-main" and "align-items-cross" to make remembering them easier?

  • @DejeneSamuel
    @DejeneSamuel 23 дня назад

    Thank you so much for this fantastic presentation on Flexbox! I struggled to understand how it works before, but your clear explanations and examples made everything so much easier to grasp. I really appreciate the effort you put into this. Keep up the great work!

  • @pepo8226
    @pepo8226 26 дней назад

    One of the best conteud that i ever seen about flex-box!

  • @nurislam1492
    @nurislam1492 15 дней назад +1

    Thank you so much fo giving us a such a helpful video. I really appreciate the video.

  • @DocuFlow
    @DocuFlow Месяц назад +2

    Excellent content. Less music would be great though, as some words got muffled by the loud points in the music. No matter as CC helped there. Thank you!

  • @makhnas
    @makhnas 2 месяца назад +4

    Thanks so much bro love you , you solved my misconception btn align-items and justify-content.
    Big up bro👊

  • @AS-mc2db
    @AS-mc2db 2 месяца назад +1

    I am glad that you are uploading awesome contents now a days... Thank you ❤

  • @michaelbarley
    @michaelbarley 4 часа назад

    This was very useful!

  • @sampitt6479
    @sampitt6479 14 дней назад

    Hi. Great video. I just wanted to point out that @9:34 the default value for the align-content property is actually 'normal', not 'space-around'.

  • @howtech420
    @howtech420 25 дней назад

    Great video 👌. Everything is explained about CSS flexbox

  • @slyterkit
    @slyterkit 9 дней назад

    Perfectly balanced as all things should be 🔥

  • @manang218
    @manang218 Месяц назад

    You really cooked man seriously you made the concept so easy to understand truly appreciate it !!

  • @RanjithKarnan-f2b
    @RanjithKarnan-f2b Месяц назад +1

    its really useful thank you so much...and the way you explained....😍very nice.

  • @KareemAshraf-x5s
    @KareemAshraf-x5s 2 месяца назад +1

    Best flex box course i havve seen so far thanks for the nice work :)

  • @SRIGHT0
    @SRIGHT0 Месяц назад +4

    flexbox is for simplicity and superiority, but legends do grids

  • @clashcollegecarter2842
    @clashcollegecarter2842 16 дней назад

    This makes flexbox a lot more bareable from learning it from scratch also I didn't know you could put css inside html I'm gonna do that an confuse my teacher from now on

  • @wordpressbloom
    @wordpressbloom 14 дней назад

    This tutorial is the best very detailed

  • @johneric2720
    @johneric2720 Месяц назад

    You made flex-box easy to understand with the summary and everything, thank you so much!
    When will you be releasing the grid video?

  • @GlixedYouTube
    @GlixedYouTube 2 месяца назад +2

    You're a genius! thanks!

  • @garywintle
    @garywintle 2 месяца назад +2

    Really enjoying your vids lately. Very helpful and enjoyable.

  • @asaduzzaman.channel
    @asaduzzaman.channel 12 дней назад

    great explanation! ❤

  • @sardarzain1066
    @sardarzain1066 2 месяца назад

    Believe me this is absolute 💎.
    I don't know who are you but In my heart there is a very big bunch of love for you ❤❤

  • @ОлегБулан-о4с
    @ОлегБулан-о4с 2 месяца назад +1

    Really clear and succinct explanation!

  • @waleedbinshabbir1542
    @waleedbinshabbir1542 2 месяца назад

    omg thank you so much, I have a project this month and this is what I was looking for.
    Can you please do css grid and css containers next.

  • @anoymouschannel3513
    @anoymouschannel3513 Месяц назад

    Thank you for the flexbox lessons!

  • @_Parth_Rathod_
    @_Parth_Rathod_ 2 месяца назад

    Best flexbox video ever

  • @sardarzain1066
    @sardarzain1066 2 месяца назад +1

    Sir plz make a comprehensive tutorial on CSS Grid also, you are so effective for us; plz sir

  • @maryamfiroozmandi
    @maryamfiroozmandi Месяц назад

    Your teaching was excellent 🤩🤩🤩🤩🤩🤩❣❣❣❣

  • @aq7500
    @aq7500 2 месяца назад

    Thankyou so much ❤❤❤.So many doubts cleared

  • @ttworld5188
    @ttworld5188 4 дня назад

    Thank you so much❤

  • @emersonjnr6462
    @emersonjnr6462 Месяц назад

    This was so easy to understand!

  • @musu_7
    @musu_7 2 месяца назад

    One of the best tutorial ever!

  • @prabusiliwangioke
    @prabusiliwangioke Месяц назад

    i learn alot from this channel, keep going ❤

  • @codexrat
    @codexrat Месяц назад

    LEGENDARY GUIDE 🔥

  • @jandeswart1378
    @jandeswart1378 2 месяца назад +1

    This is a very good tutorial.

  • @fmmasumbilla5296
    @fmmasumbilla5296 25 дней назад

    Great Video❤

  • @oanling917
    @oanling917 2 месяца назад +5

    CSS Grid next please

  • @kalitbh5250
    @kalitbh5250 2 месяца назад

    Brother this is the kind of info you charge money for ! But thanks for sharing free 🎉❤

  • @JimmyAlexson-c8z
    @JimmyAlexson-c8z 2 месяца назад

    Thanks you alot nice work and I appreciate it , you make me understand about flex box ,

  • @German-wh4dm
    @German-wh4dm 2 месяца назад

    Thank you for your course! 👍

  • @asmorr8778
    @asmorr8778 2 месяца назад

    Thank you so much! This is great

  • @asjmalhussain5
    @asjmalhussain5 2 месяца назад

    We like your videos don't stop making videos

  • @Lebanonbasket
    @Lebanonbasket 2 месяца назад

    It is a perfect video that's explain a flex box
    thank you I hope 🙏 to create a video about grid box❤❤

  • @chamarthykoushik204
    @chamarthykoushik204 Месяц назад

    Man Thank you so much for this🥺

  • @ZesterAcademy-c7r
    @ZesterAcademy-c7r 2 месяца назад

    Thanks.Love from Bangladesh

  • @NoorKhan-qw8tw
    @NoorKhan-qw8tw 2 месяца назад

    Cool
    The way of your teaching in awesome ❤❤❤

  • @dhruvburada5391
    @dhruvburada5391 Месяц назад

    Thank you so much such a informative video

  • @douglasoliveira4104
    @douglasoliveira4104 2 месяца назад

    Muito bem explicado, simples e fácil de entender, obrigado pelos vídeos e parabéns pelo canal, irei assistir outros dos seus vídeos.

  • @hashamniazi3402
    @hashamniazi3402 5 дней назад

    impressive 😁😍

  • @S.A.F707
    @S.A.F707 2 месяца назад +3

    Please drop a Grid course 🙂

  • @besto_
    @besto_ 2 месяца назад +4

    Make CSS Grid video next please

  • @luizphilipesena7065
    @luizphilipesena7065 2 месяца назад

    Really great content... thank you for sharing...

  • @FernandoFormation
    @FernandoFormation 2 месяца назад

    You are amazing to teach

  • @BETHETRUTH1
    @BETHETRUTH1 2 месяца назад

    Your content is very interesting

  • @jeevanarajaratne1010
    @jeevanarajaratne1010 Месяц назад

    Thanks...

  • @MOHAMMEDKHALANDER-g1c
    @MOHAMMEDKHALANDER-g1c 2 месяца назад +1

    Please add a video on grid, please 🙏🏻 😢

  • @geraldtorwodzor
    @geraldtorwodzor 20 дней назад

    i love the teaching but i have a question : you have a closing tag div closer to the closing body tag but i cant see the opening tag of that div

  • @algrew_
    @algrew_ 2 месяца назад

    Superb

  • @mhuzaifa6040
    @mhuzaifa6040 2 месяца назад

    Plz make next video on grid

  • @BorisValenta
    @BorisValenta Месяц назад

    الفيديو ده هو تجميع لقائمة تشغيل كورس css انا جمعتها في فيديو واحد تسهيلا على الناس مش اكتر

  • @jlonso1840
    @jlonso1840 2 месяца назад

    sounds good

  • @shubhamrathod5933
    @shubhamrathod5933 2 месяца назад

    Make figma to html/css videos step by step

  • @bud-yo
    @bud-yo 2 месяца назад

    Nice

  • @next_level-2.
    @next_level-2. 2 месяца назад

    great video to learn flexbox

  • @LuciferIs666
    @LuciferIs666 2 месяца назад

    Nice video, Subscribed !

  • @ihavenoideafora-name
    @ihavenoideafora-name Месяц назад

    Hi!
    It might be a strange question but what is the full code line in the 5th line?
    (I'm pretty new and i learn by these type of videos just by copying the code used then dissecting and exploring it. And I heven't seen that type of line anywhere yet)

  • @Ocean10230
    @Ocean10230 2 месяца назад

    useful:D

  • @VikkiKumar001
    @VikkiKumar001 2 месяца назад

    Completed ❤

  • @reanwithkimleng
    @reanwithkimleng 2 месяца назад

    Quality video ❤❤❤😊

  • @buzzer79
    @buzzer79 13 дней назад

    a expierenced guy would say display:flex and to the item margin:auto

  • @hizkeltewodros
    @hizkeltewodros 2 месяца назад

    you are Great

  • @Memeee
    @Memeee 2 месяца назад

    Thank you! Could you create a javascript video based on element selectors and how to style them via functions ❤❤

  • @Intikhabkhursheed
    @Intikhabkhursheed 2 месяца назад

    great video and please i need a video on Modal in html css a pop up modal

  • @min_way
    @min_way 10 дней назад

    which font on your thumbnail?

  • @Arshad___Ali
    @Arshad___Ali 2 месяца назад

    Make 1 video for grid also.

  • @anuhang9
    @anuhang9 2 месяца назад

    Make make display grid like this video ❤

  • @XDKOZ
    @XDKOZ 2 месяца назад +1

    I like to learn grid in css

  • @ashishkumar-jo7cj
    @ashishkumar-jo7cj 2 месяца назад +1

    Where is the order property sir its very important in terms of positioning the flex items specially in complex responsive design

  • @sourishdutta9600
    @sourishdutta9600 2 месяца назад +1

    Add Grid Video.

  • @CarmenQuincy-g2h
    @CarmenQuincy-g2h 19 дней назад

    Young Brenda Rodriguez Ruth Perez Donna

  • @Jimmy.2.0.0.5
    @Jimmy.2.0.0.5 2 месяца назад

    Hi, can you create your content in Spanish? Create a RUclips account where your videos are in Spanish so you can also have them published in Spanish. Greetings, I'm Jimmy, from Ecuador.❤
    Hola, ¿puedes crear tu contenido en español? Crea una cuenta de RUclips donde estén tus videos en español para que puedas tenerlos publicados también en español. This way you will also have a Spanish audience on your other channel. Saludos, soy Jimmy, de Ecuador.❤

    • @spaghettiking653
      @spaghettiking653 2 месяца назад

      You can try dubbing it yourself by just downloading it and then speaking over him in Spanish.

  • @The_T-Bone
    @The_T-Bone 2 месяца назад

    did anyone else get the thanos refrence?

    • @coding2go
      @coding2go  2 месяца назад +1

      Nope, you are the first one lol. I thought more people would get it but reality if often disappointing.

    • @The_T-Bone
      @The_T-Bone 2 месяца назад +2

      @@coding2go Man kids these days, I love your videos by the way! very helpful!

  • @ChandrashekarCN
    @ChandrashekarCN 2 месяца назад

    💖💖💖💖

  • @jobaer23.
    @jobaer23. 20 дней назад

    How do we remove the blue color hover that we use in html when we click on the a tag?

  • @فيصل-ه8ق6ه
    @فيصل-ه8ق6ه 2 месяца назад +1

    The music disturb our understanding

  • @CarmenQuincy-g2h
    @CarmenQuincy-g2h Месяц назад

    Walker Kenneth Hall Laura Davis Deborah

  • @sezermercan8481
    @sezermercan8481 4 дня назад

    I really appreciate for this crash course. It was so beneficial for me. Thanks a lot.