Build Layouts with CSS Grid #1 - CSS Grid Basics
ฝัง
- เผยแพร่เมื่อ 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...
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 wanna thank you for these videos, they're so helpful and educative.
I hope you continue giving us contents.
but broo y are you so good like damm best youtube coding channel ever
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.
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!
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! 😁
you are my role model
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.
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 :)
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?
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 :)
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
Superb tutorial! I've learnt a lot of cool things here
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
Damn! You made it so simple to understand. Really appreciate your hardwork.
Thanks Ranvir
now I found the best tutorial on grid ❣
Hope it's helpful! :)
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 :)
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.
Best as always,
thanks Shaun
I love your videos, I learn so much
Wollah!! 😍😍 I'm waaay excited.
I got you from some where in Africa.
God bless you bro.
thanks a lot for this tutorial
A great introduction to a CSS Grid Tutorial. Thanks, Shaun
{2024-04-24}
Thank you Shaun :)
Thank you so much, Shaun.
You're very welcome! :)
Does this guy know everything?! 💯
Love you bro
Thanks!
Hey! love your videos !!!!! is there any chance next series can be about JavaScript ? would really appreciate it
you're the best !
Awesome!!! TQVM!!
Thanks for watching! :)
You are a Super Teacher! Can you make a course for React with Redux/Context and Typescript?
excellent
Total tutorial/playlist duration => 2h12m14s
Are you going to talk about the new sub grid feature?
nice one
also please create this series with flexbox and thank you for your great videos
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.
cool video)
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?
Nice.. pls make Tut on Angular
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
Hey Shaun, will the Stripe Playlist be available soon?
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!
the github is empty btw
Thank. Very nice. But what I don't understand is, is where I put the text into the cells
5:39 Please, where I can find the files on GitHub?
good
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
The Live Preview extension by microsoft seems easier to use, opens a tab inside the editor and edits are live without saving
9:30 made me laugh. it sounded like hehehe
🥳
If you write div*6{$} and enter with emmet it will generate the template for you 😄
@Habeeb Mohamed You're welcome 😄
what is a 'Lexo"
This video cannot get it to work with the Arrow
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
🧭
Thank you! 💖
Thanks!
Thanks for your support Cristiano! :)