Build Layouts with CSS Grid #1 - CSS Grid Basics
HTML-код
- Опубликовано: 30 ноя 2024
- 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...
⭐⭐ Get access to all free & PREMIUM courses on Net Ninja Pro:
net-ninja-pro....
🐱💻 Access the course files on GitHub:
github.com/iam...
🐱💻 CSS Grid Course:
• CSS Grid Tutorial #1 -...
🐱💻 VS Code - code.visualstu...
🐱💻 Dribbble design used - dribbble.com/s...
You're such an excellent teacher, Shaun. I've learnt so much from your tutorials.
He's the best teacher for me :)
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 got you from some where in Africa.
God bless you bro.
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!
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.
I have commented previously but commenting again because I am rewatching this whole serious to give myself a quick review. You always need to reiterate, as it is never easy to remember everything 😅 so this is by means a golden treasure of knowledge to keep on coming back to teach yourself infinitely till your last breathe! ❤
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! 😁
I wanna thank you for these videos, they're so helpful and educative.
I hope you continue giving us contents.
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 :)
The best 28:30 min of my life. Thank you very much for the amazing tutorial
Wow, thank you!
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.
you are my role model
Best channel for learning this stuff i've come by!
That's very kind, thanks :)
but broo y are you so good like damm best youtube coding channel ever
damn dude... you explained it so well.. you cleared all of my doubts in one vid... thankyou so much
Best video on Grid system. Thanks!
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
thank you man, your are the best teacher
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.
this is exactly what I was looking for thank you. BTW I learned node js and react js from your videos. cheers man.
Does this guy know everything?! 💯
now I found the best tutorial on grid ❣
Hope it's helpful! :)
Love you bro
Total tutorial/playlist duration => 2h12m14s
Thanks bro
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.
Are you going to talk about the new sub grid feature?
also please create this series with flexbox and thank you for your great videos
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!
Wollah!! 😍😍 I'm waaay excited.
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 :)
Superb tutorial! I've learnt a lot of cool things here
Love your videos. They are always helpful and intuitive
Best as always,
thanks Shaun
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
I love your videos, I learn so much
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
You are a Super Teacher! Can you make a course for React with Redux/Context and Typescript?
Thank. Very nice. But what I don't understand is, is where I put the text into the cells
Thank you so much, Shaun.
You're very welcome! :)
A great introduction to a CSS Grid Tutorial. Thanks, Shaun
{2024-04-24}
The Live Preview extension by microsoft seems easier to use, opens a tab inside the editor and edits are live without saving
If you write div*6{$} and enter with emmet it will generate the template for you 😄
@Habeeb Mohamed You're welcome 😄
the github is empty btw
5:39 Please, where I can find the files on GitHub?
Hey Shaun, will the Stripe Playlist be available soon?
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 :)
Hey! love your videos !!!!! is there any chance next series can be about JavaScript ? would really appreciate it
Thankyou Ninja
Thank you very very very very very very very very very much! :)
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.
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
Nice.. pls make Tut on Angular
you're the best !
On your site, how current the courses are ?
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
Awesome!!! TQVM!!
Thanks for watching! :)
nice one
Thanks!
excellent
9:30 made me laugh. it sounded like hehehe
cool video)
🥳
This video cannot get it to work with the Arrow
good
❤❤
what is a 'Lexo"
MDN got ui reboot.
8:00
4:11
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
🧭
Thank you! 💖
Thanks!
Thanks for your support Cristiano! :)