CSS Grid Tutorial: Responsive Design Examples

Поділитися
Вставка
  • Опубліковано 22 лис 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!

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

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

  • @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 2 роки тому

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

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

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

  • @jagadeeshkumar2091
    @jagadeeshkumar2091 3 роки тому +5

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

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

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

  • @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 UA-cam explaining CSS Grid. THANK YOU !!

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

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

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

    The BEST video to understanding CSS-GRID

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

    the best teacher in internet, thank you very much

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

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

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

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

    Best Grid explanation I've watched.

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

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

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

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

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

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

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

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

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

  • @jayneclifford-greening1886
    @jayneclifford-greening1886 3 роки тому +1

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

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

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

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

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

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

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

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

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

  • @potrosanjuan
    @potrosanjuan 3 роки тому +9

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

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

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

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

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

    Thanks, Brad, always looking forward.

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

    Brad the best teacher 👌

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Thank you. You are a good teacher.

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

    HE'S BACK !!!!

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

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

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

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

    Always a banger 🦾🧨

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

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

    amazing tutorial for CSS grid with great examples

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

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

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

    Wow what a great tutorial, many thanks Brad.

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

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

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

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

    Thank you for a new important topic.

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

    You are very good at explaining things, good job!

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

    Simply excellent tutorial. Thank you so much

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

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

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

  • @Dima-Teplov
    @Dima-Teplov 2 роки тому

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

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

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

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

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

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

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

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

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

    Very well explained

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

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

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

    always learn a lot from ur videos u r awesome

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

    Great explanation!

  • @alex-desroches
    @alex-desroches 3 роки тому

    thank you Brad

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

    grate implementation of grid system

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

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

    Very nice tutorial video
    Thank You sir

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

    I liked, subscribed and bougth Wordpress course.

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

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

    You are a teacher

  • @dineshyd
    @dineshyd 7 місяців тому

    Simply awesome..!

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

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

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

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

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

    This is gold!

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

    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  2 роки тому +1

      I think because I made the first chapter or so available here on UA-cam 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 UA-cam: ua-cam.com/play/PLpcSpRrAaOaoIqHQddZOdbRrzr5dJtgSs.html

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

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

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

    Excellent as always 👌

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

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

    Great stuff brother....🇮🇳

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

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

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

    super awesome video. Loved to watch it ;)

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

    Thank you.

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

    always the best

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

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

    Hi! First, I really enjoyed the video! However, as I was going through CodePen follow along, I noticed that div for sidebar was incorrectly placed inside of div for main. You may want to fix this in the code pen :) Thank you!