CSS Grid Tutorial: Responsive Design Examples

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

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

  • @MirkoMancini
    @MirkoMancini 3 года назад +26

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

  • @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!

  • @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.

  • @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 3 года назад +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!

  • @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.

  •  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 RUclips is the primary reason I got a Frontend job.

  • @joelfrojmowicz
    @joelfrojmowicz 2 года назад

    Fore sure this is the best video in RUclips explaining CSS Grid. THANK YOU !!

  • @NotPastelDreams
    @NotPastelDreams 3 года назад +3

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

  • @TruthHurts492
    @TruthHurts492 3 года назад +3

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

  • @patientson
    @patientson 3 года назад +2

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

  • @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.

  • @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.

  • @potrosanjuan
    @potrosanjuan 3 года назад +9

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

  • @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.

  • @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)

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

    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

  • @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 🥵) .

  • @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.

  • @peterloader974
    @peterloader974 3 года назад +1

    Best Grid explanation I've watched.

  • @thomasbono4269
    @thomasbono4269 3 года назад

    The BEST video to understanding CSS-GRID

  • @tisolucoes5023
    @tisolucoes5023 2 года назад

    the best teacher in internet, thank you very much

  • @yinonelbaz5309
    @yinonelbaz5309 2 года назад

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

  • @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. 🤗🤩

  • @env.pogled4137
    @env.pogled4137 3 года назад

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

  • @tonywatson4416
    @tonywatson4416 3 года назад

    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.

  • @daviddwq4513
    @daviddwq4513 Год назад

    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!

  • @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.

  • @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.

  • @virendrabhati6685
    @virendrabhati6685 3 года назад

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

  • @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.

  • @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).

  • @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! ^_^

  • @jayneclifford-greening1886
    @jayneclifford-greening1886 3 года назад +1

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

  • @flichi2008a
    @flichi2008a 2 года назад

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

  • @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.

  • @iali3903
    @iali3903 3 года назад +2

    with your beautiful explanation, we always got the idea!

  • @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

  • @kamalahajiyeva190
    @kamalahajiyeva190 3 года назад

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

  • @Epikht
    @Epikht 2 года назад

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

  • @shreyasharma5744
    @shreyasharma5744 3 года назад +1

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

  • @muslimahmood
    @muslimahmood 3 года назад +1

    Thanks, Brad, always looking forward.

  • @monome3038
    @monome3038 2 года назад +1

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

  • @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.

  • @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.

  • @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 :))))

  • @oliviayp
    @oliviayp 3 года назад +2

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

  • @koodingu
    @koodingu 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

  • @kaifahmad4131
    @kaifahmad4131 3 года назад

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

  • @madhuhadas15370
    @madhuhadas15370 Год назад

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

  • @neoliukai
    @neoliukai 3 года назад +2

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

  • @HenokWehibe
    @HenokWehibe 3 года назад

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

  • @mansoorbaig9232
    @mansoorbaig9232 3 года назад

    Excellent, just what the doctor ordered.

  • @johnravi3887
    @johnravi3887 3 года назад

    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.

  • @msvmanikantasrivishnu7788
    @msvmanikantasrivishnu7788 3 года назад

    Brad the best teacher 👌

  • @OstonCodeCypher
    @OstonCodeCypher 3 года назад +1

    Always a banger 🦾🧨

  • @ademyildizcoding
    @ademyildizcoding 3 года назад +1

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

  • @loogie5679
    @loogie5679 3 года назад +2

    HE'S BACK !!!!

  • @djjavvystark5470
    @djjavvystark5470 3 года назад

    Wow what a great tutorial, many thanks Brad.

  • @skillzorskillsson8228
    @skillzorskillsson8228 2 года назад

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

  • @farookahmed4496
    @farookahmed4496 3 года назад +2

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

  • @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

  • @Taufiq714
    @Taufiq714 2 года назад

    Thank you. You are a good teacher.

  • @athleticpantheryt9014
    @athleticpantheryt9014 3 года назад

    amazing tutorial for CSS grid with great examples

  • @lostinspain
    @lostinspain 3 года назад

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

  • @Dima-Teplov
    @Dima-Teplov 2 года назад

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

  • @codewithryan4646
    @codewithryan4646 3 года назад

    You are very good at explaining things, good job!

  • @kavalisuresh8670
    @kavalisuresh8670 3 года назад

    Simply excellent tutorial. Thank you so much

  • @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...

  • @merryorte
    @merryorte 3 года назад

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

  • @saweranabi7786
    @saweranabi7786 3 года назад

    Thank you for a new important topic.

  • @itboardroom5085
    @itboardroom5085 2 года назад

    always learn a lot from ur videos u r awesome

  • @shaderone07
    @shaderone07 3 года назад

    35:57 Hello☻! why was there no line 2 or -2 visible both for the column and row? i tried like grid-column: 2 / 3; , grid-row: 2 / 4; and it worked just fine.

  • @tobilliekisola3407
    @tobilliekisola3407 2 года назад

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

  • @techbd2477
    @techbd2477 3 года назад +1

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

  • @stefangrasbock5884
    @stefangrasbock5884 2 года назад

    super awesome video. Loved to watch it ;)

  • @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?

  • @shrinidhibhat8611
    @shrinidhibhat8611 2 года назад

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

  • @debjyotisarkar9578
    @debjyotisarkar9578 2 года назад

    Great stuff brother....🇮🇳

  • @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!

  • @shaikhmaheen
    @shaikhmaheen 3 года назад

    Excellent as always 👌

  • @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"

  • @chuvanhop9720
    @chuvanhop9720 3 года назад

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

  • @RenanEduardo
    @RenanEduardo 3 года назад

    I liked, subscribed and bougth Wordpress course.

  • @alexandr8151
    @alexandr8151 3 года назад

    Great explanation!

  • @WebDevMastery
    @WebDevMastery 3 года назад +1

    Excellent Brad , love it ,
    Just wanted to know what you have planned about RUclips ? 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

  • @JahinShahriar
    @JahinShahriar 3 года назад

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

  • @RobertMcGovernTarasis
    @RobertMcGovernTarasis 3 года назад

    Thank you. Was interesting. Curious about your JavaScript course but puzzled why only the intro (which was enjoyable) is the only video available to preview.

    • @LearnWebCode
      @LearnWebCode  3 года назад +1

      I think because I made the first chapter or so available here on RUclips I never thought to make more previews available directly on Udemy. The first 12 out of 14 videos in the following playlist are the first chapter or two from the full JS course, available for free here on RUclips: ruclips.net/p/PLpcSpRrAaOaoIqHQddZOdbRrzr5dJtgSs

    • @RobertMcGovernTarasis
      @RobertMcGovernTarasis 3 года назад

      @@LearnWebCode cheers will check that playlist out. Only came across your the other day because RUclips pointed the CSS Grid video out. And had clicked through to Udemy via your site without first seeing your other channel videos 😬

  • @mehboobkhan11028
    @mehboobkhan11028 2 года назад

    Very nice tutorial video
    Thank You sir

  • @neets7519
    @neets7519 3 года назад

    This video is rad 👍🏻👍🏻👍🏻

  • @baasithfazil4316
    @baasithfazil4316 3 года назад

    hello brad. glad to study with your tutorials. In your follow along codepen link, inside those header and sidebar included are different while comparing to your RUclips video. in video those p tags are inside the main div but in codepen repository shows all p tags are inside the sidebar please explain thanks.

    • @LearnWebCode
      @LearnWebCode  3 года назад +1

      Thanks, good catch! I think I moved the paragraphs to live in the sidebar to show that even if the sidebar is taller than the main column the footer will still know to stick to the very bottom of the overall layout.

  • @dineshyd
    @dineshyd 8 месяцев назад

    Simply awesome..!

  • @prabhakarmishra2182
    @prabhakarmishra2182 2 года назад

    Very well explained

  • @thevirtunaut2577
    @thevirtunaut2577 22 дня назад

    this was great. thank you

    • @LearnWebCode
      @LearnWebCode  22 дня назад

      So glad it was helpful, thank you for the sub!

  • @_krishnanshu.saini___2724
    @_krishnanshu.saini___2724 2 года назад

    could anyone tell me to how to get that cursor which measures size..thinking it will be really helpful

  • @devnahid
    @devnahid 3 года назад

    You are a teacher

  • @vimaladeshmukh4017
    @vimaladeshmukh4017 3 года назад

    Thank u for this wonderful video
    Request u to upload a full project using css html and javascript
    Like grocery app or Amazon app
    Thanks once again

  • @punkpadour
    @punkpadour 2 года назад

    This is gold!