CSS Grid Tutorial: Responsive Design Examples

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

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

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

    Thank you, I just bought the course "Become a WordPress Developer: Unlocking Power With Code " right now! 👍

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

    Believe or not, no one like you. I am not compare you with others but the way you teaching teaching is incredible. I have been watching your videos for 1+ year.

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

    Someone early commented they have watched many tutorials, and still didn't grasp css grid, I resemble that also. Your explanations are perfect, I like the way you show how to use various method to do something. I have learned a learn lot from your video, From the bottom of my heart, THANK YOU!

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

    I've watched so many tutorials of grid. No one has made it "click" for me. That's until I saw this video. You do an awesome job of teaching! Thanks! KUTGW!

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

    Im an architect of 15 years, and an Oxford University graduate with an Msc in software engineering. I could have skipped all of that and watched your two courses React for the rest of us and wordpress for beginners. Honestly, you create great pragmatic courses. Bravo!

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

      Thank you so much! I'm glad the courses are helpful.

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

      @Bart Zumba ok hahaha you are right, there are somethings I couldn't have skipped. Maybe because of my education I found this course so inspiring. I am launching three startups off the back of these two courses.

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

      That's a hell of a resume/history and an even better recommendation. Sub'd... Ok, had to pause and edit. "Sponsored by me", seriously, that, was some gangster shit right there. HUGE thumbs up, just for the way you structured that! Next, sharing the codepen. I'm not a newb, but, I haven't coded html since we used tables (yeah, that's hilarious right?) and I'm working all the html tags, etc.. and diving into css. Sharing the index, and css, allows me to have a meaningful experience here and the finished too is great, but I'm a guy that wants to "do it myself". So? I can grab the index, the css, and drop it onto my local Apache and, have a blast. VERY, VERY, VERY NICE. THANK YOU!

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

    Grids made CSS more creative and flexible than before. Thanks Brad for making it easy to learn.

  •  3 ปีที่แล้ว +5

    I've never bored during the video. You've given what exactly a developer wants to see from the video. That was absolutely clear. I've bought 2 courses.

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

    Thank you Brad, following your React, Git workflow courses on Udemy , and your TH-cam is the primary reason I got a Frontend job.

  • @env.pogled4137
    @env.pogled4137 3 ปีที่แล้ว

    There could be only one(en) Brad Schiff - A Master of coding.

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

    Fore sure this is the best video in TH-cam explaining CSS Grid. THANK YOU !!

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

    Wow, impressive. Best 40 minutes ever. I wish this was my first video on css grid. Amazing course. Thank you.

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

    you explain things in such simple ways, and clarified things that we usually get confused with. thank you so much... even i have watched 1 whole year of tutorial, i am still learning things from here.

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

    After seeing your 2016 video on flex boxes, I jumped into looking for the video on Grid. Believe me, I had so much joy. Like real joy. More joy is even coming looking at my right hand side seeing a video that combines both flexbox and css.
    Much love.

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

    the best teacher in internet, thank you very much

  • @Digmen1
    @Digmen1 หลายเดือนก่อน

    Wow, I am teaching myself HTML5 and CSS and grid, and this video popped up in my feed.
    I really liked the way you told us what you will be covering, I waste so much time on videos with a click bait tiles, and then they don't deliver, or you cant read or see or hear the code

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

    I am thrilled to see you. Thank you very much for giving me your time via youtube.

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

    I came here after your JS tutorials. Im glad I finally found your channel. I wish I had found your channel a year ago. Thank you Brad.
    ex - Adding more keywords to the title will help lot of viewers to find your tutorials.

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

      I'm glad the JS videos were helpful! I'm more than open to any keyword/title suggestions; marketing / SEO is definitely not my specialty.

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

    I just completed your video tutorial after purchasing your udemy course and it's well worth the expense and time. You've done an excellent job articulating the details of the various properties and functions. I'm a Visual Studio/Core developer and incorporating CSS Grid into pages gives a powerful and time savings development process.

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

    Precisely and pleasantly in 40 minutes literally everything is nicely explained about CSS Grid. We all know more or less about CSS Grid, but after this great video I definitely reduce the use of "margins" to a minimum (the famous margins "pushing" of content 🥵) .

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

    Best Grid explanation I've watched.

  • @daviddwq4513
    @daviddwq4513 11 หลายเดือนก่อน

    2 year ago and this tut still being so great. And thank so much for Rachel Andrew recommendation! She is the best on CSS grid!

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

    The BEST video to understanding CSS-GRID

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

    Great tips and great explanations!! You've taught me more in 40 minutes than my professor in 40 hours

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

    Thank you so much for this video! Just started coding and have watched many videos on grid. Not one explained every single line of code the way that you do. Thanks for explaining like I'm 5!

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

      You're welcome! I learn the best when people explain things like I'm five, so that's how I try to make most of my videos.

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

    You have become my favourite coding tutor. Your course on Udemy helped me get started with Javascript after years of trying to understand the language. I'm going back to purchase your React tutorial.

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

      I'm glad the videos are helpful! Thank you so much for the support.

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

    After watching this, Grid is so Freaking Simple To Me.
    Thanks for explaining. And She looks pumped up. Good to see her after a long time. 🤗🤩

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

    I'm not a designer and web developer but I watched your video just enhance my knowledge and skills both.

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

    The cat making an experience made this an even more enjoyable video.

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

    Wow... truly award-winning tutorial here. Presentation is just spot on. Thank you! Learned a lot!! (had to do it 2-3 times)

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

    Brad thanks for this video. I already purchased many of your courses on Udemy. I learnt all my basic HTML skills from your tutorials.

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

    Brad, I'm so pumped that you're back. I completed your Full-stack from scratch course, last month, and it was awesome (landed a project thanks to that!). I just purchased 4 of your other courses. Keep it up!

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

      Congrats on the project! Thanks so much for the support.

  • @jayneclifford-greening1886
    @jayneclifford-greening1886 3 ปีที่แล้ว +1

    Thanks Brad. I am on my 2nd Brad course "Becoming a WordPress Developer" - always clear.

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

    Brad, I just had to reach out to you and thank you for your personableness in your instruction style. You make the learning experience painless and pleasant; your cat is a bonus! You're a true gem.

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

    Excellent, just what the doctor ordered.

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

    amazing work
    I find myself coming back to this video again and again

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

    Excellent way of explaining important CSS concepts in very simple and enjoyable way. Thanks

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

    Sir you are great 👍. I love your content please keep it up. We need developer’s like you. Lots of love ❤️ from India 🇮🇳.
    Once again thanks a lot Sir :))))

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

    with your beautiful explanation, we always got the idea!

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

    Thanks, Brad, always looking forward.

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

    I came right after looking your flexbox video. Amazing work. Im very confident now into making any kind of layout with what you taught in your videos. Thanks very much for sharing your knowledge

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

    Haha, this is one of the most impressive things I've ever seen. Thanks for the great tut!!! Should call this the "No More Tears" method! ^_^

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

    Bro your style of teaching is just amazing, thanks a lot ✌️

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

    Thank you very much for that in-detail overview of grids! I found it just in time before I have to start to modernize a late 90s website (still on a table based layout).

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

    Best explanation Brad, looking forward to more of Web Dev. Applause !!!!

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

    Thanks Brad, I just learn a lot, your tutorial just help me to be a better frontend dev 😊👍👍👍

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

    Man this tutorial made me like css! Thank you so much, amazing explanation!

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

    thank you very much.I just learn a lot and I've never bored during the video

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

    Always coming up with great Content. Please keep them rolling.

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

    When I saw it was you who made the video I wanted to take a look thinking you'll probably go over something I may not have known... "auto-fit, minmax", display grid inside of the element... nice. : ) As always thanks.
    Got your Udemy JS course... make more of those!
    Best.

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

    Brad the best teacher 👌

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

    Thank you for this video! I watched the whole video and was able to follow along in VS Code and make a similar design.

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

    Always a banger 🦾🧨

  • @rukasu-se
    @rukasu-se 3 ปีที่แล้ว +2

    With the end of ie11 getting close, I'm finally dipping my toes into css grid. Glad I choose this tutorial !
    Also, am I the only one doing a little dance in those snazzy section transitions ? haha

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

    Thank you so much you have saved me so much time looking for answers.

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

    HE'S BACK !!!!

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

    I love the way you teach and I am currently studying your WordpPress for Developers course.
    But "just to stay organized" I drop a line from time to time to brush up AND learn a few new things in CSS, HTML and JS.
    You can call this variable anything you want, like "Unicorn" or "Pizza" I like to think you have a gift for teaching and explaining complex concepts.
    I wholeheartedly recommend anybody to comment, like, subscribe and to take your courses on Udemy, an NO, this is not a paid advert.
    Thank you Brad, I will keep coming back to your videos, both free and full-fledged paid courses.
    "It should be a lot of fun, let's keep things rollin' and I'll see you in the next lesson."
    Cheers mate, great work.

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

    great examples, thank you Sir, you are an excellent teacher.

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

    Wow what a great tutorial, many thanks Brad.

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

    I loved it man ! You're really helping me to understand web development.

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

    Hi Brad,
    What a great video! I have been trying to build some great designs as well, and I watched a lot of tutorials for the same. Your videos are among the best, and I am so glad that you decided to cover this topic. It was a great watch, and I learned a lot about this amazing process. I will be following this, and hopefully, I can get similar results. Thanks a lot for sharing this helpful resource, it was a great watch. Looking forward to watching more amazing videos from you.

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

    You are very good at explaining things, good job!

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

    Thank you. You are a good teacher.

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

    to center the "hello" text you could aslo use place-items:center; or place-content:center; or place-self:center;

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

    amazing tutorial for CSS grid with great examples

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

    Brad you're snakatmochan... really want to learn this grid system but don't want to watch lendi lectures thanks for keep it small and easy...

  • @Dima-Teplov
    @Dima-Teplov 2 ปีที่แล้ว

    An amazing video about the amazing tool! Thank you very much!

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

    You're a great teacher, thank you!!!

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

    Damn your are awesome. The content is amazing. God bless u.

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

    Simply excellent tutorial. Thank you so much

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

    Thank you for a new important topic.

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

    luv ur video very informative and luv ur delivery the english is very clear gr8 diction

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

    great tut! I'm not new with grid but didn't know about overlapping items, I will stop using absolute position now hahaha

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

    wery good tutorial!!!! Liked it, and subscribed! Greetings from Italy.

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

    super awesome video. Loved to watch it ;)

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

    Hey Brad Though I already familiar with grid, I am watching this video for her :)

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

    Thank you so much, you touched on the main p. You the Best mhen

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

    Great explanation!

  • @dineshyd
    @dineshyd 7 หลายเดือนก่อน

    Simply awesome..!

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

    Excellent as always 👌

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

    You are a teacher

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

    always learn a lot from ur videos u r awesome

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

    Very well explained

  • @alex-desroches
    @alex-desroches 3 ปีที่แล้ว

    thank you Brad

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

    Great stuff brother....🇮🇳

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

    This is gold!

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

    Great explanation on grid 👍. It really helped me to understand the concepts clearly...
    Can you please tell me which browser you are using??

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

    Such an awesome video. Is there any TH-camr like him, but in Laravel? I want to learn more about Laravel also...
    thank you

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

    Very nice tutorial video
    Thank You sir

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

    I liked, subscribed and bougth Wordpress course.

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

    grate implementation of grid system

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

    Excellent Brad , love it ,
    Just wanted to know what you have planned about TH-cam ? Is there any series coming or just random videos?

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

      Thanks. Probably just random videos for a while, but I'm open to another series at some point. Any topics you've been really interested in lately?

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

      @@LearnWebCode there are many but most important Redux , and being a professional cover topics that new developer should focus on and best practices in industry

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

    always the best

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

    This video is rad 👍🏻👍🏻👍🏻

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

    I would love if you create an extension of the Becoming a Wordpress Developer explaining the CSS portion. You mentioned in that course that the css portion was a separste subject. That css design from that couse is really outstanding

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

      Thanks! I'm working on converting the CSS for that course from PostCSS to Sass (so we can easily use the official WordPress automation package) so maybe that would be a good time to also explain some of the css / design.

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

      What about converting Udemy Wordpress course from jQuery to ES6?

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

    This is one of the best Grid Explanation Thank you Sir
    Also I had one doubt if we had layout like
    "aside main"
    "aside main"
    "aside main"
    and in main section we want to render a div(each main to div
    )
    we can do it in grid also with grid-area
    but how to add dynamically another div using react?
    so that the final output be like
    "aside main"
    "aside main"
    "aside main"
    "aside main"

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

    Thank you.

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

    Want more from you Brad keep appearing short intervals.

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

      Thanks, I'm definitely not going on another 6 month break just yet; I have 3 more outlines for TH-cam videos I'm going to start creating in the next week or so. Finishing up some big Udemy updates this week.

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

      @@LearnWebCode wow that's great waiting eagerly for it

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

    Another great video! Love how you say how to remember the difference between align versus justify! That has always been confusing to me as well until now!

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

    Hi one question which software you are using for screenshot and for marking the webpages?

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

    awesome