Intro to CSS Grid - Create a Basic Layout - Web Design Tutorial
ฝัง
- เผยแพร่เมื่อ 20 ต.ค. 2019
- In this tutorial I'll be showing you how to create a basic website layout using CSS Grid - with support for a 3-column content layout.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozilla.org/en-US/d...
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #css #webdev
![#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial](http://i.ytimg.com/vi/RhUuMl3R1PE/mqdefault.jpg)
![#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial](/img/tr.png)
BUILD YOUR OWN APP SCREEN WITH CSS GRID 🔽
th-cam.com/video/mQZ12wNXYXU/w-d-xo.html
🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
honestly, this is the most comprehensive and beginner friendly CSS grid tutorial i've watched. Thank you so much, you've gained my sub!
No worries mate! Cheers
Awesome to hear mate!
Same here!
I totally agree with you honestly
I'm a Japanese high school student, but I could understand CSS grid owing to your teaching!
Thank a lot.
very cool Tamago guy
This is absolutely the best explanation I have ever seen. Clear, concise, and straight to the point. Kudos to you, sir!
Just wanted to say what a fantastic tutorial this is.
I watched another tutorial that didn't quite do it for me but after watching this it 'clicked' a bit more. Ty
Thanks man. This helped a lot. I'm on the final project of web design program I'm enrolled in. For the other projects, I used a few couple of grid declarations, but honestly didn't know what I was doing. This simplified everything, at least I have an appreciation for grids now lol
Its explanation is very simple and direct. I already have an idea of how to start my project using CSS GRID. Thank you!
I'm Italian and I understood everything (thanks to the subtitles too) but congratulations for explaining so fantastically and thank you for this video! ❤️
To be honest, I watched a lot of videos to learn about grid.
but , you are the only person who taught very easily
so, thank you
The only tutorial I found that went in enough about what each thing does so I can fully comprehend what it is that I'm doing. Very Helpful!
You're very welcome!
Thanks for the tutorial. Have been looking around for a while, for something i could get my head around with CSS-GRID, Last time i did anything to do with website design/development was when tables was used as a layout and CSS was very-new. Now i have to catch up! thanks again
Thanks for sharing, I'm just starting on my web development journey and found this explanation super helpful and easy to understand, great work, it's much appreciated.
Mate you're welcome
I loved it! this is exactly what I needed, to use GRID to actually build a website layout and not just photo galleries, thanks a lot!
Exactly what I needed too , this guy is a good teacher
Great beginners guide to CSS grid! Thank you for the tutorial .
i love this video, when you meet a great teacher life becomes simplified. Thank you
This is the most simple CSS guide. Thanks a lot.
Great video, informative and straight to the point! Thank you.
thank you very much. learnt a lot from this one. i didnt even know where to start and you just helped me a whole bunch
CSS Grid is one of the most powerful UI techniques to came out from CSS
This helped me a LOT! Now I'm gonna go ahead and design the modal I'm working on :) Thank you!
Crazy that in a month im able to understand most concepts that are being taught here feels great to be self-taught. Obviously don't know everything by any means but slow and steady and will get there eventually
This holds an awesome piece. Like it!
This is awesome.....beginner friendly, easy to follow
Such a simple explanation, wish I had found this few weeks ago. Thanks
I am so glad to find this tutorial, thanks, keep up the good work, i subscribed!
Appreciate it! Thank you
great video. concise, to the point. Very informative
Great video, thank you, it made grid click for me 🙏
The is the best video I seen on css grid. I struggled for a while on positioning. Now its easier to control the flow of the elements on the page.
Awesome to hear!
Thank you, Dom, very helpful. Be Safe.
Wow man. Awesome as usual. 😎
This is the best tutorial! Thank you so much, helped me a lot!
No worries mate
Great tutorial! Thank you
It helps me a lot. Thank you.
Fantastic video many thanks .. I have never done grid before I got it the 1st time!
That's awesome!!
thank you ! you made it really clear and easy to understand . i just started learning and i wasn't able to fully understand it .
This is GREAT!! Very helpfull, thank you!
Really good tutorial mate !
simple and great explanation
So friendly for every beginner.
excellent tutorial i learnt alot thank you!! :)
Funny how all the tutorials on YT below 100k views are the easiest to follow and take information from. Subbed!
Good simple to understand Presentation
Greate explanation. Finally understood grid. Hope you can make one to make your grid responsive.
Thank you very much. This is very helpful
Thank you it helped me a lot
Thanks a lot, It's really helpful for me. Love form India.
Honestly i watched it and i got it with only 1 time watching this video . Thanks and good luck man ! +1Sub also !
Great video, had about html and css last semester and this helped a lot!
Awesome 😎
This was exactly what I was looking for thank you!
You're very welcome
Very good tutorial Thanks!
This is great tutorial, THANK YOU for making this video
All good mate
Nicely explained
Thanks , great tutorial !
Thanks, really helped
Superb! Very good intro to CSS container and grid. :-)
Thanks a lot! Grid stuff, flexbox, can be deceptively hard sometimed. This cleared some things up.
No problems mate!
What is the difference between flexbox and css grid? Is it the same? Or just different techniques to create a layout?
Loads of love from Nepal
thank you very very very much, you help me a lot
Best tutorial ever!
Cheers mate
perfect ! thank you so much ! helped me a lot !
You're welcome 🙂
Really super helpful, thanks a lot! :)
You're welcome!
Thank you very much very simple and helpful 😀 😉
😊this was awesome thanks alot
THANK YOU VERY MUCH SENSEI !!!!!!!!!!
you have my respect
Thanks, you have helped me a lot.
You're very welcome
Man you are the best
Very very useful
You're awesome men! Keep it up. Thankyou! It make sense. I just wanna ask, if you can put some stuff in each grid? Without affecting other grid?
very good tutorial!
great teacher
nice video... and explainatory
Sir , You are making very Awesome videos to learn.
If you create the Playlist in Order for begginers to learn , It will be very useful sir .
Absolument génial monsieur!!!
great video!!
great tutorial!
Thanks. Personally I'm a big fan of the grid-template-areas command.
lovely!
thank you for this
great vid
well doooooooone
you are the best
Good tutorial thanks.
Glad it was helpful!
You rock!
Tip for users not on a Chromium browser (ie: Firefox): the grid preview may not be visible in developer tools just by hovering over the element, but if you click on the word (grid) in a little button to the right of the element, the grid preview will appear.
hi...can I ask what type/s of CSS you used in your code?
thanks😊
This is what i was looking for...
Thank you man😎
All good mate!
I haven't written a comment in a long time, but this video deserves one. Thank you for this very well organized and simply designed video. I have watched several videos on the grid layout but never understood it. That has changed with this video. Thanks🙏
All good! Thanks for your comment 😎
thank you
WHY? why they don't tutorials this easy to follow and to apply. Like 1.2 3. Great job mate.
thanks , nice
I like this video of creating a basic layout with CSS Grids. Are you going to make a series of videos on CSS Grids?
I definitely see myself making more of these in future yes :)
A well explained tutorial. How would you make the layout responsive?
Thanks mate
No worries mate
Thanks
Excellent video. Thanks for the clear explanation on how to do layouts!
muchaaas gracias! very well explained, it helped me a lot
How are you selecting and simultaneously changing multiple instances of the same word?
If you haven't figured it out yet: He was using VS Code where you can select the same word in multiples of n.
Finally I was able to watch one of the best videos on CSS on TH-cam, much better than bootstrap. Many thanks 😊
Ok, but how do I keep the structure and just change the content if I go to other page, like about.html ?
Do I copy-paste it in every HTML and modify what inside the content-wrap?