 So I've already created the index.html and I've created a folder which contains all styles.css. The styles.css is already linked to a page in here and we can just start by writing some HTML. Let's start by creating a wrapper and you don't actually have to have a wrapper but most websites do. So let's create a wrapper and then I can actually center this wrapper in the middle of the page and see how the responsive layout will work and then inside the wrapper I'm gonna create an unordered list and inside this unordered list I will create a bunch of cards. So let's name the first list card 1 and then I just want to duplicate this nine more times and in Visual Studio Code I can do this by holding Alt Shift and the Danar and this basically copies the line that we've selected and let's now do this eight more times. One, two, three, four, five, six, seven, eight and now I'm just going to change the numbers. So three, four, five, six, seven, eight, nine, ten. Let's save this, go to a browser and have a look at what we have. So here are cards and obviously this is not looking good but I will add a little bit of styling to it now. So let's go back to or index.html and we're actually done with this part so let's go to the styles.css now and add some basic styling. The first thing I'm going to do is add a Google font called Roboto which you can find from Google fonts and just include a new project for free. And let's start by adding some styles to a body and the first thing I want to do is change the background color to something that will contrast with white a little bit. So e2, e1, e0 will be kind of grayish color and then I just want to make sure that the font family is set to Roboto and now that we are done with this let's see whether the styles are working and as you can see the background color is now gray so let's go back and continue. The first thing I want to do is actually remove the padding from the unordered list. As you know unordered lists have padding by default so let's remove that so all the items can be centered later. Now we can focus on our wrapper. Let's start by writing class wrapper. For the wrapper I want to give it a maximum width and the maximum width I want to add will be 1366 pixels and you can also do this with m's if you like and the equivalent of 1366 will be somewhere around 85 m's but you don't have to do that it's you can use pixels it's not a problem and to make sure that the wrapper is actually in the middle of the page I want to quickly do that by resetting the margins so margin left can be auto and margin right can be set to auto too so now if I save as you can see the cards have moved and if I was to inspect the page layout you will see that that our wrapper is in the middle of the page but obviously we need to reset the lists, bullet points and so on. So let's continue now because we have max width of 1366 pixels that means that the the wrapper will be taking the maximum width of this number but when you scale it down will will be actually responsive so if I was to scale this down the wrapper will be shrinking with the browser which is what exactly what we want and we don't have to write media queries for this. Let's now okay we could now start with styling the unordered list but just to make this a little bit better to make it a little bit more specific just because we have uh url and it doesn't have a class let's add a class to it and we can give this a class of something like responsive grid I think this is unique enough so let's copy this and what I want to do is actually I want to make this an ordered list uh to be displayed as grid so we can style those cards on the page and let me show you so let's start by writing the responsive grid class name in here and the first thing we need to make sure we do is to display this as a grid and then what we can do with grid is grid allows us to create columns and rows and so on and let me show you what we can do to make to make these lists responsive before we go any further I actually want to give those cards a little bit of style because they're looking they're not looking very good at the moment so what I can do is let's give this url a class name of responsive grid just to be a bit more unique and I will copy this and use it in here and I can just do responsive with a line and then for the list let's change the background color to white let's add a little bit of border radius something like two pixels we'll do we can just do it like a material design card and let's set the height to be roughly 240 pixels and I want to make sure that the content inside is actually displayed in the middle just to make it look better so we can say display flex and we can justify the content in the center then we can align items in the center and also I want to make sure that the font weight is set to both and last but not least let's add some shadow on the cards and I've already prepared one which will be 0.3 pixels 6 pixels rgba and for the rgba will be 0 0 0 0.16 and then we'll have 0 3 pixels 6 pixels rgba and 0 0 0 0.23 and that should give us a very soft drop shadow on the list let's have a look so they all stacked underneath each other in the moment and you can't we can kind of tell them about the shadow you can kind of see the shadow but what I actually want is to create some sort of columns and some sort of columns for the so basically all this will be columns and when I shrink down the browser I want those cards to stack underneath each other and be responsive I will show you so let's go back and what we can do now is we can start styling the url and for this we can just use the responsive grid class and make sure that the url is displayed as grid and then what we have to do is make sure that the grid make sure that we add grid template columns and then here we can do repeat and we can set the repeat to be first of all all to fit sorry all to fill and then we can set min max values actually we can do all to fit and all to fill so we can set min max and then we can for example give it the minimum of 230 pixels which will be roughly around 15 RAM I believe if you wanted to do that and then the maximum width will be set to one fraction of the screen then if I save this actually let me add another property I just wanted to add a little bit of breathing space between them and to do this with grid we can just add grid gap and we can set the grid gap to 2 RAM okay let's go back to the browser and as you can see all cards are looking pretty they have the gap between them and they are they're all stuck in on one row and of course you can make them bigger you can make them smaller and they are kind of working off the wrapper div die did so if I was to make this slightly bigger you will see that they are they're stretching out and if I make it smaller you will see that they're stuck in underneath each other because I've set the minimum width to be uh to be 250 230 pixels and let me also let's refresh back and let me also inspect this and do the responsive toggle so if I was to let's say this is desktop and then we're going to laptop you will see how the cards are now moving down and they're stuck in nicely and usually you'd have to do this with media queries but grid allows you to kind of to do this trick which is kind of cool it makes your website a lot fluid you can make your website fluid with ease and as you can see everything is working super well let me close this quickly so this is kind of the important bit of this tutorial but one thing that I need to mention is that if I go to can I use and if we search for grid if I search for grid you will see that the global usage of grid is now 92.19% supported which is really good but also you have to but also you you have to be aware that grid doesn't work on well on some browser it's not fully supported as you can see here on edge internet explorer 11 10 and so on and if I with internet explorer 11 and 10 you can actually add the ms prefix and you can do some tricks to fix things but again it's not fully supported it's not it's not great so watch out for this and I wanted to show you one more thing before I finish this tutorial and if I was to open our website in this is internet explorer 11 I believe you will see that the cards are not working is the grid is not working which is not good and just to show you this is internet explorer 11 and what we can do here is we can actually use the add supports CSS property to check whether the browser supports grid and then do separate styles let me show you what I mean so let's say if the browser supports grid what we can do is add supports and then all we have to do is display grid and then so if it supports grid maybe we can use those styles for those styles for page save this and if you go to the browser you'll see that everything is working as normal but if it doesn't support grid you will see that those styles no longer work because we've wrapped there in the supports display grid property so now technically I can start writing properties outside this for browsers that do not support grid so okay I hope you found this useful make sure that you subscribe to my channel by clicking the by clicking the red button below I upload weekly tutorial just like this and if you have any questions please comment below if you have any suggestions please let me know as well and I will see you next time thank you very much for watching as always my name is ready and you watch my channel ready the brand