Build Layouts with CSS Grid #1 - CSS Grid Basics
HTML-код
- Опубликовано: 16 май 2022
- Hey gang, in this CSS grid tutorial series you'll learn how to create 4 different responsive layouts with CSS Grid as well as a simple 12-column grid system. To begin with in this tutorial, I'll bring you up to speed with the basics of CSS grid.
⭐⭐ Get the full course now (without ads) on the Net Ninja Pro site:
netninja.dev/p/build-layouts-...
⭐⭐ Get access to all free & PREMIUM courses on Net Ninja Pro:
net-ninja-pro.teachable.com/p...
🐱💻 Access the course files on GitHub:
github.com/iamshaunjp/css-gri...
🐱💻 CSS Grid Course:
• CSS Grid Tutorial #1 -...
🐱💻 VS Code - code.visualstudio.com/
🐱💻 Dribbble design used - dribbble.com/shots/6676866-Ph...
Thank you! The most practical way to learn CSS grid through a series of examples. I have been stymied in the past by various tutorials. This series looks like a winner!
I wanna thank you for these videos, they're so helpful and educative.
I hope you continue giving us contents.
You're such an excellent teacher, Shaun. I've learnt so much from your tutorials.
He's the best teacher for me :)
thanks for being so kind bro, i know the basic concepts of grid but i still don't know how to put it in real life scenarios and these series will be so helpful for me. God Bless.
You are a Super Teacher. I was stuck to flexbox but you explained it so well, that I can use Grid in the very next project.
this is exactly what I was looking for thank you. BTW I learned node js and react js from your videos. cheers man.
Bro, the best i have ever seen and learnt. Unlike your previous which were in a rush and so summarized, this one is well planned, defined, structured and explained. Loved every minute. I am doing each video as they are released. This way i finish the course at your speed. Great man. Keep this up. Please do one on Flex in the similar way.
Wow. Its like you can read my mind. Whenever I need something on Webdev, you upload a Playlist on it.
I just re-visited all my CSS. Plus I just saw your lessons on the Form Styling as well.
I you just made my Year a Very Productive one.
Thankyou Shaun.
Watching from Zambia🇿🇲
Thanks Chewela :) big love to Zambia!
but broo y are you so good like damm best youtube coding channel ever
Hey Net Ninja,
I am trying to get into the field via free educational material for the past year.
Just want to say you do an amazing job and help a lot of people with your video series
Many thanks again :)
Thanks so much Andreas. Wishing you luck breaking in to the field :)
You literally saved me, got a new subscriber here dude! keep up with the good work! it was super easy to understand
Thanks, and welcome :)
Best video on Grid system. Thanks!
Thanks Shaun for such wonderful series. much needed to improvise on css grids.
Thanks Sreekanth!
@@NetNinja and also I would request you to do a small series on basics of regex.
very helpful competente, thank you Ninja, i hope in the next series you show us responsive grid for deffrent screen without, using media query, or outside librrary
Superb tutorial! I've learnt a lot of cool things here
This is a refresher I didn't know i needed. Thank you
Aha, glad to hear that Phil :) hope it was useful!
@@NetNinja yes, it was. Thank you
I love how you've included Elden rIng! What build are you using? Can't wait to dive into this new series!
At the minute I’m trying a blood mage with the trusty Rivers of Blood for close range action. Gonna respec for my +1 to a faith build I think! What about you?
Damn! You made it so simple to understand. Really appreciate your hardwork.
Thanks Ranvir
No kidding, this video is so perfectly timed that I can hardly believe it. I was just thinking last night "Oh man I need to watch another tutorial on this topic". xD
Every video is perfectly timed for someone in the world! 😁
damn dude... you explained it so well.. you cleared all of my doubts in one vid... thankyou so much
Best channel for learning this stuff i've come by!
That's very kind, thanks :)
Total tutorial/playlist duration => 2h12m14s
Best as always,
thanks Shaun
Wollah!! 😍😍 I'm waaay excited.
you are my role model
I love your videos, I learn so much
I got you from some where in Africa.
God bless you bro.
now I found the best tutorial on grid ❣
Hope it's helpful! :)
Could you show me how to build a responsive website just using grid and fill the website with navigation, images and text beside images and footer?
Kind of get my head around it but not sure
thanks a lot for this tutorial
I’m not knocking bootstrap, but I really struggled with using it on a previous project, and even resorted to using a no code application to manipulate it. Surely this approach using code you write yourself is better overall?
Thank you Shaun :)
Love you bro
Thank you so much, Shaun.
You're very welcome! :)
5:39 Please, where I can find the files on GitHub?
Hey! love your videos !!!!! is there any chance next series can be about JavaScript ? would really appreciate it
You are a Super Teacher! Can you make a course for React with Redux/Context and Typescript?
Thanks!
Awesome!!! TQVM!!
Thanks for watching! :)
the github is empty btw
Are you going to talk about the new sub grid feature?
Does this guy know everything?! 💯
you're the best !
excellent
Nice tutorial. Thanks for your help. What width would you use for a desktop website and then go down to mobile size. Would the div container need to be set at certain sizes.
Do it the other way around and start with mobile view without media queries and work you way up to other devices browser widths. Using only the min width media queries. Kevin Powell got a few good videos on responsive css.
nice one
cool video)
On your site, how current the courses are ?
Hey Shaun, will the Stripe Playlist be available soon?
Thank. Very nice. But what I don't understand is, is where I put the text into the cells
also please create this series with flexbox and thank you for your great videos
The Live Preview extension by microsoft seems easier to use, opens a tab inside the editor and edits are live without saving
Is there a way you could teach us how to make our own wordpress plugins? like: widgets, header and footer text changer etc.
yeah, i want too
Shaun, a friendly critique: with headphones on I can hear your keyboard in this playlist. I could hear it before somewhat but sounds more pronounced in this one. It doesn't take away from the video for me - but I think you are a perfectionist type that would prefer that not be in there if you knew about it. To me it sounds like you have a sound suppressing keyboard, which makes you hit the keys just a little harder than you would otherwise. Just an FYI! Thank you for your amazing videos!
Nice.. pls make Tut on Angular
Hey Net Ninja can you do a serie just like this one but using the flexbox and trying to recreate the same projetcs ? so that we can get the 2 version of grid system, flex and grid
Thx from France :p
good
9:30 made me laugh. it sounded like hehehe
This video cannot get it to work with the Arrow
what is a 'Lexo"
If you write div*6{$} and enter with emmet it will generate the template for you 😄
@Habeeb Mohamed You're welcome 😄
🥳
4:11
8:00
MDN got ui reboot.
He removed all the git-hub content. If you want to go public for money thats cool, but leave your previous work, the internet is forever, keep it that way
A great introduction to a CSS Grid Tutorial. Thanks, Shaun
{2024-04-24}
🧭
Thank you! 💖
Thanks!
Thanks for your support Cristiano! :)