Build Layouts with CSS Grid #1

Build Layouts with CSS Grid #1 - CSS Grid Basics

Рет қаралды 97,095

Күн бұрын

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...

Пікірлер: 92

@marioashok8419 2 жыл бұрын

You're such an excellent teacher, Shaun. I've learnt so much from your tutorials.

@cappuccinotiramisu2594 2 жыл бұрын

He's the best teacher for me :)

@chewelanthani432 2 жыл бұрын

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🇿🇲

@NetNinja 2 жыл бұрын

Thanks Chewela :) big love to Zambia!

@goatcheeta 9 ай бұрын

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!

@chukwudobemicah7015 Жыл бұрын

I wanna thank you for these videos, they're so helpful and educative. I hope you continue giving us contents.

@andidaffaliefalza 2 жыл бұрын

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.

@kopilkaiser8991 28 күн бұрын

Love your videos. They are always helpful and intuitive

@veniplex 2 жыл бұрын

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

@codernerd7076 2 жыл бұрын

Every video is perfectly timed for someone in the world! 😁

@andreasgkizis2135 2 жыл бұрын

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 :)

@NetNinja 2 жыл бұрын

Thanks so much Andreas. Wishing you luck breaking in to the field :)

@user-yk3ds2ur9p 3 ай бұрын

but broo y are you so good like damm best youtube coding channel ever

@usmanahmed7705 2 жыл бұрын

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.

@truthteachers 2 жыл бұрын

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.

@youdahegebremariam6999 2 жыл бұрын

this is exactly what I was looking for thank you. BTW I learned node js and react js from your videos. cheers man.

@ranvirsingh3295 2 жыл бұрын

Damn! You made it so simple to understand. Really appreciate your hardwork.

@NetNinja 2 жыл бұрын

Thanks Ranvir

@OpenCode 2 жыл бұрын

you are my role model

@artisanbeats 2 жыл бұрын

Best channel for learning this stuff i've come by!

@NetNinja 2 жыл бұрын

That's very kind, thanks :)

@mumix339 Ай бұрын

thank you man, your are the best teacher

@itzfinners7458 2 жыл бұрын

I love how you've included Elden rIng! What build are you using? Can't wait to dive into this new series!

@NetNinja 2 жыл бұрын

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?

@avshreeanurag1010 Жыл бұрын

Best video on Grid system. Thanks!

@nawabsufiyan8014 9 ай бұрын

damn dude... you explained it so well.. you cleared all of my doubts in one vid... thankyou so much

@leilahasani3118 2 жыл бұрын

I got you from some where in Africa. God bless you bro.

@SreekanthJAcharya 2 жыл бұрын

Thanks Shaun for such wonderful series. much needed to improvise on css grids.

@NetNinja 2 жыл бұрын

Thanks Sreekanth!

@SreekanthJAcharya 2 жыл бұрын

@@NetNinja and also I would request you to do a small series on basics of regex.

@Zeraltz 2 жыл бұрын

You literally saved me, got a new subscriber here dude! keep up with the good work! it was super easy to understand

@NetNinja 2 жыл бұрын

Thanks, and welcome :)

@syedalishah7141 6 ай бұрын

now I found the best tutorial on grid ❣

@NetNinja 6 ай бұрын

Hope it's helpful! :)

@isaacqadri 2 жыл бұрын

Wollah!! 😍😍 I'm waaay excited.

@Stories_cute 2 жыл бұрын

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

@yinonb172 2 жыл бұрын

Best as always, thanks Shaun

@user-bm9tq5qf3n 2 жыл бұрын

@rakinar2 2 жыл бұрын

Superb tutorial! I've learnt a lot of cool things here

@codingwitheric 2 жыл бұрын

Does this guy know everything?! 💯

@ericcarver7465 2 жыл бұрын

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!

@muhammadameerhamza8842 6 ай бұрын

Love you bro

@beinyourguard 2 жыл бұрын

I love your videos, I learn so much

@briantriesart Ай бұрын

Thank you very very very very very very very very very much! :)

@Rohit-id7vt 7 ай бұрын

you're the best !

@AnarghyaCommunications 2 ай бұрын

Thankyou Ninja

@I_Lemaire Жыл бұрын

Thank you so much, Shaun.

@NetNinja Жыл бұрын

You're very welcome! :)

@nicklesseos 2 жыл бұрын

Are you going to talk about the new sub grid feature?

@emopaulemo Жыл бұрын

the github is empty btw

@kooroshirani Жыл бұрын

also please create this series with flexbox and thank you for your great videos

@angelaleksandrov9966 2 жыл бұрын

You are a Super Teacher! Can you make a course for React with Redux/Context and Typescript?

@alexandermayorga2918 3 ай бұрын

Total tutorial/playlist duration => 2h12m14s

@johnnyholiday1150 2 жыл бұрын

Hey! love your videos !!!!! is there any chance next series can be about JavaScript ? would really appreciate it

@user-qk5mr8ez6y 2 жыл бұрын

Thank you Shaun :)

@ghofranedarragi5601 11 ай бұрын

thanks a lot for this tutorial

@Shaq2k 5 ай бұрын

Thank. Very nice. But what I don't understand is, is where I put the text into the cells

@Quintren 2 жыл бұрын

Is there a way you could teach us how to make our own wordpress plugins? like: widgets, header and footer text changer etc.

@cubedev4838 2 жыл бұрын

yeah, i want too

@Pareshbpatel 4 ай бұрын

A great introduction to a CSS Grid Tutorial. Thanks, Shaun {2024-04-24}

@cristianocolangelo9920 2 жыл бұрын

Thanks!

@NetNinja 2 жыл бұрын

Thanks for your support Cristiano! :)

@digigoliath 2 жыл бұрын

Awesome!!! TQVM!!

@NetNinja 2 жыл бұрын

Thanks for watching! :)

@nevzatyasar1 Жыл бұрын

excellent

@TheBoab400 2 жыл бұрын

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?

@user-qb8tj5ok3f 6 ай бұрын

cool video)

@gocusayadin Жыл бұрын

5:39 Please, where I can find the files on GitHub?

@CarlosVixil Жыл бұрын

The Live Preview extension by microsoft seems easier to use, opens a tab inside the editor and edits are live without saving

@proteus1 2 жыл бұрын

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.

@codernerd7076 2 жыл бұрын

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.

@mupelansowa3571 2 жыл бұрын

nice one

@pablomarcelmx 2 жыл бұрын

Hey Shaun, will the Stripe Playlist be available soon?

@gururajmoger8649 2 жыл бұрын

Nice.. pls make Tut on Angular

@ammarhassan_ Жыл бұрын

9:30 made me laugh. it sounded like hehehe

@proteus1 2 жыл бұрын

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

@ahmedsyed671 2 жыл бұрын

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

@andrewilson3722 5 ай бұрын

On your site, how current the courses are ?

@vijaykumarvarma8879 5 күн бұрын

❤❤

@hariharanmohan273 2 жыл бұрын

good

@waterfall-1969 5 ай бұрын

This video cannot get it to work with the Arrow

@HappyHorge 2 жыл бұрын

If you write div*6{$} and enter with emmet it will generate the template for you 😄

@HappyHorge 2 жыл бұрын

@Habeeb Mohamed You're welcome 😄

@NitinSharma-qx4ff 10 ай бұрын

what is a 'Lexo"

@JonsonNcube 2 жыл бұрын

🥳

@alfiecollins5617 Жыл бұрын

8:00

@ktoslubcos2600 2 жыл бұрын

4:11

@m4saurabh 2 жыл бұрын

MDN got ui reboot.

@jp4858 Жыл бұрын

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