CSS Grid Tutorial #10 - Responsive Grid Example

Поділитися
Вставка
  • Опубліковано 3 лют 2025

КОМЕНТАРІ • 383

  • @Heshammehrem
    @Heshammehrem 7 років тому +250

    I really can't believe that there's a man on earth who decide to share all this amazing knowledge with public for nothing. You're really the nicest kindest best one ever and I can't really be more grateful. Your work and effort is priceless.
    Thanks very much sir. God bless your heart :))))

    • @yanivsalman9685
      @yanivsalman9685 7 років тому +1

      wel.. after 20,000 you can make a really good money.. and after 100,000 even more.

    • @nesrinelach9931
      @nesrinelach9931 6 років тому +12

      @@yanivsalman9685 but he could try to do some stupid videos like reacting on a music video and pretend to be wowed by the content too easy to fool people and get maximum of subscribers and vewis but he preferred to share with us his own knowledge and experience in a very nice and clean way and for free ! ...

    • @mohammadurgur953
      @mohammadurgur953 5 років тому +1

      Thank you :)
      Mr/narcistic

  • @MarkySky
    @MarkySky 9 місяців тому +4

    Even though this tutorial is 6years ago, it is still applicable up to this day. Thank you Shaun for this another amazing work of art tutorial!!

    • @NetNinja
      @NetNinja  9 місяців тому +1

      Ahh, awesome to hear! Glad it was helpful! :) thanks for watching

  • @Ladyhoat
    @Ladyhoat 7 років тому +123

    Number one teacher on youtube :). Thanks Bruh!

  • @osarobostarlite7596
    @osarobostarlite7596 3 місяці тому +1

    i just finnished watching and practicing everything in this series, all i have to say is that ,you are a blessing to humanity.

    • @NetNinja
      @NetNinja  3 місяці тому

      Thanks for watching :) glad you enjoyed it!

    • @osarobostarlite7596
      @osarobostarlite7596 3 місяці тому

      @@NetNinja "enjoy" is an understatement, i lived it .
      you should consider seeking a patent for this master piece.
      while this series is as flawless as can be, it would be nice if you do another video that explains "grid axis " in reference to what you did in the last video by rotating it on the "z" axis.
      thanks.

  • @himasailagonugunta2758
    @himasailagonugunta2758 11 місяців тому

    thank you, man, from zero knowledge of the grid topic now I am really confident after watching this playlist...

  • @asahifactory
    @asahifactory 4 роки тому +9

    This is wayyyyyy better than many paid courses in udemy. Thank you so much for these awesome tutorials!!

  • @danishtahir85
    @danishtahir85 7 років тому +11

    Within a week , I started out watching your channel and believe me you've taken my skills to whole another level.
    You should be awarded as a topper tutor on UA-cam,
    Two big thumbs up for these great tutorials.

  • @ellsonmds5310
    @ellsonmds5310 5 років тому +1

    I started to watch and sink in this playlist yesterday(tuesday 9 am) and have just finished today(wednesday 1:14 am), a no stopping learning, I'm very happy cuz I learned so much but sad cuz it ended. I recently got fired precisely two weeks ago but I think it was God showing me the way cuz now I'll persue my dream which is to become a web developer and this guy has helped a lot, if I could I'd give you a thousand likes. I really apreciate you sharing this great knowledge of yours my friend. cheers ;)

    • @NetNinja
      @NetNinja  5 років тому

      Thank you, I hope you're finding the courses ok so far :). The same thing happened to me before I started my coding journey, so hopefully it's a sign that you're now on a better path. Don't give up!

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

    wao!! This is much more than i expected. great works here. am actually much more surprised to see that this amazing tutorial was done 5 years back

  • @anesbahaaeddine4655
    @anesbahaaeddine4655 6 місяців тому +1

    For the new ones this basically the best grid tutorial i 've ever witnessed 10/10

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

    For anyone struggling with media queries not triggering in chrome dev tools responsive window, add
    in your

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

    my man, i'm a student at UCLA and you made me understand this stuff better than my professor. I cant thank you enough for all the css tutorials you made for this series. THANK YOU!

  • @bacon37460
    @bacon37460 4 роки тому +4

    You're the best teacher I've never learned from. You're different than the others here in youtube or somewhere else, because you teach us the basic of things. The proof is that this series released on 2017, but it's stil valid now and it will be in the future. Thanks man for the great job you do.

  • @bahtiyarozdere9303
    @bahtiyarozdere9303 6 років тому +22

    The feeling when you find the perfect tutorial

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

    I have learned a lot from tutorials and now I am doing a student portfolio using CSS GRID. Amazing videos and a big Thank you from bottom of my heart. :)

  • @developerGRohit
    @developerGRohit 10 місяців тому

    the only playlist that actually explains the GRID in the simplest manner and such effective examples.

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

    Thanks dude, for so many years I avoided the grid, because I never really understood it. But it's so easy to follow you, that I can finally say, that I somehow got it. I'm really grateful!

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

      That's awesome :) really glad it helped!

  • @Anny-dive
    @Anny-dive 7 місяців тому

    i am usually not one to comment on tutorials. but this css grid tutorial from 1 to 10 really helped me a lot. thank you very much for uploading this. you deserve the world.

    • @NetNinja
      @NetNinja  7 місяців тому +1

      Glad to hear that! :)

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

    I've been following you since the earliest tutorials (HTML, CSS). You're my favorite instructor

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

      Wow, thanks so much for the long term support :) it's much appreciated!

  • @Mach1-9538
    @Mach1-9538 Рік тому

    this series was short sweet and to the point, not full of nonsense (advanced level ) gird stuff. You kept if beginner friendly and I was able to learn the basics so I can advance in my project. Thank you

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

    Yet another amazing tutorial!! And still very relevant today, it has made a huge difference to my approach to my React projects! I have watched and subscribed to many of your fantastic courses, you're always my first port of call whenever I get stuck, on pretty much every topic!! Thank you for the brilliant content, you are a legend :D

  • @The__Gent
    @The__Gent 5 років тому

    I got borderline depressed and I almost quit my goal toward becoming a web developer due to the horrendous and frustrating vanilla CSS alignments, crock of floats, etc, etc...then I saw this tutorial and changed my life more than you know. Thank you Net Ninja.

  • @nice-vf4rj
    @nice-vf4rj Рік тому

    Just finished this tutorial 6 years later. Thanks Shaun, you are the best!

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

      No worries! :) thanks for watching

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

    I'm gonna start my last css-grid tutorial now. Before, thanks for this amazing tutorials that you have prepared. I'm very confident handling css-grid now after learning from you.

  • @kishorebabumadasu4235
    @kishorebabumadasu4235 5 років тому

    Without being aware your course on NetNinja, I have unnecessarily purchased different CSS Grid courses from different places, which are total waste of time and money. You are a person with real knowledge on subject and talent. Thanks your generosity in sharing your valuable knowledge to us and helping us in understanding these in most interesting, simple, easy and efficient way.

    • @NetNinja
      @NetNinja  5 років тому

      Thanks Kishore, really appreciate it! :)

  • @junotrazakarison2003
    @junotrazakarison2003 6 місяців тому

    Now, I understand why I need grid in building websites. I'm gonna apply these to build things. Thanks a lot for the priceless information. You are awesome.

  • @jfrost-h
    @jfrost-h 4 роки тому

    All amazing videos. Someone who actually doesn’t over complicate things. Brilliant.

  • @gusnwosu
    @gusnwosu 5 років тому +12

    I know you already know this: YOU ARE AWESOME!!

  • @phild1537
    @phild1537 6 років тому

    I see all your videos about css grid. You repeat every time "awasome" about these css grid ! Yes it is ! But AWASOME IS YOU !!! Great Teatcher ! Thanks a LOT !!!!

  • @bostongreen1629
    @bostongreen1629 6 років тому

    Really the best Grid tutos on the web so far

  • @phizit0
    @phizit0 4 роки тому

    I'm so glad that I found your series on CSS Grids! Thank you so much! I have been stuck on these grid layouts for 2.5 days and now it just clicks. Liked and Subbed

  • @Yash-cu4gq
    @Yash-cu4gq 4 роки тому +3

    You nailed it. I really like this entire playlist. Now, I understand Grid Concept perfectly because of you. Thanks Net Ninja🤗

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

    I have been following you recently and you are by far the best at explaining things. Your tutorials are fun and straightforward. Thanks so much, Shaun - Greetings from NYC

  • @careless_winner
    @careless_winner 5 років тому +1

    If there was a trophy for clarity of speech, your name would be on it, without a doubt.👑
    Thanks so much for the tutorial😭.

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

    Hi Shawn your tutorials are extremely helpful! Love your teaching style! I've been binge watching your tutorials from both your UA-cam channel and your courses the last few days- Extremely helpful! Thanks!

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

      Thank you Melissa! :)

  • @indianlongboarder2844
    @indianlongboarder2844 4 роки тому

    this man teaches how to run a marathon just by teaching us to walk.
    and his flow. hats off he still has not figured our he spelt "grid-template columns" wrong

  • @ahmadalharbi9097
    @ahmadalharbi9097 4 роки тому

    Shaun makes the complex subject so simple .. thank you so much

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

    Thank you very much for the series. It was very easy to understand all the concepts, and now I really see the worth to use it in my further projects. Truly amazing teacher and the course.

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

    Thank You soooo much Net Ninja for all your wonderful tutorials - I've been trying to master responsive web design forever and a day, and now, with your well structure tuts I think... hope I've got it eventually!

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

    Thanks a zillion for this amazing series, god bless you. I really liked your way of teaching by breaking down each of the concepts in smaller chunks. You're simply awesome. Keep rocking.

  • @tesoi8057
    @tesoi8057 4 роки тому

    It is the year 2020, and this video is very relevant to my progress in learning how to design websites! Many thanks!

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

    thank you a lot for this tutorial ,
    I was having problems with the responsive design and flexbox but with this tutorial everything look so clear! I´m loving now CSS Grid!.

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

    That was a great series and a great way to end it showing us how to format for different screen sizes! Thank you!

  • @GabrielSantos-gp9yw
    @GabrielSantos-gp9yw 4 роки тому

    You are the greatest professor I've ever had about those subjects!

  • @jkmorbo
    @jkmorbo 6 років тому

    You are THE BEST. You couldn't have made it simpler and easier to understand. Thank you so much. You deserve way more subs!

  • @sst8872
    @sst8872 6 років тому

    You are so humble as ever. I've learned so much from your lectures. Thank you so much.

  • @zzej
    @zzej 5 років тому

    the most underrated video in the history of css great stuff

  • @rostyslavklyba1746
    @rostyslavklyba1746 4 роки тому

    I've just completed the last video in this series. Thanks a lot for these tutorials, they are of very high quality.

  • @CBL41N3Y
    @CBL41N3Y 7 років тому

    Just watched your 10 video series on CSS Grids. Just want to say thank you so much. I have subscribed and am looking forward to many more of your videos.

  • @marheygarcia1290
    @marheygarcia1290 7 років тому +3

    Blessed with two final lessons in the end! Thank you!

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

    Stumbled on this series looking for info on CSS as I'm learning it. Wish I could give +100 likes. Excellent organization of information and clear presentation. Watch at 1.25 and it's just about perfect. Will check out more of your tutorials. Subscribed.

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

      Awesome, thank you! :)

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

    Yo baby completed this course too 🥂

  • @Nilkamalsha75
    @Nilkamalsha75 4 роки тому +1

    I have really enjoyed. How someone can explain css grid so easily

  • @mafzalch
    @mafzalch 4 роки тому

    Amazing work! u r the best teacher and the KINDEST human on UA-cam, Udemy and EARTH. Thank You!

  • @ventsislavstoimenov4404
    @ventsislavstoimenov4404 4 роки тому

    Man, Thank you very very much for this tutorial! So well explained in 10 x 5 min lessons... Unbelievable!

  • @AdolfoBarreto75
    @AdolfoBarreto75 6 років тому +2

    Thank you! Your tutorials are incredibly concise and complete.

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

    Enjoyed the series. I would point out you could remove everything in the media query except the areas change, so as not to repeat the code.

  • @anuragtiwari6659
    @anuragtiwari6659 7 років тому

    Thanks for existing into the world...now that i have watched your series ,I am going into your playlist to find more awesomeness..

  • @malcolmcolindixon
    @malcolmcolindixon 4 роки тому

    Thanks again Shaun, these tutorials just get better and better. Not going to bother with the flexbox one though after doing this as CSS Grid seems sufficient to me.

  • @steven7293
    @steven7293 7 років тому +55

    I would be so grateful if you could show us a simple practical/real website using the Grid Layout! I have a hard time working with what would be real elements and not just simple boxes like in the videos.

    • @islamsaid5082
      @islamsaid5082 7 років тому +2

      yea please bro do that

    • @EsEChanel
      @EsEChanel 7 років тому +1

      Let try to watch before videos....html-CSS and JavaScript....you'll understand easily!!!

    • @Kozi03
      @Kozi03 7 років тому +2

      Yeah that would be great, I'm curious how you adapt a lading page to this with also a nav going across the top.

    • @Heshammehrem
      @Heshammehrem 7 років тому +4

      bro I am sure your question has been answered in his previous playlists.
      those playlist worth more than 1 million dollars indeed.if you could see them,you'd understand everything.

  • @ralphbaines3731
    @ralphbaines3731 4 роки тому

    This is just the job. I have been trying all sorts of layout techniques for a webapp and getting strange results. This makes it really simple. Thanks

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

    "Great Job" again NN. Following the Lessons GitHub is so easy. Thanks for all your hard work.

  • @nicoletang1834
    @nicoletang1834 6 років тому

    You are the best programming teacher on UA-cam!!

    • @NetNinja
      @NetNinja  6 років тому

      Thanks so much :)

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

    One of the best tutorials I’ve seen. Thanks.
    I was wondering though why the last two tutorial worked out well, having misspelled “grid” with “gird”.

  • @ZizahMarouane
    @ZizahMarouane 7 років тому

    man your tutorials are the best
    short and simple
    just the way it should be
    thanks !

  • @mnsko-qs3vl
    @mnsko-qs3vl Рік тому

    This tutorial is a masterpiece! Everything is so well-explained and easily understood. Thanks a lot man!

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

      You're very welcome! :) glad it helped

  • @BrianMoralesMarshall
    @BrianMoralesMarshall 9 місяців тому

    This series is so well structured and explained! Thank you!

    • @NetNinja
      @NetNinja  9 місяців тому

      Glad it was helpful! :) thanks for watching

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

    Gone through the series and finished today, finally understand it, thank you!

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

      That's awesome :) thanks for watching!

  • @jj29180
    @jj29180 4 роки тому

    Once again, I am impressed, how well you can explain things. Great work, please keep it up! Thanks

  • @RobertoJ3rd
    @RobertoJ3rd 4 роки тому

    Thanks so much, Ninja sensei! Learnt so much from your Grid tutorials and also how to correct my mistakes when things aren't working. Amazing what havoc a missing period, semi-colon or curly bracket, etc can cause....

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

    You made my learning journey much easier ! THANK YOU SO MUCH.

  • @iandsouza9392
    @iandsouza9392 6 років тому

    Best Series on Grid Layout!! You have made everything extremely simple. Thank you !! God bless

  • @effuseakay
    @effuseakay 5 років тому +1

    Hi Shaun, I watched the whole series and I learned a lot!
    Thank you so much!

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

    How could anyone dislike this video? It's a great video series!

  • @feyselahmed4581
    @feyselahmed4581 11 місяців тому

    May God bless your voice, your hand, generally you. This's miraculous!

    • @NetNinja
      @NetNinja  11 місяців тому

      Thanks, that means a lot :)

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

    Thank you very much for the great tutorial on CSS Grid. I is fast, clear and better than all the books I purchased which full of redundant text.

  • @typingmasterpro6762
    @typingmasterpro6762 4 роки тому

    Mate, I love to say you that you have some amazing quality to demonstrate something, and this "freaking awesome". I have said your quote freaking awesome. LoL. Salute boss. Surely learn a lot from this tutorial and this is one of the quality content that worth spending time for. God bless you bro!!!

  • @kiliusz
    @kiliusz 6 років тому +3

    After your videos things are "automagically" easy :) Keep it up. Thanks.

  • @HassanAli-sd4uj
    @HassanAli-sd4uj 4 роки тому

    thanks man for that lovely playlist , i learn a lot of things
    wish you the best from all my heart

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

    Its so amazing to come across net ninja this is the best tutor. thanks for making it free for all to watch and learn what a kind and golden heart.🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰

  • @revillsimon
    @revillsimon 6 років тому +2

    I've watched all 10 videos in this series and it was really well presented and easy to understand. Easily the best CSS Grid tutorial I've seen so far. Thanks for taking the time to make all the videos! I'm now wondering (as a beginner web developer) whether I should even bother learning Bootstrap , when clearly this option is far cleaner and simpler to implement...? Thanks again!

  • @tunoiredaot
    @tunoiredaot 7 років тому

    Fantastic work. I started watching the series and couldn't stop. Thank you so much

    • @NetNinja
      @NetNinja  7 років тому

      Thanks so much, glad you liked it :)

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

    this dude is a certified legend,u are an amazing teacher

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

      Thanks for your support Hadi :)

  • @MoeNegm
    @MoeNegm 6 років тому +1

    Honestly dude, you more than earned my subscription. Thank you!

  • @craigpereira9732
    @craigpereira9732 4 роки тому +1

    This is soo cool, My mind has been blown, Thank you soo much, Shaun.

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

    This tutorial is freaking awesome. I am so impressed.

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

    Shaun, you are in a word: AWESOME!!!

  • @Pareshbpatel
    @Pareshbpatel 9 місяців тому

    Responsive CSS Grid Areas, beautifully and succintly explained. Thanks, Shaun
    I have to say, even though this course was first published in 2017, it is still relevant in 2024! - I only wish I had come across it earlier.
    {2024-04-25}

  • @Shakeel714
    @Shakeel714 4 роки тому

    Thanks Shaun for your wonderful tutorial series. Awesome!

  • @khanfaizan05
    @khanfaizan05 11 місяців тому

    Amazing series.. i am so grateful by watching your videos i learned so much.
    I cannot thank you . enough.
    Bless you. Ninja master.🎉🎉

  • @ismahenelarbi7386
    @ismahenelarbi7386 6 років тому

    Thank you so much for the quality content you put out! I hate CSS and you made learning it effortless and rewarding.

  • @apurvvann
    @apurvvann 6 років тому

    Brilliant Series Shaun. Simply top notch.

  • @danielalexis2141
    @danielalexis2141 6 років тому

    Awesome series bro! Keep it up. I've seen some video tutorials on css grid and yours made me learn about how fraction and auto row/columns work. Excellent overall!

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

    Best teacher on this planet ❤️

  • @ashwind4589
    @ashwind4589 5 місяців тому

    Thank you so much for giving this wonderful course, I feel like I have gained enough knowledge in Grid.

    • @NetNinja
      @NetNinja  5 місяців тому +1

      Glad it was helpful! :) thanks for watching ash

  • @zjelco
    @zjelco 6 років тому

    This helped me so much, keep on doing what you do bro. Best teacher so far!

  • @katalinhorvath3191
    @katalinhorvath3191 4 роки тому

    No matter which tutorial I watch, everything is just fantastic!
    Short form:
    .shaun {
    tutorialAll: perfect;
    }
    Ps .: Thank you!

  • @bigcountry2020
    @bigcountry2020 6 років тому

    Great tutorial, the best I've seen on UA-cam yet.

  • @anmolkumarshah
    @anmolkumarshah 5 років тому

    Very good series, very helpful and all that for free on UA-cam
    thanks sir.. for sharing such knowledge with us
    love from India

  • @aaronr1v3r
    @aaronr1v3r 6 років тому

    Thanks very much for this video series. It helped me to pretty much ace my practical test during a job interview yesterday. Please release more videos. :p