No video

Intro to CSS Grid - Create a Basic Layout - Web Design Tutorial

  Рет қаралды 270,401

dcode

dcode

4 жыл бұрын

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

Пікірлер: 190
@dcode-software
@dcode-software 2 жыл бұрын
BUILD YOUR OWN APP SCREEN WITH CSS GRID 🔽 kzfaq.info/get/bejne/o7eKZJWos769iIk.html 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
@fauxhound5061
@fauxhound5061 4 жыл бұрын
honestly, this is the most comprehensive and beginner friendly CSS grid tutorial i've watched. Thank you so much, you've gained my sub!
@dcode-software
@dcode-software 4 жыл бұрын
No worries mate! Cheers
@dcode-software
@dcode-software 4 жыл бұрын
Awesome to hear mate!
@ice_the_kicker
@ice_the_kicker Жыл бұрын
Same here!
@eliasberry-jy8ig
@eliasberry-jy8ig 4 ай бұрын
I totally agree with you honestly
@manegg4166
@manegg4166 2 жыл бұрын
I'm a Japanese high school student, but I could understand CSS grid owing to your teaching! Thank a lot.
@Matt.27
@Matt.27 2 жыл бұрын
very cool Tamago guy
@Thumbelina77
@Thumbelina77 2 жыл бұрын
This is absolutely the best explanation I have ever seen. Clear, concise, and straight to the point. Kudos to you, sir!
@nithish1742
@nithish1742 2 жыл бұрын
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
@mizaelalmarazramos9309
@mizaelalmarazramos9309 3 жыл бұрын
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!
@dcode-software
@dcode-software 3 жыл бұрын
You're very welcome!
@glenpalmer5893
@glenpalmer5893 3 жыл бұрын
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.
@dcode-software
@dcode-software 3 жыл бұрын
Mate you're welcome
@hibiscushumbani
@hibiscushumbani 2 жыл бұрын
i love this video, when you meet a great teacher life becomes simplified. Thank you
@angelo3943
@angelo3943 2 жыл бұрын
I'm Italian and I understood everything (thanks to the subtitles too) but congratulations for explaining so fantastically and thank you for this video! ❤️
@simonkern8681
@simonkern8681 2 жыл бұрын
Funny how all the tutorials on YT below 100k views are the easiest to follow and take information from. Subbed!
@ignskeletons
@ignskeletons 4 жыл бұрын
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
@julianoduarte5646
@julianoduarte5646 4 жыл бұрын
Its explanation is very simple and direct. I already have an idea of how to start my project using CSS GRID. Thank you!
@MateusGamer7
@MateusGamer7 2 жыл бұрын
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!
@collinsattafuah2947
@collinsattafuah2947 2 жыл бұрын
Exactly what I needed too , this guy is a good teacher
@adventechoo
@adventechoo 4 жыл бұрын
CSS Grid is one of the most powerful UI techniques to came out from CSS
@wakazashi20
@wakazashi20 2 жыл бұрын
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
@blacknight88
@blacknight88 Жыл бұрын
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.
@dcode-software
@dcode-software Жыл бұрын
Awesome to hear!
@shayantaheer3956
@shayantaheer3956 2 жыл бұрын
This is the most simple CSS guide. Thanks a lot.
@rounaquesaba7645
@rounaquesaba7645 3 жыл бұрын
I am so glad to find this tutorial, thanks, keep up the good work, i subscribed!
@dcode-software
@dcode-software 3 жыл бұрын
Appreciate it! Thank you
@stevenoels2757
@stevenoels2757 10 ай бұрын
Such a simple explanation, wish I had found this few weeks ago. Thanks
@intc21
@intc21 Жыл бұрын
Great video, thank you, it made grid click for me 🙏
@chrisbauldree4749
@chrisbauldree4749 4 жыл бұрын
Great beginners guide to CSS grid! Thank you for the tutorial .
@kayaqueen6982
@kayaqueen6982 Жыл бұрын
thank you ! you made it really clear and easy to understand . i just started learning and i wasn't able to fully understand it .
@cyper2c826
@cyper2c826 Жыл бұрын
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🙏
@dcode-software
@dcode-software Жыл бұрын
All good! Thanks for your comment 😎
@bvsanchez6161
@bvsanchez6161 2 жыл бұрын
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
@semnijipa2649
@semnijipa2649 Жыл бұрын
This holds an awesome piece. Like it!
@its_abdu4925
@its_abdu4925 2 жыл бұрын
WHY? why they don't tutorials this easy to follow and to apply. Like 1.2 3. Great job mate.
@egzongallapeni8098
@egzongallapeni8098 2 жыл бұрын
Honestly i watched it and i got it with only 1 time watching this video . Thanks and good luck man ! +1Sub also !
@KrishnaGupta-yc3jd
@KrishnaGupta-yc3jd 2 жыл бұрын
Loads of love from Nepal
@zsanettvarga5535
@zsanettvarga5535 Жыл бұрын
This helped me a LOT! Now I'm gonna go ahead and design the modal I'm working on :) Thank you!
@teekay3747
@teekay3747 2 жыл бұрын
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
@XarsVariety
@XarsVariety 4 жыл бұрын
Thanks a lot! Grid stuff, flexbox, can be deceptively hard sometimed. This cleared some things up.
@dcode-software
@dcode-software 4 жыл бұрын
No problems mate!
@875design
@875design 3 жыл бұрын
What is the difference between flexbox and css grid? Is it the same? Or just different techniques to create a layout?
@waiwirir
@waiwirir 4 жыл бұрын
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
@subhakshankarmakar636
@subhakshankarmakar636 2 жыл бұрын
Thanks a lot, It's really helpful for me. Love form India.
@prabu2778
@prabu2778 4 жыл бұрын
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 .
@mbaig9603
@mbaig9603 2 жыл бұрын
Finally I was able to watch one of the best videos on CSS on KZfaq, much better than bootstrap. Many thanks 😊
@monkeydolla
@monkeydolla 4 жыл бұрын
Fantastic video many thanks .. I have never done grid before I got it the 1st time!
@dcode-software
@dcode-software 4 жыл бұрын
That's awesome!!
@BigFightNight
@BigFightNight 2 жыл бұрын
So friendly for every beginner.
@abubakarlawwal3611
@abubakarlawwal3611 2 жыл бұрын
Greate explanation. Finally understood grid. Hope you can make one to make your grid responsive.
@kephasmseteka3462
@kephasmseteka3462 Жыл бұрын
This is awesome.....beginner friendly, easy to follow
@cm3462
@cm3462 Жыл бұрын
Wow man. Awesome as usual. 😎
@cekuhnen
@cekuhnen Жыл бұрын
Nicely explained
@WilliamFergusMartin
@WilliamFergusMartin 2 жыл бұрын
Superb! Very good intro to CSS container and grid. :-)
@x-buster
@x-buster 10 ай бұрын
It helps me a lot. Thank you.
@elkaberpa
@elkaberpa 7 ай бұрын
excellent tutorial i learnt alot thank you!! :)
@Taufiq714
@Taufiq714 3 жыл бұрын
Good simple to understand Presentation
@allancoder
@allancoder 4 жыл бұрын
I like this video of creating a basic layout with CSS Grids. Are you going to make a series of videos on CSS Grids?
@dcode-software
@dcode-software 4 жыл бұрын
I definitely see myself making more of these in future yes :)
@tncreations1267
@tncreations1267 Жыл бұрын
Thank you very much. This is very helpful
@darianamsanchez
@darianamsanchez Жыл бұрын
Great tutorial! Thank you
@bredee424
@bredee424 Жыл бұрын
Great video, had about html and css last semester and this helped a lot!
@dcode-software
@dcode-software Жыл бұрын
Awesome 😎
@johncarlobalubar2853
@johncarlobalubar2853 3 жыл бұрын
This is the best tutorial! Thank you so much, helped me a lot!
@dcode-software
@dcode-software 3 жыл бұрын
No worries mate
@dkumar8037
@dkumar8037 4 жыл бұрын
simple and great explanation
@jamesmassa1999
@jamesmassa1999 4 жыл бұрын
Thank you, Dom, very helpful. Be Safe.
@not-alot-of-options
@not-alot-of-options Жыл бұрын
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.
@randy7894
@randy7894 2 жыл бұрын
Thanks. Personally I'm a big fan of the grid-template-areas command.
@aminamalin8915
@aminamalin8915 2 жыл бұрын
Great video, informative and straight to the point! Thank you.
@123123mike
@123123mike 3 жыл бұрын
great video. concise, to the point. Very informative
@MohamedMohamed-su7zm
@MohamedMohamed-su7zm Жыл бұрын
Thank you it helped me a lot
@nontonanime9978
@nontonanime9978 3 жыл бұрын
This is great tutorial, THANK YOU for making this video
@dcode-software
@dcode-software 3 жыл бұрын
All good mate
@hesetveliu5266
@hesetveliu5266 Жыл бұрын
thank you very very very much, you help me a lot
@buntekuhmachtmuh4505
@buntekuhmachtmuh4505 3 жыл бұрын
Thanks, you have helped me a lot.
@dcode-software
@dcode-software 3 жыл бұрын
You're very welcome
@kishankumar2272
@kishankumar2272 Жыл бұрын
you have my respect
@YoungmeePark1103
@YoungmeePark1103 3 жыл бұрын
Best tutorial ever!
@dcode-software
@dcode-software 3 жыл бұрын
Cheers mate
@yass1266
@yass1266 2 жыл бұрын
This is GREAT!! Very helpfull, thank you!
@brandonhirdler
@brandonhirdler 2 жыл бұрын
This was exactly what I was looking for thank you!
@dcode-software
@dcode-software 2 жыл бұрын
You're very welcome
@theinthanhlan3582
@theinthanhlan3582 2 жыл бұрын
THANK YOU VERY MUCH SENSEI !!!!!!!!!!
@Yosuke94
@Yosuke94 9 ай бұрын
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?
@michaelvestergaard4251
@michaelvestergaard4251 Жыл бұрын
nice video... and explainatory
@AbderrahimHouady
@AbderrahimHouady Жыл бұрын
well doooooooone you are the best
@hp7706
@hp7706 3 жыл бұрын
Really good tutorial mate !
@nicolecastro2684
@nicolecastro2684 3 жыл бұрын
hi...can I ask what type/s of CSS you used in your code? thanks😊
@AbderrahimHouady
@AbderrahimHouady Жыл бұрын
great teacher
@sana1524
@sana1524 4 жыл бұрын
The most simplest tutorial i have come across - thank you. I have a question though, i'm using your template for my site - as i begin my coding, shall i keep my css code on a separate file page, or keep it in the same page, just as you have?
@benjaminitela49
@benjaminitela49 3 жыл бұрын
from all the tutorial videos i have watched, sadly a lot. You are advised to keep it externally. Here is a link that may help you. www.w3schools.com/css/css_howto.asp
@sana1524
@sana1524 3 жыл бұрын
@@benjaminitela49 thank you!
@yannvictorpoirotsanz3316
@yannvictorpoirotsanz3316 2 жыл бұрын
Absolument génial monsieur!!!
@techoutlook9235
@techoutlook9235 3 жыл бұрын
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?
@collinsattafuah2947
@collinsattafuah2947 2 жыл бұрын
Man you are the best
@WABCodeLab
@WABCodeLab Жыл бұрын
Thanks, really helped
@bertaniroberto
@bertaniroberto 2 жыл бұрын
Very very useful
@omegawonton8749
@omegawonton8749 Жыл бұрын
im having a problem with scrolling, where the grid dosent continue when the page goes down, does anyone know a solution? solution: after .container where you have the width and height, just change 100vw and 100vh to 100%
@fari4r588
@fari4r588 3 жыл бұрын
Very good tutorial Thanks!
@Alvarohc777
@Alvarohc777 Жыл бұрын
When I add a second .container div below the existing one, a padding appears on the browser. Anyone have an idea how to fix it. Been searching for solutions for about 2 hours, but haven't been able to find any so far
@theory_underground
@theory_underground 3 жыл бұрын
How are you selecting and simultaneously changing multiple instances of the same word?
@shawncarpenter5024
@shawncarpenter5024 3 жыл бұрын
If you haven't figured it out yet: He was using VS Code where you can select the same word in multiples of n.
@adrianqx
@adrianqx 2 жыл бұрын
Thanks , great tutorial !
@RyanSteele82
@RyanSteele82 Жыл бұрын
Excellent video. Thanks for the clear explanation on how to do layouts!
@ahmadkhalaf3696
@ahmadkhalaf3696 2 жыл бұрын
Thank you very much very simple and helpful 😀 😉
@stellanwosu1525
@stellanwosu1525 Жыл бұрын
😊this was awesome thanks alot
@RahulSingh-1
@RahulSingh-1 3 жыл бұрын
This is what i was looking for...
@tonysicily2687
@tonysicily2687 3 жыл бұрын
Perfect, I loved this, I hate CSS, it is just far far too flexible, it feels like it was written by a team of acid spaced out hippies. Too many ways to do the same thing. Too many terms for exactly the same thing (Container/Wrapper/etc) . Your video really helped (REALLY helped). I now know that I can ignore most of the terms and methodologies, and simplify the learning process, at least until I understand more. Finally able to start on my NodeMCU LCARS GUI 👍😀😀😀 Thank you Liked, Saved & Subscribed
@DashFlicks
@DashFlicks 2 жыл бұрын
great tutorial!
@koenallcars7804
@koenallcars7804 Жыл бұрын
Hello, i have a problem with my header ... It goes outside the container ? ? Does anybody know the reason ?
@AkrimHannahLunaGinny
@AkrimHannahLunaGinny 2 жыл бұрын
very good tutorial!
@fl4shonov
@fl4shonov 2 жыл бұрын
Good tutorial thanks.
@dcode-software
@dcode-software 2 жыл бұрын
Glad it was helpful!
@Rangayuthtube
@Rangayuthtube 3 жыл бұрын
great vid
@PraveenKumar-uf9bq
@PraveenKumar-uf9bq 3 жыл бұрын
perfect ! thank you so much ! helped me a lot !
@dcode-software
@dcode-software 3 жыл бұрын
You're welcome 🙂
@iLikeMyOwnPosts
@iLikeMyOwnPosts 3 жыл бұрын
Really super helpful, thanks a lot! :)
@dcode-software
@dcode-software 3 жыл бұрын
You're welcome!
@Charles-sy7ej
@Charles-sy7ej 11 ай бұрын
This seems a lot better than grid template area yeah?
@haticeduman1849
@haticeduman1849 2 жыл бұрын
I have typed over the code exactly but am not getting the lines outside, can someone help?
@RighteousNacho
@RighteousNacho 3 жыл бұрын
Why would you want to use span 2 when it's easier just to type in 4? Serious question. I'm new to css and grid.
@beauvsb5230
@beauvsb5230 3 жыл бұрын
Why do you style on html instead of creating a separate css file?
@torquetalks
@torquetalks Жыл бұрын
How to make the text inside of the box very responsive?
@vaibhavlakhe725
@vaibhavlakhe725 7 ай бұрын
is this standard way in modern times to design layout code like this?
Learn CSS Grid in 20 Minutes
18:35
Web Dev Simplified
Рет қаралды 780 М.
Learn how to create a responsive CSS grid layout
31:52
Kevin Powell
Рет қаралды 129 М.
Кадр сыртындағы қызықтар | Келінжан
00:16
НРАВИТСЯ ЭТОТ ФОРМАТ??
00:37
МЯТНАЯ ФАНТА
Рет қаралды 9 МЛН
Я не голоден
01:00
К-Media
Рет қаралды 10 МЛН
How to Properly Layout A Website (For Beginners)
14:50
The Website Architect
Рет қаралды 563 М.
CSS Grid Intro and Basic Layout Tutorial for Beginners
25:38
Dave Gray
Рет қаралды 29 М.
#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial
43:12
Dev Dreamer
Рет қаралды 101 М.
Learn CSS Grid in 20 Minutes
27:40
codeSTACKr
Рет қаралды 182 М.
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Рет қаралды 1,5 МЛН
Learn CSS Subgrid in 14 minutes
14:19
Slaying The Dragon
Рет қаралды 67 М.
Кадр сыртындағы қызықтар | Келінжан
00:16