Learn CSS Flexbox in 20 Minutes (Course)

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

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

  • @Stratnik
    @Stratnik 3 месяца назад +276

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

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

      :D:D:D same here!

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

      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 Месяц назад +1

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

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

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

    • @user-sy9hm8cl2h
      @user-sy9hm8cl2h Месяц назад

      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 3 месяца назад +62

    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 2 месяца назад +15

    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 ❤❤

  • @stephenjenner6838
    @stephenjenner6838 3 дня назад

    At last.......a tutorial that is structured to actually help someone learn CSS! 👏

  • @sabyasachi426
    @sabyasachi426 17 дней назад +3

    Just great! great taching style and visuals, great narration and to the point talking!

  • @youngjesus5992
    @youngjesus5992 12 дней назад +1

    Damn this guy is amazing. Makes everything so easy to understand
    I would love to take your courses but I’m already taking the Full Stack course on Codecademy but rn I’m doing a simple cheat sheet using basic html/css as a project but I’m getting ahead of myself and end up having to learn ahead of the course so that’s why I’m watching videos 💀

  • @stratfanstl
    @stratfanstl 3 месяца назад +6

    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.

  • @saikattunga
    @saikattunga 3 месяца назад +28

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

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

    flexbox is for simplicity and superiority, but legends do grids

  • @PicSta
    @PicSta 3 месяца назад +7

    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!

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

    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?

  • @slyterkit
    @slyterkit Месяц назад +1

    Perfectly balanced as all things should be 🔥

  • @lifestyle-hq5qz
    @lifestyle-hq5qz Месяц назад +2

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

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

    You did it the best way bro. The easiest and the best way so far.

  • @GaneshV-sq9cz
    @GaneshV-sq9cz Месяц назад

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

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

    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'.

  • @DocuFlow
    @DocuFlow 2 месяца назад +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!

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

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

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

    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!

  • @nurislam1492
    @nurislam1492 Месяц назад +1

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

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

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

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

    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

  • @techysam-bl9mk
    @techysam-bl9mk 17 дней назад

    Beautifully explained

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

    This tutorial is the best very detailed

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

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

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

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

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

    thank you fabian

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

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

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

    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!

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

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

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

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

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

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

    • @Tojanplayz
      @Tojanplayz 6 дней назад

      M feeling headache😂😂

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

    Great video 👌. Everything is explained about CSS flexbox

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

    CSS Grid next please

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

    Thankyou so much ❤❤❤.So many doubts cleared

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

    Thanks.Love from Bangladesh

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

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

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

    You're a genius! thanks!

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

    Please drop a Grid course 🙂

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

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

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

    Best flexbox video ever

  • @michaelbarley
    @michaelbarley 27 дней назад

    This was very useful!

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

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

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

    Really clear and succinct explanation!

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

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

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

    LEGENDARY GUIDE 🔥

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

    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 ❤❤

  • @asaduzzaman.channel
    @asaduzzaman.channel Месяц назад

    great explanation! ❤

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

    Thank you so much❤

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

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

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

    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.

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

    i learn alot from this channel, keep going ❤

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

    Make CSS Grid video next please

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

    Thank you for the flexbox lessons!

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

    This is a very good tutorial.

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

    One of the best tutorial ever!

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

    Really enjoying your vids lately. Very helpful and enjoyable.

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

    We like your videos don't stop making videos

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

    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.

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

    This was so easy to understand!

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

    Thank you so much such a informative video

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

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

  • @attilaguba856
    @attilaguba856 6 дней назад

    Great explanation! Will it work if make image gallery with different size of images ? I have images in foreach loop C#. It would be great a tutorial with responsive images.

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

    Man Thank you so much for this🥺

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

    Thank you for your course! 👍

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

    Cool
    The way of your teaching in awesome ❤❤❤

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

    You are amazing to teach

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

    Thank you so much! This is great

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

    impressive 😁😍

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

    Your content is very interesting

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

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

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

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

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

    Great Video❤

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

    Thanks...

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

    Please add a video on grid, please 🙏🏻 😢

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

    Plz make next video on grid

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

    Superb

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

    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

  • @aryanmhatre1962
    @aryanmhatre1962 День назад

    Which browser is this guy using??

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

    sounds good

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

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

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

    Nice

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

    great video to learn flexbox

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

    Make figma to html/css videos step by step

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

    Quality video ❤❤❤😊

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

    Nice video, Subscribed !

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

    Completed ❤

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

    useful:D

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

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

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

    you are Great

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

    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)

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

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

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

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

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

    Make 1 video for grid also.

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

    Make make display grid like this video ❤

  • @armankhanbuxar4909
    @armankhanbuxar4909 24 дня назад

    flex besis😊

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

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

  • @mattvadeboncoeur
    @mattvadeboncoeur 3 дня назад

    thank you but the music is so annoying

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

    Young Brenda Rodriguez Ruth Perez Donna

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

    which font on your thumbnail?

    • @michil.1192
      @michil.1192 12 дней назад

      Looks like Gotham Black, but I could be wrong