CSS Layout: Flexbox & Grid Basics

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ต.ค. 2024

ความคิดเห็น • 189

  • @gideonejiogu9504
    @gideonejiogu9504 2 ปีที่แล้ว +3

    I'm not trying to drop nice comment just like every other person, I just want to say thank you for this awesome tutorial. I dedicated a whole day for this, trust me it was time well spent.

  • @wetsand7379
    @wetsand7379 4 ปีที่แล้ว +47

    I just want to give you a huge thanks for creating this course and sharing it with us for free! I've tried many online courses but this one so far has been the most helpful.

    • @LearnWebCode
      @LearnWebCode  4 ปีที่แล้ว +4

      Thanks! Hearing directly that the videos are helpful is the ultimate motivation for me. I dig the cat avatar lol

  • @CephalonOwl
    @CephalonOwl 2 ปีที่แล้ว

    dude you are a gift sent from heaven, I've been sharing your videos with friends that are planning to go into computer science and they love it.

  • @peterparker2460
    @peterparker2460 ปีที่แล้ว

    I request you to make more videos Brad, you are better than any other coding teacher out there. Your teaching style is amazing.

    • @LearnWebCode
      @LearnWebCode  ปีที่แล้ว

      Thank you so much! Encouragement like this means so much to me ❤️

  • @rabbitcreative
    @rabbitcreative 4 ปีที่แล้ว +11

    I haven't watched yet, I want to say though: I appreciate the text in your thumbnail -- code this *with me*. I think that's a better way to help someone learn something.

  • @2three362
    @2three362 2 ปีที่แล้ว

    You are so good a teacher it's ridiculous!

  • @tahjaecampbell5598
    @tahjaecampbell5598 4 ปีที่แล้ว +4

    You have no idea how this has helped me. Thanks dude!

  • @georgewilson511
    @georgewilson511 2 ปีที่แล้ว

    Best tutor of the decade you deserve it thanks so much

  • @BGdev305
    @BGdev305 2 ปีที่แล้ว

    Man in just one video in under an hour you just shared hours if months of CSS knowledge!

  • @bertrandfossung1216
    @bertrandfossung1216 4 ปีที่แล้ว +35

    Brad your teaching style is just so amazing. I really had fun learning flex and grids in CSS. Keep it coming!!!

    • @demystif-AI
      @demystif-AI 3 ปีที่แล้ว +1

      I agree the most understandable webdesign tutorial I have seen, and I have watched many while being in tutorial wormhole. You have an uncanny ability to make what your teaching more understandable than most. Please keep it coming.

  • @learnwithcode4211
    @learnwithcode4211 4 ปีที่แล้ว +1

    Better than paid courses ...learn a lot thanks for the video

  • @edwardcrow8940
    @edwardcrow8940 3 ปีที่แล้ว

    You are a hero man... Very well explained... I have never seen anyone explain CSS the way you do.... Salute

  • @remax110
    @remax110 4 ปีที่แล้ว +3

    I dont mind being over with the time. I enjoyed your tutorial. Thank you.

  • @samuelfrancis8687
    @samuelfrancis8687 ปีที่แล้ว

    I was able to get my assignment done with the flex box feature. Thanks man!

  • @M386-s7d
    @M386-s7d 3 ปีที่แล้ว

    Brad Schiff == easiest way to understand programming . thanks . آفرین

  • @ebesquin
    @ebesquin 3 ปีที่แล้ว

    Dear Brad:
    Thank you very much for your great courses.
    You deserve a nobel prize for them.

  • @spencerchen1698
    @spencerchen1698 2 ปีที่แล้ว

    Dude, you just solve my problem for like 2 months! since I am just a self-taught programmer, it's quite hard to find resources to learn. I know there are tons of videos about flex & grid, but you are the one sparkling me. much more appreciate! thanks bro. Best teacher ever!

  • @Ruxziiiiii
    @Ruxziiiiii 3 ปีที่แล้ว +3

    There is no word to do justice with the quality of your teaching. I did know all of these stuff but never had confident to apply them and this project just gave me that confident. You are a gem. Please keep uploading more videos like this.

  • @aakashnarwade7965
    @aakashnarwade7965 2 ปีที่แล้ว +1

    Brad hats off to your teaching style , its really helping me a lot to clear my css basics .

  • @kenadelglass7933
    @kenadelglass7933 2 ปีที่แล้ว

    Brad - you do a great job of explaining every line of code and also showing the results visually. Your pacing is perfect - better than many I have seen.

  • @rayjaymor8754
    @rayjaymor8754 2 ปีที่แล้ว

    Thank you SO much!!
    I've been trying to figure out flexbox and grid for AGES and it turns out I was seriously over complicating it.
    It makes a lot more sense now!

  • @edwinbarrientos9346
    @edwinbarrientos9346 4 ปีที่แล้ว +1

    The way you explain is awesome! You actually say why and in a way a true beginner can understand.Thank you so much.

  • @shardagovender4465
    @shardagovender4465 3 ปีที่แล้ว +1

    Absolutely enjoying this boot camp series. Prior to this, watched plenty of other beginner tutorials... You are so spot on with the shorter videos and focused concentration!

  • @prasad_yt
    @prasad_yt 2 ปีที่แล้ว +1

    Is there a way to give 20 likes ? So many nuggets of learning. Man , you have great teaching skills - it’s not just way you explain but even planning your content. I am loving your react course...outstanding sir ! Let em keep coming

  • @GameStream0N
    @GameStream0N 3 ปีที่แล้ว +1

    This video deserves more views, you are explaining detailed your moves, this is how this kind of tutorials should be, well done and keep up the good work!

  • @uchiha6622
    @uchiha6622 2 ปีที่แล้ว

    This guy is on another level

  • @suprabhatkumar5478
    @suprabhatkumar5478 4 ปีที่แล้ว

    Hello brad, today i landed to your channel in search of JavaScript tutorials and trust me.. you're super cooooooool...thanks and luv u buddy...

  • @preyasprathap
    @preyasprathap 4 ปีที่แล้ว +1

    This video is GOLD.

  • @WebDevMastery
    @WebDevMastery 4 ปีที่แล้ว +1

    Love you brad following you for last 15 months watched almost your all TH-cam videos , hoping this bootcamp going to be all in one , Super excited

  • @BritoWorx
    @BritoWorx 3 ปีที่แล้ว

    Value is immense. 3rd video in im most definitely hooked!

    • @LearnWebCode
      @LearnWebCode  3 ปีที่แล้ว

      Congrats! I'm glad the videos sparked your interest. Hope you make it to the JavaScript videos in this series; should be a lot of fun.

  • @kadiin8069
    @kadiin8069 3 ปีที่แล้ว

    Jesus Christ !!!! You deserve an award for teaching so good. I appreciate you man for real . 👊🏾

  • @stormbytes
    @stormbytes ปีที่แล้ว

    Excellent tutorials. It’s all in the presentation and you’re a very talented instructor! I’d like to make a suggestion. I think you should create a series where you apply all the css you’ve taught in building a series of real projects (websites, admin panels, rich mobile apps). Theory, while essential, leaves inexperienced developers wondering how to apply it all. An entire series dedicated to just this would allow you to recycle all the audience that followed the theory videos. Again, outstanding teaching. Than you!

  • @avriwork8206
    @avriwork8206 2 ปีที่แล้ว

    immediately save in favorites !

  • @ania12367
    @ania12367 3 ปีที่แล้ว

    Thank you. Your teaching style the best

  • @johnjobling3692
    @johnjobling3692 3 ปีที่แล้ว

    Love your work. You're easily one of the best teachers on here.

  • @e-contents-blocks
    @e-contents-blocks 3 ปีที่แล้ว

    I am learning a lot with Brad ... thanks mate

    • @e-contents-blocks
      @e-contents-blocks 3 ปีที่แล้ว

      Hi Brad, thank you for your response. I am going to ask a big favour which is something I believe you can deliver ease. Could you teach us intermediate and advanced jQuery,? At your convenient time in order to progress with your JQuery series ONLY, >> th-cam.com/video/1vMFpT0h-WI/w-d-xo.html.
      I know you have the full stack course which I bought but I love JQuery.
      Thank you in advance for your collaboration

  • @bhavleensingh6929
    @bhavleensingh6929 4 ปีที่แล้ว +1

    Haha..love love love from india..i purchased all ur udemy course..u r a gem

  • @NacerCoder
    @NacerCoder 2 ปีที่แล้ว

    Thank you so much you have a great way for explaining I hope we can see many other real responsive site like this one

  • @robelwoldu4971
    @robelwoldu4971 3 ปีที่แล้ว

    Awesome tutorial and presentation.

  • @vaishaligupta8477
    @vaishaligupta8477 3 ปีที่แล้ว

    Thank you so much for creating this free course. It is perfect guide for beginners like me . Your style of teaching, quality of videos and content is commendable. After trying many online resources I found this one really helpful for me. Thanks again !

  • @neoTriny
    @neoTriny 4 ปีที่แล้ว +1

    was trying to find this topic related tutorials just now 😅
    and got the notification

  • @sideshowlol
    @sideshowlol 4 ปีที่แล้ว

    Hi Brad, this bootcamp series is very helpful. You are such a great teacher. Thank you 🙏

  • @tchoutangbankouemichelfran5386
    @tchoutangbankouemichelfran5386 4 ปีที่แล้ว

    done. waiting for the next part. thanks for all

  • @zensukai
    @zensukai 4 ปีที่แล้ว +5

    Question: Is there a reason why you just use 's as your holders instead of a more semantic structure?

    • @birsingh5388
      @birsingh5388 4 ปีที่แล้ว

      There you can use section, aside etc. But most of the frontend developers has habit to use div as they learn HTML that way from starting. 😊

    • @zensukai
      @zensukai 4 ปีที่แล้ว

      @@birsingh5388 Yes I do know that ... but in today's design practices, is it not a bad practice to just use div's? Proper HTML structure also helps with accessibility and search engines (SEO) reading your content better.

    • @LearnWebCode
      @LearnWebCode  4 ปีที่แล้ว +13

      When I first outlined this lesson the HTML did indeed use the header, nav, section and footer elements, but I decided since this video already covers a lot of ground it might just be one more potential bit of confusion and removed them. But absolutely, anyone reading this, don't always do as I do... take 10 minutes and search for a TH-cam video on "Semantic HTML5 Elements"

    • @zensukai
      @zensukai 4 ปีที่แล้ว

      @@LearnWebCode Excellent, thanks for the clarification. =)

    • @rabbitcreative
      @rabbitcreative 4 ปีที่แล้ว +1

      @@stephencarroll9239 Thank you. "Semantics" are tricky because the word "header" doesn't *mean* "header", we just call it that. If I didn't already "know" that "header" meant "header", seeing the "header-tag" doesn't help me. "Semantics" by itself is not enough.

  • @terry_swd
    @terry_swd 3 ปีที่แล้ว +2

    This is great, I especially love how you styled all content right away for both desktop and mobile without having to use media queries. Very neat use of grid-template-columns! One can tell you are experienced at this - nice work!

  • @Graid
    @Graid 2 ปีที่แล้ว

    Excellent tutorial, I have been doing some other web development courses on udemy and yet this is the most well explained and detailed code along walkthrough that shows and explains CSS and flexbox features that I've seen.

  • @kurtthorsten4463
    @kurtthorsten4463 3 ปีที่แล้ว

    your teaching style is amazing, thank you very much for creating this type of content!

  • @skyy-v5o
    @skyy-v5o 2 ปีที่แล้ว

    this is the best channel , thanks a lot sir , respect ++

  • @prashanttanwar3261
    @prashanttanwar3261 4 ปีที่แล้ว

    Hi. Why didn't you use padding to give space to the three items instead of using margin

  • @helloedd2112
    @helloedd2112 4 ปีที่แล้ว

    I am very thankful to this awesome video tutorial. God bless you sir.

  • @sanjaypaudel3296
    @sanjaypaudel3296 2 ปีที่แล้ว

    Man you are the best. Keep it coming doug. Guys makes sure to subscribe and support this guy for quality content

  • @quantum_leap
    @quantum_leap 4 ปีที่แล้ว

    Thanks Brad. You are my favorite teacher. I believe you introduced a few CSS selectors like display: block on the menu and the menu hover transition that might have been intimidating for new users. And that's because you started using them without mentioning them earlier so people might not be so clear on why they were used. Personally, I don't have a problem with that since I am an advanced user, I just mention what I have observed for your own consideration.

    • @LearnWebCode
      @LearnWebCode  4 ปีที่แล้ว +1

      Thanks, and great catch. I actually wanted to take out those two things (the display: block and the hover selector) for the reason you mentioned but I realized that I had already shown the hover effects in the preview at the start of the video, and didn't want to not have that in the final product as advertised.

  • @fabiannwobi9562
    @fabiannwobi9562 4 ปีที่แล้ว

    You're just amazing, one of the best teachers I have seen

  • @lulusaikou221
    @lulusaikou221 2 ปีที่แล้ว

    Really helpful ! Thank you a lot ! And I love your videos all !

  • @jediampm
    @jediampm 4 ปีที่แล้ว +1

    Hi, thanks for the video. I liked the explanation about grid ( even more simple then explained by Rachel Andrew or jen simmons), just perfect.
    Now, i have to point point out two things:
    first: i agree with @Andrew, nowadays, with html5, do not make any sense just using div tag to group things. As your are teaching, i know no one is perfect but you should always go with modern, best practice and guide lines, like using semantic tags, for example: header, footer, nav,, section, etc. By using it, all your views will know that exist and they should use it, as part of IT education.
    second: the old problem with the footer, if you have, for example just two features, in mobile or in desktop view, the footer will not be in the bottom, will "push" near to the features with some blank space in the bottom. ;)

  • @punkxlovesxemo
    @punkxlovesxemo 3 ปีที่แล้ว

    Thank you so much for these videos! They're so easy to learn by, I do have to pause and repeat a process to fully get it, but your instructions are so clear and easy!
    Thank you so much!

  • @giorissamilevaderia5322
    @giorissamilevaderia5322 3 ปีที่แล้ว

    i love this bootcamp! I enjoyed ur vids! its really fun:)

  • @rajeshsahu3073
    @rajeshsahu3073 4 ปีที่แล้ว

    Thanks for this video...learned a lot of new things from this one..

  • @alexv.s.5055
    @alexv.s.5055 4 ปีที่แล้ว

    @LearnWebCode Thank you for all the videos. I have really learned a lot since watching your videos!! Thanks :)

  • @robust7560
    @robust7560 3 ปีที่แล้ว

    this video is legit useful, thanks a lot for this..it really cleared up my confusions

  • @lahengsiri4686
    @lahengsiri4686 4 ปีที่แล้ว

    As always it was very informative. But with the cute kitty around the videos are defenitly more attractif.

  • @maleliuk
    @maleliuk 4 ปีที่แล้ว

    Wonderful guide! Thank you for your energy and enthusiasm

  • @louaylahbib6499
    @louaylahbib6499 2 ปีที่แล้ว

    thank u so much i really enjoy following your video

  • @investmentcrusader5083
    @investmentcrusader5083 2 ปีที่แล้ว

    Dude this is awesome! Thanks so much!

  • @MrB177y
    @MrB177y 3 ปีที่แล้ว

    Thank you Brad! You're amazing!

  • @jyoshnasare312
    @jyoshnasare312 3 ปีที่แล้ว

    Thanks Brad ....... It helped me a lot..🤝

  • @fauziibrahim1356
    @fauziibrahim1356 2 ปีที่แล้ว

    thank you for your teaching

  • @somedayitsgonnamakesense
    @somedayitsgonnamakesense 2 ปีที่แล้ว

    notification on! well-deserved!

  • @Abhi-pv2qf
    @Abhi-pv2qf 3 ปีที่แล้ว

    i'll definitely take ur udemy courses man..u r just amazing!!!! Thank you so much

  • @frankherbert3779
    @frankherbert3779 2 ปีที่แล้ว

    Once more a very good lesson:-)

  • @semenyodokpo9855
    @semenyodokpo9855 4 ปีที่แล้ว

    Thanks man for this useful content about HTML and CSS; keep it on please!

  • @ukish9276
    @ukish9276 3 ปีที่แล้ว

    Thank you so much, sir..you are the best..After mastering HTML, CSS, Javascript, and jQuery I will join your course at Udemy to learn WordPress development to know more about PHP.

    • @LearnWebCode
      @LearnWebCode  3 ปีที่แล้ว

      Thanks! Unless a job opportunity specifically listed jQuery I wouldn't feel any rush to learn it. While you'll run into jQuery in older projects that you inherit, it's not typically used in new projects.

  • @Jaydon05
    @Jaydon05 4 ปีที่แล้ว

    Nice lesson as usual! Thanks!

  • @bharatbhushanupadhyay2207
    @bharatbhushanupadhyay2207 2 ปีที่แล้ว

    You are just superb!

  • @isaacaninta6551
    @isaacaninta6551 3 ปีที่แล้ว

    Great teacher

  • @carrissahcalvin4482
    @carrissahcalvin4482 2 ปีที่แล้ว

    Great tutorial!

  • @lusineyeremyan1662
    @lusineyeremyan1662 4 ปีที่แล้ว

    Thank you: waiting for the full Grid tutorial.

  • @hexadecimalhexadecimal5241
    @hexadecimalhexadecimal5241 3 ปีที่แล้ว

    Great tutorial learned alot, went through it in one go!! currently scowering ur other vids xD

  • @andrewingombe4235
    @andrewingombe4235 3 ปีที่แล้ว

    You are a great teacher. Thanks, this has really helped me a lot. Please keep up with the videos. Receive my sub and like ...

  • @Vikasseo1
    @Vikasseo1 4 ปีที่แล้ว

    Thankyou once again for the wonderful video, Dear Sir.

  • @shifronim8950
    @shifronim8950 4 ปีที่แล้ว

    Great stuff and great references, thanks.

  • @abdelkrimhaddadi5098
    @abdelkrimhaddadi5098 4 ปีที่แล้ว

    Perfect ! Thanks teacher

  • @lediscretbernard3301
    @lediscretbernard3301 2 ปีที่แล้ว

    The best video ! Thank you sir.
    Dear teacher, would it be possible for you to give us lessons in PHP ?

  • @nirajbadaik6796
    @nirajbadaik6796 4 ปีที่แล้ว

    damn this video deserves million likes

  • @wg1948
    @wg1948 4 ปีที่แล้ว

    This was so help full thank you!!

  • @EtinosaOsayi
    @EtinosaOsayi 4 ปีที่แล้ว +1

    Wow thank you for this

  • @Abby08-11
    @Abby08-11 3 ปีที่แล้ว

    love the way teach, thank you!!

  • @marcioromanblanco
    @marcioromanblanco 4 ปีที่แล้ว

    Great video! even tho design is not my thing, I really enjoyed learning more about HTML and CSS. Thanks a lot!

  • @100XPercentX
    @100XPercentX 4 ปีที่แล้ว

    Lowkey in love

  • @nicklauschris5878
    @nicklauschris5878 ปีที่แล้ว

    thank you brad alot

  • @sigmiami
    @sigmiami 3 ปีที่แล้ว

    Good job brad

  • @001minky
    @001minky 4 ปีที่แล้ว

    Great video!!! Thank you!!!!!!!

  • @BabyWickGKP
    @BabyWickGKP 3 ปีที่แล้ว

    this is great, love it

  • @sarahsantana4439
    @sarahsantana4439 3 ปีที่แล้ว

    Please please please, when ever you can and if you like please make a CSS course related to the fictional university Udemy course. It coulld be a separate course. I would like to hear and follow the explanation from you!. Great Teacher.

  • @mohammedghouse1944
    @mohammedghouse1944 4 ปีที่แล้ว

    You are a legend

  • @CodingJourney
    @CodingJourney 4 ปีที่แล้ว

    Absolutely superb! 😉💙

  • @Tech_GamerzGameplay
    @Tech_GamerzGameplay 3 ปีที่แล้ว

    This is amazing

  • @rjmacalino3186
    @rjmacalino3186 2 ปีที่แล้ว

    @10:00 what if i want the "hey" beside the "OurLogo" and not at the center. how to do that?
    Because what if i want an image logo and image text both at the left side of my header div.

  • @jalaluddin4351
    @jalaluddin4351 3 ปีที่แล้ว

    thanks a lot,i'm happy

  • @Languini_2024
    @Languini_2024 3 ปีที่แล้ว

    Just a legend