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...
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.
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.
You're such an excellent teacher, Shaun. I've learnt so much from your tutorials.
He's the best teacher for me :)
this is exactly what I was looking for thank you. BTW I learned node js and react js from your videos. cheers man.
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!
Love your videos. They are always helpful and intuitive
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!
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.
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
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
damn dude... you explained it so well.. you cleared all of my doubts in one vid... thankyou so much
Best as always,
thanks Shaun
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! 😁
thank you man, your are the best teacher
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?
Wollah!! 😍😍 I'm waaay excited.
Damn! You made it so simple to understand. Really appreciate your hardwork.
Thanks Ranvir
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
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
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.
I got you from some where in Africa.
God bless you bro.
I love your videos, I learn so much
you are my role model
Thank you Shaun :)
Love you bro
now I found the best tutorial on grid ❣
Hope it's helpful! :)
thanks a lot for this tutorial
Thank you so much, Shaun.
You're very welcome! :)
Thankyou Ninja
Thank you very very very very very very very very very much! :)
Hey! love your videos !!!!! is there any chance next series can be about JavaScript ? would really appreciate it
you're the best !
Does this guy know everything?! 💯
Thanks!
excellent
You are a Super Teacher! Can you make a course for React with Redux/Context and Typescript?
cool video)
Awesome!!! TQVM!!
Thanks for watching! :)
nice one
also please create this series with flexbox and thank you for your great videos
Are you going to talk about the new sub grid feature?
Total tutorial/playlist duration => 2h12m14s
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 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
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 Shaun, will the Stripe Playlist be available soon?
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
Thank. Very nice. But what I don't understand is, is where I put the text into the cells
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
good
the github is empty btw
5:39 Please, where I can find the files on GitHub?
On your site, how current the courses are ?
🥳
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
8:00
4:11
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! :)