How to Create Website Layouts Using CSS Grid | Learn HTML and CSS | HTML Tutorial
HTML-код
- Опубликовано: 14 июн 2024
- How to create website layouts using CSS grid | Learn HTML and CSS | HTML tutorial. CSS grid layouts will change how we create website layouts. Today you will learn about CSS grids, which is a new method we can use to create website layouts. CSS grid layouts are the future of webdesign layouts only using css, and in this lesson I will give you a guide to using CSS grid.
Links:
CSS grids documentation: css-tricks.com/snippets/css/c...
My video on Flexbox: • CSS Flexbox Tutorial |...
CSS grid vs. Flexbox: • CSS Grid Layout - Rach...
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Material for this lesson: / lesson-material-42361704
NEW UPDATED 2023 COURSE AVAILABLE! 🙂
You can find it here: ruclips.net/video/v8jDnBYc0bs/видео.html&ab_channel=DaniKrossing
You have no idea how much this tutorial saved my ass. I got more secured in my job. I was overconfident with the project and made the website for the desktop thinking that I will make it mobile view later and it wasn't working. This tutorial came as a blessing.
i have learned so much in this 27 mins tutorial. the responsive part was a gem of an explanation. this is definitely the best CSS Grid tutorial for beginners and to us who yearn to build a fully responsive site. thank you much to the author, blessings.
27 mins took me 1 hour to digest and understand. lol great tutorial video! learned and improved.
IT IS 28MIN
agreed!
Wow, lots of messages, lesson requests, positive comments. That's the sign of a effective teacher. Great work.
we love that annoying typing sound
This is a really good tutorial on grid, you make it very easy to understand and the animation do help a lot. Subscribed! Thanks.
Zango Vu i agree, the animation did really help to understand indeed! :)
ZANGES2RQT51Q4HE5OUaaNDE2 Vu äxÈXFFĢJÜa1 GDGDDQC2BW3LFRSIATFRRZNz3GDGDDQC2BW3LFRSIATFRRZNZ3t0
4Gund3müx91u29u
undz5e534e67v
Y"----¥¥(₩₩((¥₩₩ q
Eeeee, like
Agreed! =)
I was scrolling all over RUclips watching and quitting css grid tutorials but immediately I stepped on mmtuts channel my mind is at peace to watch i knew am gonna understand it. my number one channel from scratch in programming particularly web dev ! Thank you 🙏 mmtuts
One word. "Perfect". I love when you add info about mobile first in the last 2 min!
How refreshing to find clarity, precision and brevity all in one excellent tuorial! In fact the 28 minutes just rushed by - some other ones I've seen seem to drag on but are only 10 minutes long. Keep up the good work :)
Just started learning html and css for a month now. I have to say this tutorial is beyond helpful! I am going to apply this to streamline front-end dev projects. Thank you so much for this!
Definitely the most inclusive and comprehensible tutorials i've found so far.
You're really doing a great job! Thanks for the vid!
I *did* enjoy it! Direct, to the point, no divergent topics. This makes me want to watch your other tutorials now. Subscribed!
Thank you! I have been watching all of your tutorials; from HTM/CSS, to JS, to PHP. Your are a talented pedagogue. Keep up the good work! I appreciate the teaching
You are awesome man, your tutorial moves at the perfect speed and your voice is clear as well as you explain everything properly. Thank you very much, keep up the good work.
This is probably the best CSS Grids video out there! Thanks
I really like the way you did this video, thanks for uploading!
Thank you. I have learned more from watching a 30 min video of yours for free, than I have after having paid $1000 for my local college and over 10 hours trying to wrap my head around this.
Man, taking an online bootcamp class and your tutorial on grid, is super helpful. Love the way you simplified everything and made it super easy to understand. Thank you :)! look forward to more videos.
Thank you. This is so far the clearer explanation for css grids I ever seen!
I have learn more with you in this video than I have learned the last 8 years with others. Thanks for sharing.
Best tutorial on css grid I've seen so far. Illustrating the different ways to manipulate layouts with animation was perfect! Awsome job!
Watching it in 2018 and i can say one thing, your tutorials are the best. It is really easy to understand everything. Of course just watching wont help- everyone who watches this should code again and again and again to fully remember this.
Keep up the awesome work.
Hellooo Tuts. Started around a year ago watching your tutorials. Gave me great ideas and taught the basics. Thank you. Loved the video of you showing us your tent studio. Made me wonder how dedicated you were for success. Aways now I am back shall look lots over the tutorials I have missed. Cheers
Amazing, I’ve been waiting for this in years, thanks! Got your self a subscriber.
In the history of whole Web Development this is the most most AWESOME feature!!!
lol, probably you haven't heard of flexbox :)
Probably I know Floats, Inline and Flexbox pretty well and looks like you don't understand you talking about.
Dev Netics isn't flex box more useful in 1 dimensional layouts and CSS grids for 2d?
such a simple and clear and practical crash course for CSS grid. Thank you!
can't thank you enough for this video and your channel in general! you make learning programming so much easier. your videos are structured and at the right speed! props to you. thank you!
Thank you :)
Best CSS Grid tutorial on RUclips. God bless, brother.
This time, I decided to study CSS and HTML, and while browsing the CSS related videos on RUclips, this video helped me a lot :)
I am a middle school student in Korea who dreams of a front-end developer. Thank you:)
Good luck buddy, keep on reading and learning useful stuff! :D
yeah man ive been wacthing a lot of video about css grid, but honestly this one is amazing... well done
The best tutorial I've found. Thank you!
By far the best tutorial on GRID!!. Thank you Sir.
So many "Ahhhhh" moments here for me. You explain things amazingly!
Excellent presentation...thank you for taking time to create and post this!!! :)
That's the best grid tutorial i've ever seen. Thank you!
this video is more practical. the best video on grid i have watched so far. thanks
Probably the clearest and precise video about css grid! Thank you 👍
Absolute legend! I had no idea how enjoyable layouts could be until I found CSS grids. I always relied on 960gs etc. Thanks for a great video!
justify-self: start / end just fixed a problem I've spent the past 3 hours on. THANK YOU!
Thank you so much! I was having the hardest time with this and you explained it so clearly.
fantastic tutorial! best css grid tutorial in this planet! i want more!
Whoa! ⚡️That was awesome! Nice work with this video hey.
This grid tutorial is more than perfect...thanks so much
finally i get grids in general which was my major problem! thanks a million!
Once again, another awesome, user-friendly tutorial! Many thanks.
wow. just thank you, you're explaining like a god !! i've learned so much
I finally watched all of your videos from "css and html" playlist (within 2 days in a row). Thank you very much for you content, it was the best that I found on youtube about HTML and CSS. I really feel confident to build my own web site right now. :D
I think this is the best explanation on css grids I've seen. Glad I found this.
This is one of the best lessons I've ever received.. This is genius and the responsive part? God!!! That was awesome.
Best css grid lesson, thanks for this tutorial.
This is a great and easy to follow tutorial.. cant wait to see your other videos!!
to be honest, the best tutorial ever !
Just started following you and you are easily my favorite RUclipsr in this subject not only because of the quality of the instructions, but most importantly because of your calmness and awesome personality! Also, I really loved the animation, it helped drive home the information.
Haven't yet fully watched the video, the animations are gr8 and you have done an awesome job. Thank you and subscribed!
You did this video in an affectionate way. I liked the graphics for explaining the grid-attributes. Thank you ♡
Your channel has been a fantastic resource for me to get through my Web Development class - thank you!!
One of the finest video available in RUclips.
I'm crying of happiness! I've been waiting for this for more than 20 years....!!!!
Any advice for a new guy?
After watching so many videos i finally understand how grid works from this video .Thanks man
Nicely explained! Was struggling to understand its concept and implementation, now out of darkness. Thanks Dani
Best explanation od CSS grid!
Thank you Dani. Even though this is almost 4 years old I found this really helpful.
Absolutely amazing video man.... helped me more than you could ever know
Thank you for such a thorough and articulate tutorial. I am completely new to HTML and CSS but I was able to follow along just fine!! Cheers!
Big fat thumbs up for this amazing lesson! Thanks!
That was an excellent video! Explained a few things that I didn't know I didn't understand.
Thanks.
looking forward for some front-end tutorial and found this, it's really help me, thank's a lot
amazing and straight to the point
your video was a great help. finally I was able to build my responsive page using grid!
I am really thankful to the holder of this channel who has shared this impressive paragraph at at this time.
5 Star Video! Thanks.
love it when you get to grid-template-areas:
Thank you! Now that I want to switch from flexbox to css grid.
This is even more convenient than flex box. Thank you for the tutorial.
I certainly learned a new way of doing CSS grid. This was really easy to understand and I've learned a ton doing this tutorial. Thank you!!!!
This is a great tutorial! Clear and to the point. many thanks for the effort!! :)
"Thank you so much, brother"
"CSS Grid is crazy"
"Greetings from India";
So i was looking for a way to make my website responsive, watched the video and Boom, my wesite was responsive. You're a master man. +1 subscriber
Really easy to follow along even at 1.25, i simply consumed every word.
Nice tutorial, subbed!
Excellent teaching style. Great video. Thanks!
You sir, are a genius. This was extremely well explained and presented! Subcribed!
Very Informative!
Thank you!
great I got my first CSS grid going thank you so much (so you can seea)
Thank you so much for your kind help!
thanks alot! you make it alot easier.
By far the best video on CSS grids
Thanks a lot man looking for this for ages❤️
The best css grid tutorial. Thanks
Thank you for this awesome and clear tutorial. Bless.
Superior quality tutorial, thanks a lot.
Excellent video. I dont know english not exactly but I get it clearly. Thats animations when coding, these are amazing helpful. Great! 👌
Clear and simple. Well explained!!
this was heck of a tutorial sir! animation was something i had never seen before in youtube tutorial videos before. images yes, but animation like this no! thank you so much. it helps in understanding both concept and coding of css grid really well :)
Again my man this is just smart tech. Nice job
i am watching this video from sri lanka. and i have seen many videos of you.you are awesome .your explanation is great . thank you.may Allah bless you .
You are an amazing teacher. It makes it easy to follow and not boring unlike the others that makes me sleepy and lose interest. Make more videos on Javascript and other frameworks please, thanks
Great tutorial. Thanks for making this!
best explanation i've seen on yt about css grid ;) thanks for ur effort
Thanks for the video! Subbed! Everything on my browser didnt quite exactly %100 operate as you have but it's close enough! haha
best video to explain grid
Fantastic explanation! Thank you