Complete Flexbox Tutorial with Cheat Sheet 2021 🎖️|| CSS Flex Box 2021

Поділитися
Вставка
  • Опубліковано 12 вер 2024

КОМЕНТАРІ • 117

  • @JoyShaheb
    @JoyShaheb  3 роки тому +14

    For mentorship visit : www.mentorlabs.academy/

    • @sofiqurrahman9771
      @sofiqurrahman9771 2 роки тому

      vai ami monay korcilam apnar channel er video gula banglai hobay, bangla holay valo hoto, english to onek channel acay, but bangla channel onek kom.

  • @meilyn22
    @meilyn22 3 роки тому +3

    Bro, I have watched thousands of videos on flexbox and this is by far the easiest to understand.

  • @liiilliees
    @liiilliees 2 роки тому +4

    Just found your channel via Odin project. You are such a great teacher. Thank you for explaining this in the most simplest possible to understand. Looking forward for more

  • @disxconnect1657
    @disxconnect1657 2 роки тому +1

    I was always so confused between the different spacings with justify-content. But your kitty images and your explanation really helped a lot! Much love from a TOP student.

  • @jakej1727
    @jakej1727 2 роки тому +5

    I started watching this video trying to complete the landing page project for TOP. Figured out my mistake rather quickly, but stayed til the end anyway because you made the concepts understandable. Great work.

  • @marcelodheni
    @marcelodheni 2 роки тому +1

    I'm a backend developer who wants to refine frontend skills, i watched your course um FCC about Media Queries and now i'm watching all your videos, thank you very much Joy, cheers from Brazil.

  • @ldiazortiz
    @ldiazortiz 3 роки тому +4

    I'm starting in CSS so I don't know many concepts, however, your explanation was so precise that it motivated me to continue studying and watching your videos. Thanks

    • @JoyShaheb
      @JoyShaheb  3 роки тому +1

      I'm glad you loved my works 😁

  • @josephputnam7586
    @josephputnam7586 3 роки тому +1

    You are by far the best teacher on youtube.
    One thing for you.
    You started near the beginning with .box-*4 to create four div elements with ID's of "box-"
    Then you added the numbers 1 thru 4.
    You can do the numbering automatically by adding the $ sign after you ID name.
    For example .box-$*4 will create the following without any additional typing needed.

    • @JoyShaheb
      @JoyShaheb  3 роки тому

      Thank you soo much for the well wishes. It really means a lot and helps me keep motivated. I hope you have a great day 🌹

  • @arafathossainar
    @arafathossainar 3 роки тому +1

    Very nice explanation. I am totally impressed by the way you explain. You are the next famous Bangladeshi Dev youtuber. Please upload videos in Bengali for beginner Bangladeshi developer(you can create another channel for Bengali content).
    Best of Luck.

  • @dekolah5
    @dekolah5 2 роки тому +1

    Than kyou Joy for your thorough explanation of flexbox. Really appreciate your time and dedication.

  • @clintkennedy8387
    @clintkennedy8387 3 роки тому +2

    Thank you Joy! I've been using flexbox for years, but it's always good to refresh the info! I did not know about the place-content property, or the purpose of flex-basis. Now, I do. Thank you. :)

  • @Passivepanda94
    @Passivepanda94 2 роки тому +1

    Sensational video Joy, great content and great instructor. Quickest sub of 2022

  • @TheSktproduction
    @TheSktproduction 2 роки тому +1

    You deserve more subscribers and views. Thank you so much for the videos!

  • @Himanshu-ow3ge
    @Himanshu-ow3ge 3 роки тому +2

    Wow .. love the way you teach man. I have subscribed to many famous youtubers in frontend field. But You are the best of all❤️

  • @blueberry5992
    @blueberry5992 Рік тому +1

    Concise and straight forward, you're the best ❤

  • @mohitsaud2071
    @mohitsaud2071 3 роки тому +2

    Thank You, Joy, spent 1 hr plus on this video and learned a lot of useful things from you. Looking forward to more videos from you.

  • @sphinxz_gaming
    @sphinxz_gaming Рік тому +1

    I watch your videos everyday and helps me a lot of CSS through my coding journey of Web Developer

  • @marksimpson4310
    @marksimpson4310 3 роки тому +1

    I've read quite a few articles on flex-box, but I loved your flexbox cheat sheet the most. It's informative, it's bright, it's colorful. Thank you.

  • @rhymekidstv
    @rhymekidstv 2 роки тому +1

    This is the best and well explained flexbox video I have seen so far. I will checkout your grid video too. I have also subscribed. Well done mate

  • @error0803
    @error0803 2 роки тому +1

    Teaching is definitely your thing. Good content. Subbed

  • @lilliesan
    @lilliesan 2 роки тому +2

    Your explanation is easy and concise. Also you make coding fun, good job

  • @alea621
    @alea621 3 роки тому +2

    CRAZYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY !!! i underSTOUUUUd ! :p best explainnnn

    • @JoyShaheb
      @JoyShaheb  3 роки тому

      I'm glad you like it 😄 🌹

  • @jonathanmartinez76
    @jonathanmartinez76 3 роки тому +1

    Thanks a lot bro! I'm learning about CSS and Flexbox and your channel is really helpful. Grettings from Argentina!

  • @GretSeat
    @GretSeat 2 роки тому

    An easy way to remember cross vs main is that a CROSS (religious symbol) is longer going up and down. And the cross START is where you start when you are forming the cross with your hands (head, chest, left right)
    An easy way to remember space around vs space evenly is that space around is that EACH ITEM has SPACE AROUND IT, so they don't bump into each other. So that 10px and 20px, makes no sense. But if you say "A" has Space Around it, that personal bubble around A is 10px on left, and 10 on right. so that means B will have 10 on left and 10 on right. So between A and B is 20px. Space EVENLY is that each item, as well as the space between the content and the border has EVEN spacing. So A has 10 on left and right, and B has 10 on left and right before bumping into A. All the space is EVEN between everything.
    hope that helps. It helped me.

  • @jaimeandrescarcamosepulved2456
    @jaimeandrescarcamosepulved2456 2 роки тому +1

    Great content. I'll be watching all your vids and taking notes.

  • @abhijitmhatre5411
    @abhijitmhatre5411 2 роки тому +1

    Lots of concept cleared when I start watching your videos like async await example of ice cream store ♥️, css media query America Bangladesh Starbucks 😅♥️

  • @vikasg1821
    @vikasg1821 3 роки тому +1

    Precise video on the Flexbox. Great job. Keep doing the great stuff!

  • @js-swift
    @js-swift 3 роки тому +1

    Thanks a lot Joy brother
    You know what i was wondering about flexbox and css grid for couple of days
    but you'r videos came out
    and this flexbox and cssgrid are the best one of 2021
    really this one of the stuff that i liked the most
    thanks a lot Joy 🙏

    • @js-swift
      @js-swift 3 роки тому

      the best part i like that i was that my mind in focus mode because your are teaching through your cheatsheet you made
      and due to this my mind was not think about how many properties are there and which need to be use
      and one thing you said in css grid with cheatsheet video is that
      there is grid-gap and gap so you said gap is a new version that's a good thing i like
      most of the tutorials teach old stuff
      but A big Thanks to you !!! 🙏
      keep the quality BYEE

  • @manuelvaal1257
    @manuelvaal1257 4 місяці тому +1

    Pleased to digest your content! Superb.❤

  • @gayatrimamidwar8364
    @gayatrimamidwar8364 2 роки тому +1

    Unique teaching style. Learning a lot new concepts from you😇🙌

  • @yeah_reee
    @yeah_reee 2 роки тому +1

    Brother you did such an amazing job with the overall content. YOU ARE EXPLAINING EVERYTHING.
    Also you seem pretty motivated about the help that you providing, Thank you very much for the help!!!

  • @tricita84
    @tricita84 2 роки тому +1

    Dude, you are on fire! Great explanation

  • @zamearii
    @zamearii 2 роки тому +1

    Brother you are awesome. You should make more tutorials.God bless you

  • @adamgrover9481
    @adamgrover9481 2 роки тому +1

    Great video Joy! I love your no nonsense delivery - you packed so much in! Thanks a lot

    • @JoyShaheb
      @JoyShaheb  2 роки тому +1

      I’m glad you loved my works, also, check out the flex box and grid cheat sheets. It’ll be very very handy when you are working in a real life project.

    • @adamgrover9481
      @adamgrover9481 2 роки тому

      @@JoyShaheb will do 👍 cheers

  • @dacrazynub2920
    @dacrazynub2920 2 роки тому

    I had an assignemnt on this but was sick and couldnt go to school. Thank you!!

  • @christinabarcey2703
    @christinabarcey2703 3 роки тому +2

    Thank you so much for summing the whole flex architecture in one video in the best understandable way😌🌻👌

  • @harikirankante883
    @harikirankante883 3 роки тому

    This is the best video about flex that I have seen till now. =) Totally loved it.

  • @user-tp9zw3os3q
    @user-tp9zw3os3q Рік тому +1

    Thank you so much! It's very clearly to understand! 😃

  • @dhananjayand5335
    @dhananjayand5335 3 роки тому +2

    The real joy is understanding the concepts❤️

  • @Frankslaboratory
    @Frankslaboratory 3 роки тому +1

    Nice video, I subscribed and joined the gang :)

    • @JoyShaheb
      @JoyShaheb  3 роки тому

      I subscribed to your channel a veeeeeeery long time ago. I really love the way how you explain game dev using plain javascript.
      You're an unique artist Mr. Frank. Looking forward to learn more from you in future videos. Till then, take care and stay safe 🌹

    • @Frankslaboratory
      @Frankslaboratory 3 роки тому +1

      @@JoyShaheb Oh, you already know me, unexpected, thank you. I like your catchy thumbnail style and your video descriptions are SEO friendly, but your main asset if your on camera presence, it's really good. If you keep it up your channel will grow fast

    • @JoyShaheb
      @JoyShaheb  3 роки тому +1

      @@Frankslaboratory thank you Mr. Frank for the well wishes. let's hope for the best 😁

  • @shinstorm3473
    @shinstorm3473 2 роки тому +1

    Very informative thanks for clearing up how flex works. You have made it very clear to understand Thank You

  • @antoniomorga1824
    @antoniomorga1824 3 роки тому +1

    Amazing video! It is clear and concise, keep it up!

  • @samuelkamau1550
    @samuelkamau1550 Рік тому +1

    great tutorial, subscribed... hope to learn tailwind css from you, thanks

  • @Knightice765
    @Knightice765 2 роки тому +1

    Very good tutorial my friend! Thanks a lot!!!

  • @toxicgamerzrk
    @toxicgamerzrk 3 роки тому +2

    Underrated channel 🔥

  • @blargd
    @blargd 3 роки тому +1

    Just a heads up with the emmets at the start if you do .box-$*4 that'll give you box-1, box-2 etc. without the need to edit the number in after doing it, might be handy in the future :)

    • @JoyShaheb
      @JoyShaheb  3 роки тому

      Thank you for the suggestions and well wishes 🌹

  • @arubisudesu
    @arubisudesu Рік тому

    Subbed and liked, very informative and clear!

  • @faizanalam1646
    @faizanalam1646 3 роки тому +2

    Please make other topics of css like animation , transition , transformation

  • @Edu-lk3bj
    @Edu-lk3bj 2 роки тому

    That was very detailed and easy to understand, just perfect!!!
    I wish the cheat sheet was also downloadable in pdf format too.

  • @jobjunior9027
    @jobjunior9027 Рік тому +1

    Thanks For all

  • @wja14msu
    @wja14msu 2 роки тому +1

    Great video. Very straight forward and easily understandable.

  • @marm713
    @marm713 3 роки тому +1

    You're great at explaining concepts, thank you for your work. I found your channel through FreeCodeCamp

    • @JoyShaheb
      @JoyShaheb  3 роки тому

      Most welcome. I'm glad you found this helpful 🌹

  • @ropurifiedwater
    @ropurifiedwater 2 роки тому

    Thank you so much dada for the video, css selectors er opor ekta video banale bhalo hoto!

  • @DannyLevan1
    @DannyLevan1 3 роки тому

    You talk very fast but explain things very well! Thank you

  • @bahauddinchishte
    @bahauddinchishte 2 роки тому

    Hi Bhaia, Just found your channel! it is really awesome!

  • @michaelshaw9997
    @michaelshaw9997 2 роки тому +1

    Thank you for the explainations. Very helpful.

  • @noface00
    @noface00 Рік тому +1

    Thank you!!!
    this is super helpful

  • @hammadahmad5383
    @hammadahmad5383 3 роки тому +2

    Just Best 😍😍😍🥰🥰🥰

  • @Akshaykumar-gu1pr
    @Akshaykumar-gu1pr 3 роки тому +1

    well explained keep it up .👍👍

  • @rhymekidstv
    @rhymekidstv 2 роки тому +1

    Thank you for the cheat sheet. It's very detailed and easy to understand.

  • @portfedh
    @portfedh Рік тому

    Thanks for the tutorial! A really good introduction.

  • @navinduabhishek8564
    @navinduabhishek8564 3 роки тому +1

    Your explanation is very good and easy to understand! Thank you, bro!❤

  • @saurabhpatel6933
    @saurabhpatel6933 2 роки тому

    Very nice, keep spreading knowledge 🙂

  • @mohammadrezataheri8519
    @mohammadrezataheri8519 3 роки тому +1

    Amazing tutorial, thank you

  • @prathamesh3825
    @prathamesh3825 3 роки тому +1

    Amazing tutorials 🙃

  • @nancyjain6259
    @nancyjain6259 3 роки тому +1

    Best explanation, Thanks for sharing 💙

  • @rajinsakha07
    @rajinsakha07 2 роки тому

    Awesome Content

  • @lightgodmantv2432
    @lightgodmantv2432 2 роки тому

    Beautiful lecture. Thank you !

  • @bhaskarreddy.b2818
    @bhaskarreddy.b2818 2 роки тому +1

    Excellent

  • @pushpakrai5303
    @pushpakrai5303 2 роки тому +1

    i like your English accent . ,🔥😎

  • @billnewsr.9314
    @billnewsr.9314 Рік тому

    Interesting Demo. Thank you!

  • @mrnordjr
    @mrnordjr 3 роки тому +1

    a Cheat Sheet in pdf would be really great

  • @saadosman6967
    @saadosman6967 2 роки тому +1

    You should add a donate tab-- Thank You

  • @rupertodiaz8673
    @rupertodiaz8673 Рік тому

    joy make it look so easy

  • @Qsnira_
    @Qsnira_ 2 роки тому

    man youre awesome thank you

  • @salmenmahjoub9223
    @salmenmahjoub9223 3 роки тому +1

    Thank you so much this is so helpful sir

  • @Yusuf-wr4wb
    @Yusuf-wr4wb 3 роки тому +1

    Thank you. Nice explanation. Subscription

  • @pushpakrai5303
    @pushpakrai5303 2 роки тому +1

    best explanation

  • @kenroyarcher2496
    @kenroyarcher2496 2 роки тому +1

    Thank you.

  • @GretSeat
    @GretSeat 2 роки тому

    You kind of just skipped over Shrink, I still have no idea what that means or does. And then you added it to the flex: and I'm trying to figure out why it gets smaller, and where it gets smaller.

  • @samraj3971
    @samraj3971 3 роки тому

    Great Explanation !!! Thank You So MUCH .. Can you do a video on positions ? Thank you in advance :)

    • @JoyShaheb
      @JoyShaheb  3 роки тому +1

      Most welcome and stay tuned 🌹

  • @tsciproperties7619
    @tsciproperties7619 Рік тому

    thanks for this

  • @anasalhariri5474
    @anasalhariri5474 3 роки тому +1

    How to center column elements in the middle of the container vertically??

    • @JoyShaheb
      @JoyShaheb  3 роки тому

      I have an entire video on that. ua-cam.com/video/RTEzXS_CT5w/v-deo.html
      look at the chapters, you'll find multiple ways

  • @andygr1n1
    @andygr1n1 3 роки тому

    very good!

  • @FutureTechieKid
    @FutureTechieKid Рік тому

    nice voice sir

  • @nayuduramakrishna42
    @nayuduramakrishna42 3 роки тому +1

    Brother my humble request is create a video about complete tutorial of html, css for beginers please brother, you are telling excellent brother

    • @JoyShaheb
      @JoyShaheb  3 роки тому

      I'll try my best brother 😅

    • @nayuduramakrishna42
      @nayuduramakrishna42 3 роки тому +1

      Please brother im illing to became a front end develop after listening your communication belongings to subject

  • @nayuduramakrishna42
    @nayuduramakrishna42 3 роки тому

    Why the align-content:center does not align the flex items center along y-axis when the flex-direction is column???

    • @JoyShaheb
      @JoyShaheb  3 роки тому

      Try flex direction row.
      In flexbox and grid, to do any work you need to change orientation through flex-direction

  • @nayuduramakrishna42
    @nayuduramakrishna42 3 роки тому

    Can u plz upload a template using html, css

  • @thevloglife105
    @thevloglife105 3 роки тому +1

    Hey Joy,
    Don't do continue flexbox any videos, so It is too small code. Now you will upload video regarding reactjs, so it will be getting different code.

    • @JoyShaheb
      @JoyShaheb  3 роки тому

      Sure. React js videos incoming :"D

    • @thevloglife105
      @thevloglife105 3 роки тому +1

      @@JoyShaheb Great. But do as soon as possible. Don't do keep late.

  • @user-pq6jp7qc1k
    @user-pq6jp7qc1k Рік тому

    cute

  • @DevJubayer
    @DevJubayer 3 роки тому

    ভাই তুমি বাংলায় ভিডিও বানাও না?

  • @sharifuddin1698
    @sharifuddin1698 2 роки тому

    Bangla please😑

  • @amansinghbhadauria2818
    @amansinghbhadauria2818 2 роки тому

    Informative & concised video, but what's with that accent.

  • @liiilliees
    @liiilliees 2 роки тому +4

    Just found your channel via Odin project. You are such a great teacher. Thank you for explaining this in the most simplest possible to understand. Looking forward for more