Become A Master Grid CSS In 13 Minutes
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 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 TH-cam.
Thank you so much bro 🥹
agree
Man....thank u soo much you sharpen my grid knowledge.
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.
Mr.Beast Grid Known very well nd great tutor too!!
I love your teaching skills and I think you are the best for css and front end designing❤❤❤
🤯grid-template-areas more visual, than having to calculate each item! Awesome!
Thank you bro ^^
Awesome explanation mate!
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.
5:11 amazing explanation!!
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 😍
Thank you Mr.Beast this tutorial was very comprehensive
Thank you ❤🎉🎉
Great Tutorial👍🏻
Thank you sir!.
Dang bro, your vid is much more understandable than my college prof, keep up❤
very important for me, thanks dude
😍😍
Great video. Thank you very much.
😍😍😍
That's one of the best grid tutorial ☺️
Wow, thank you so much 😍😍
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
Thank youuuuuu
My teacher
Top😉
Pufff! you are a beast bro! .... a beer for u.
why this channel was hidden from me till now, I am so happy that I am finally among chosen ones
Like very good
THANKS A LOT, THANKS!!!
Really glad it's useful
Great Video! I am ditching flex.
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.
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
You're just extraordinary ❤🎉🎉❤❤
😍😍
Definitely make videos on CSS positions(relative, absolute)
Yes i will
Amigo, gracias, eres una chulada jaja!
Thank you so much ^^
Thanks Lun bro😍😋😁
😁😁😁
Awesome bro can you also create the same for flex box
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 ^_^
😍😍
Like that 👍
i like every each content it is very knowledgeable
Thank you so much bro 😍
@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 ?
Awesome
Perfect
Thank you 😍
God⚡
Bro always make your videos with explanations
Can you overlap in the grid-template-areas?
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
thank you sir
😍
It's Awsome
Thank you so much 🎉
awesome vid
Thank you 😍
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
LIKE👏👋
how to get colored ou tabs in vs code. What extension you are using?
Yo cool video, hows your console showing those measurements?
This is a devtool, it is available on most browsers
very good, but maybe reduce the usage of these sound effects.. :)
amazing chanel
Thank you 😍
its good bro
Thank you bro ^^
Make video on CSS overlay
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
love you 😘😘
Love you too 😍😍😍
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.
Please create videos on Java script too 🥺🥺
How to add a video on banner background & responsive it ??? Please make a video on this topic
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
W
which ai do you use to generate those voices?
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?
Please name extension above index.html color!?
Nice...Most youtubers here use auto-fit instead of auto-fill....whats your take on this?
I love you
Thank you
Bro what is this extension is it Sythwave '84' or something else!?
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
That thumbnail picture is Ready player one movie game created author anime game picture ❤
please explain the Ajax Javascript.
Yes i will 😍❤️
4:54 grid ruh-ow? definitely ai voice
And now the same with flex-box 🙂
Please make a video on transform and translate. 😥😥😥😥😥😥
OK bro 😍
@@lundeveloper 🥰thank you very much sir
Tech speak, is bullspeak.
Is this MrBeast?
bro
why does your voice sound so Mr Beast ?
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