Become A Master Grid CSS In 13 Minutes
Вставка
- Опубліковано 20 лип 2024
- In this video, I will teach you everything about grids in CSS so you can become a master when using it,
from basic usage to advanced usage to optimize it for use in all cases, especially in the responsive design process.
Steps - By Steps:
00:00 Introduce Grid CSS
00:57 Grid Container
02:47 Grid Items
04:33 Basic Usage
04:45 Advanced Usage
09:58 Responsive
-----
Hello everyone, I'm creating a lot of new projects every day and sharing them 😍, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it ✅.
#javascript #code #css
-----
Theme VsCode I'm Using: • Create Your Own VSCode...
Featured video series
React Js Tutorial: • React JS
Design Slider - Carousel web: • Design Slider - Carous...
E-Commerce Web Coding: • E-Commerce Website Code
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Web Applycation Code: • Web Application Code
Javascript Tutorial: • Javascript Tutorial
CSS Tutorial: • CSS Tutorial
Many other impressive videos: / @lundeveloper
Contact With me:
Instagram: / lundev.web
Email: hohoang.dev@gmail.com
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support 😍.
Here, I share all my knowledge about Developer and Web Design including languages such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.
If you find it interesting, don't forget to subscribe to follow the latest videos. And please suggest me what topic you would like to see a video about
hi can you help me
Details on Flex
(Just to be sure that there are no hidden majic that were not covered in the previous videos)
Best css teacher i have ever seen in UA-cam.
Thank you so much bro 🥹
agree
I feel like congratulating myself for clicking on this video, because i almost ignore the video, but surprisingly this is the best grid video have ever watched, even know more gird properties than before.
Thanks so much for this video.
Man....thank u soo much you sharpen my grid knowledge.
Mr.Beast Grid Known very well nd great tutor too!!
🤯grid-template-areas more visual, than having to calculate each item! Awesome!
Thank you bro ^^
I love your teaching skills and I think you are the best for css and front end designing❤❤❤
5:11 amazing explanation!!
Awesome explanation mate!
I'm your fan, congratulations on your professionalism and for sharing your wealth of knowledge. I will watch all your videos!
Thank you so much 😍
no cap you're the best css teacher ever
Awesome video! Auto-fill is a definite game-changer
That's right, thank you 😊
I prefer auto-fit instead of auto-fill to fit into its container size. Both values have their niche to be used, but in most cases the auto-fit value is the better choice. This can also be combined with a minmax() function for even more precise control.
very important for me, thanks dude
😍😍
Dang bro, your vid is much more understandable than my college prof, keep up❤
Thank you Mr.Beast this tutorial was very comprehensive
That's one of the best grid tutorial ☺️
Wow, thank you so much 😍😍
Great Tutorial👍🏻
This makes me wonder to drop Flexbox o0 but I also feel that Grid is preferred more for like the examples of the chairs; when you have more then lets say 5 items or you want to define a specific designed layout.
I created a video instructing people when to use grid and when to use flexbox, you can check it out.
Just stumbling across your channel and loving the teaching method only thing I would change is I always try to use % when giving sizes so that the webpage is easily resizable if everything is just random px sizes it does make for some headaches in bigger projects.
But other then that love the content ^_^
😍😍
You're just extraordinary ❤🎉🎉❤❤
😍😍
Thank you ❤🎉🎉
Sir kindly make one more video on Grid layout and please prefer a small grid Based project ❤
hands down this is the best explanation ive seen and your voice is so similar to mr beast
lol
Definitely make videos on CSS positions(relative, absolute)
Yes i will
Great Video! I am ditching flex.
Thank you sir!.
i like every each content it is very knowledgeable
Thank you so much bro 😍
Can you make the adding cart with php and login account? Your explanation is awesome I just understand the grid and flex just with your video, hopefully can understand the adding cart with php too haha
Great video. Thank you very much.
😍😍😍
Pufff! you are a beast bro! .... a beer for u.
Thank youuuuuu
My teacher
@lundeveloper I'm over the moon when I see your videos, please continue, great job 🎉
Thank you so much 😍😍😍😍
@@lundeveloper could I ask you for to explain the 3d design if you have a time, i think it's popular now, what do you think for that, thanks too much to listen my words
Great video
How do you have the dotted lines, the blue shade and section numbers highlighted on the divs ?
Bro always make your videos with explanations
why this channel was hidden from me till now, I am so happy that I am finally among chosen ones
Top😉
Amigo, gracias, eres una chulada jaja!
Thank you so much ^^
Yo cool video, hows your console showing those measurements?
This is a devtool, it is available on most browsers
Thanks Lun bro😍😋😁
😁😁😁
Like very good
Hello Bro Your Videos on CSS are Excellent, I want yo ask that can you make the playlist on advanced CSS properties,
I want to explore it more.. please
Hi, I created a CSS tutorial playlist, you can check it out
Awesome bro can you also create the same for flex box
Can I tell you something? I love you ❤😂
Maybe for you, it's nothing but for a person like me who is just learning it's a lot. Thank you
THANKS A LOT, THANKS!!!
Really glad it's useful
Can you overlap in the grid-template-areas?
Awesome
God⚡
Perfect
Thank you 😍
how to get colored ou tabs in vs code. What extension you are using?
Like that 👍
is there any extensions on VSC to show those borders for the elements on the local live server. my biggest struggle right now is actually visualizing the boxes iinn myy head so I just put a border on every container and it gets tedious sometimes
You don't need any extension, you can turn this thing on in the Chrome dev tools (in the DOM view, right next to the element that's a grid container there's a "grid" badge that you can click to visualize the borders). The same goes for flexbox.
very good, but maybe reduce the usage of these sound effects.. :)
I LIKED ❤💎 I SUBSCRIBED 👍
Wow. This guy is Awesome! This is really Master Level
Wait! How is he displaying those lines and pointers on the grid?
Lun, you just became my mentor! But I'm not sure I can have a proper conversation until I go through your entire videos and learn every thing there.
Thanks for this great video!!
hi, to see it.
First you need to declare the grid in your css.
Then on the website,
Click f12 to open devtools, on the elements tab, right next to the element you just declared display: grid, you will see a "grid" button. Click on it, you will see everything
Not sure about everyone else but I fins grid-tempate-areas syntax to be so strange. You're basically drawing the layout in text. Surely there could have been a more programatic style for this when the guys at the W3 came up with the spec?
Sorry I had questions, as a developer how can you test your site on every browser for example cause I don't have Ios I can't test my project on Safary and I see lots of problem on that
thank you sir
😍
awesome vid
Thank you 😍
First, you have to edit vs code to make that preview window to show css grid?
No, this is a built-in feature of Chrome and Microsoft Edge browsers, after declaring display: grid.
You just need to click F12 to open devtool, then click on the grid button located right next to the container class
@@lundeveloper great. I try now
amazing chanel
Thank you 😍
It's Awsome
Thank you so much 🎉
which ai do you use to generate those voices?
How to add a video on banner background & responsive it ??? Please make a video on this topic
its good bro
Thank you bro ^^
Please create videos on Java script too 🥺🥺
love you 😘😘
Love you too 😍😍😍
Bro what is this extension is it Sythwave '84' or something else!?
Please name extension above index.html color!?
Nice...Most youtubers here use auto-fit instead of auto-fill....whats your take on this?
Make video on CSS overlay
LIKE👏👋
please explain the Ajax Javascript.
Yes i will 😍❤️
I love you
Thank you
And now the same with flex-box 🙂
4:54 grid ruh-ow? definitely ai voice
That thumbnail picture is Ready player one movie game created author anime game picture ❤
Please make a video on transform and translate. 😥😥😥😥😥😥
OK bro 😍
@@lundeveloper 🥰thank you very much sir
W
Tech speak, is bullspeak.
Is this MrBeast?
why does your voice sound so Mr Beast ?
bro
hhhhhhhhhhh
is this ai voice? it sounds weird
Yeah, that artificial voice is annoying.
Look at his channel. He is from vietnam. Selfexplained.
Q
Mr beast in arabic
Bad tutorial! 😖
hay quá a ơi
Cảm ơn sư thầy Brian Nguyen 🙏 😅
where are you live
I live in VietNam 🇻🇳
@@lundeveloper ar you tell me lie >?????????????????????????????????????????????????
Viet Nam's shift from a centrally planned to a market economy has transformed the country from one of the poorest in the world into a lower middle-income country. Viet Nam now is one of the most dynamic emerging countries in the East Asia region.
you live her