Learn To Make A Responsive Website Using CSS Grid | From Layout to Complete Website | Blog Website

[Music] hi everyone in this video we are going to make a blog website using css grid so first we are going to make this layout so this layout contains a header and a side a main section and a footer this is completely responsive so if i inspect you can see that all the sections are neatly stacked so after we have completed this layout we are going to convert this layout into this block website this is also completely responsive so if i inspect you'll see that all the section neatly stacked on top of each other and we have this hamburger icon which i click to bring up the menu all the posts are displayed neatly we have a body background which i'm going to show you how to do it so let's start coding the first i'm going to create this layout and then i'll convert this layout into that block page so in the vs code editor i've already imported the images that i'm going to use these images i've downloaded from unsplash so first i need to create some files first file i'm going to create is index.html second one is style.css which will hold the styles and third one will be app.js i'm going to use a little bit javascript to handle the mobile navigation so in the index.html file write exclamation mark and press tab so this is emit i'm using emit which will insert the basic structure of a html page here let's change this to blog and i'm going to link the style sheet so link style.css and i'm also going to link the uh js file so app.js now in the body let's see here we have this header aside main and footer we have four section so i'm going to use html5 tags first i need to make a container which will be a grid container so container and inside this all the elements will be its child so first i'm going to create a header inside this i'll have a h1 tag header then i'm going to create a side tab inside this i'll have h1 aside then i'm going to create a main tag h1 main after this i'm going to create the footer so we have this photo semantic tag footer and inside this h1 sorry h1 footer so let's open this so now our page looks like this now let's style this here in the style.css file first i'm going to convert that container into a grid so right container first i'll change this to display grid and then i am going to define columns if you see here we have three columns one two and three so remember this if you have n number of column then you have n plus one number of lines so here i have three columns so i'll have four lines so four column lines this will be call one call to call three and call four which is used to place the child elements in a grid so these column lines are used to place the child elements in the grid which i'm going to show you so first i'm going to define the column which we use grid template columns and here i am going to have equal columns three equal column so i can do repeat i can use the repeat function how many times i want to repeat i want to repeat three times and what i want to repeat i want to repeat this fraction unit 1 fr so here we will create three equal columns one fr you can also write like this one fr one f r one f r this will also create that but you can also use the repeat function then i'm going to define rows so in the desktop version we have three rows first row the second row and this third row this first row and this last row footer will have a fixed height and this this row will have a height auto because we don't know up front how much content will add in this section so it's better to give this an auto height so i'll define the rows so create template rows here i'll have 100 pixel for the header auto for the main and the side and 100 pixel this will be for the footer now if i open this you'll see a page looks something like this so here we need to specify the height of this container i'm only doing this just to show you the entire layout but when i'm going to add the content i'm going to remove this height so i'll write height 100 vh so now that we have specified the height let's work on the individual section so first i'm going to target the header which is the child element of the grid some change i'll give the background color clean and here i'm going to specify how i want to layout this header so there are basically four ways in which you can layout the child element so i'm going to show you the first way the cred column start here i'll write from where i want to start the column so for the header i want to start from one column number one this column number one and i want to go all the way up to here so here i'll write grid column and four so let's see see we have this header spanning across all the three columns so let me do one thing i'm going to assign a width to a container 70 percent and i'll set the margin 0 and auto to center it so this is the first way using the grid column start and grid column end now let me show you the second way so here i'm going to use the grid column start and now i'm going to use span three so using this keyword you are telling css that you want this header child to span across three column so this way i don't need to specify the start and the end so if you see we have the same thing so this is the second way let me show you the third way the third way is using grid area so grid area so in here we can also specify the column start column end and row start and row end so first is row start so for the row i want the header to take the first row and column first column then row end in which row i want to end i want to end this in row 2 this row 2 and and which column i want to end i want to end in column 4 so this way you can also place the child element so this is the third wave now let me show you the fourth way in which i am going to name our child element so here i will write grid area i'm going to name it header and in the container what i'm going to use is grid template areas and in single quotation i want this header since we have three columns i want this header to take all the three columns i'll write header header header let's see so we have the same layout so you can choose any way to layout your content depending upon your wish so for this tutorial i will be using span so let me remove all this i'm going to use pan let me beautify this the spacing so we have this now let's work on the aside section so right aside background color change this to orange and i will lay out this as grid uh column start span two see this span two we need to do the span one so this much now let's work on the main so right main background color i'm going to skip this tomato and grid column start span two so this main section will span two columns now finally i'm going to work on the footer background color brown and for grid column start span 3 so we have this layout but it's but it's not responsive so if i inspect so this is not responsive so let's work on the responsiveness so i'm going to use media query so media max with 768 pixel and in here i'm going to target the container and now what i'm going to do is when i hit the mobile version i'm going to just have one column in the desktop we have three columns but in the mobile version we will have only one column so i will just write grid template column one fr let's see we have only one column now then i'm going to change the number of rows in the mobile version we have one two three four four rows so i'll write grid template rows for the header 100 pixel for the aside auto for the main auto and for the footer 100 pixel so this much code we only need to write to make our page responsive so let's refresh one more thing i need to do is i need to target all the section aside main footer so here i'm going to change the grid column start to span one since we have only one column so it will take up entire screen so this is the mobile version and this is the desktop version so we have completed the layout and now it's time to create this blog website using this layout so let's start building the blog site so first i'm going to write the markup html markup and then i'm going to style it so in the header section i'm going to create the navigation so right now inside this i'll have a class logo and here i'll write h2 inside this dev blog after this i'll have a ul inside this li i'll have four li and then inside the li i'll have a anchor tag so here home blog contact let me remove this only i have three so this is the navigation then i'll add the hamburger icon for which i'm going to use html entity so inside the a tag i'll use a class mobile and in here i'll write ampersand hash 9776 so this is html entity for a hamburger icon so let's take a look since the height of the header is 100 pixels you are not able to see this but i'll show you later then i'm going to create the links inside the site section so first will be post for post here i'll have a h1 a recent post then i'll have a ul inside this i'll have li then a tag and in here i'll use lorem 5 then after this i'll create another li inside a then low rim let me first duplicate this five five times inside this i'll have load m4 here i'll have lower m6 norm2 you can also put actual content here but for just showing you i'm using lower encryption then after recent post i'll have a live with the class comments inside this div i'll have h1 recent comments then a ul li inside the l i have a tag i'm just going to duplicate this seven times lower m5 lower m4 node m6 6 lower m2 nodem four and low rim four so we have this comment then i'm going to create archive section i'm just going to copy this paste it here change this to archives or guys so let's see so we have the size section done now we'll work on the main section so inside the main section i have blog roles so i'm going to create a div with a class blog post inside this i'll have a live with a class meta to hold the title and the meta information about the post inside the meta div i'll have h1 desert 7 sorry inside h3 i'll write lorem let's say 8 then i'm going to use a small tab and then write by then inside an anchor admin and in here on september 3 20 21 after this div after this meta div i'll have a dip for post and here i'll have the image which is images and desert and then i'll have a p prime inside this so load m let's say 35 and right at the end i'll have a tag and inside this i'll have these three ellipses so this is one blog post what i'm going to do is i'm going to just copy this this one more time and two times for the second h1 i'm going to change this to c beach and here it will be c for the third let's change this to mountain and in here mountain now finally let's work on the footer so in here i'm going to use the h4 tag and i'll write dev blog ampersand copy this is html entity for uh entering a copyright symbol 2001 to 2021 so this is the markup let's see how it looks like we need to style it it's look horrible right now so now let's work on the styling so i'm going to use a font called poppins which is a google font you can use it for free so search for pop-ins and here i'm going to use the regular weight this one select this and weight 800 which is extra bold now i'm going to click on this import copy this and paste it at the top of your css file now i'll write some base styling base styling let's give some space here first i'm going to target everything by using the universal selector i'll set the margin to 0 padding to 0 and box sizing border box then i'm going to target the body so font family will be poppings and the fallback will be sensitive then i'm going to add a background to the body so using the background property i can use url under the images i have this bg.jpg so let's see so we have the background but it's very huge so i'm going to change this to background size cover now i'm going to target the ul tag and i'm going to change the style property list style property to none then i'm going to target a tag i'll remove the underline text decoration none and i'm going to change the color to hash f9 f9 f9 then i'm going to target h1 and change the color to ffffc i'll set a margin top and bottom 16 pixel right and left 0 and set the font weight to 800 then i'm going to target h3 margin will be 8 pixel top and bottom right and left 0 and font weight will be 800 after this i'll target the paragraph tag i'll set the margin top and bottom 16 pixel right and left zero line height i'm going to give to 1.75 and font weight will be 400 which is for regular after this i'm going to target see how it looks like then what i'm going to do is i'm going to target the images all the image tag i'll set the max width to be 100 and height i'm going to give auto so let's see so it is well inside the container i'll set a margin top 15 pixel on the images so as to have a margin between this two elements let's work on the navigation so here i'll write navigation i'll target the header i'll set a line height to 100 pixels so if you know the height of the container beforehand so in this case we have set this height height to 100 pixel so you can center the element vertically using the lineart property so if you set the line height equal to the height of the container the content inside this will be vertically aligned then i'm going to target the nav i'll set this to display flex align item center and justify content space between i'll set the width of the nav to 70 percent and i'll set a margin zero auto let's see so first let me change the background of the header so change the background from tl to f9 f9 f9 and after this i'm going to target the uli i'll set this to display inline and padding top and bottom 0 right and left 16 pixel and then i'm going to target the a tag so now you li a i'm going to set the color for the a tag in the navigation section 2 20 20 20. so now let's see so we have this since we have the hamburger icon that's why the flex justify content space between is not working so what i'm going to do is i'm going to remove this hamburger icon this this class mobile then we see this page on the desktop version so i'll write mobile and display to none so let's see see now we have this navigation perfectly aligned so now let's work on the mobile version for this navigation so right click inspect so this is how it looks like so here i'm going to use media queries so at media max with 768 pixel inside this i'm going to create inside this i'm going to change the position of nav to static and then i'm going to target the ul and here i'm going to set the width to 100 background color gray position to absolute top 100 pixel left will be zero and right will be zero height i'll set this to 40 viewport height and text align to center so let's see so this is how it looks like i'm going to change the container size to full width in a mobile version so here what i'm going to do in the media query for the container i'll set this to width 100 so this is how it looks like so next i'm going to work on the so here i'll target nav ul li and i'll change this to display block so we have these links like this then i'm going to target the anchor tag so now ul l i a i'm going to change the color to hash fff this this white color so now let me change the color of this hamburger icon because it is not visible right now a dot mobile i'm going to change the color to hash 20 20 20 let's see since i made this hidden here i need to write display block and i'm also going to change the font size to 32 pixel so let's see so we have this icon so now let's work on the javascript part to enable the toggle function so in the app.js file i'm going to target the menu document dot i use the query selector and in here i'll target the nav ul then i'm going to target the hamburger also document.queryselector and here nav dot mobile now when the hamburger is clicked so i'm going to add an event listener add event listener on click and i'm going to write a function which will be called when the menu is clicked and in here i'll write menu dot class list dot toggle and here i'll write a class show the show class is not yet defined so i'm going to define it outside the media query so here i'll write show and display block so now let's see refresh the page if i click why it's not working let me check oh here i need to uh first hide the ul so i'll write display none so now if i click on the sample icon the menu is shown so now let's work on the site section so after the navigation i'm going to create a comment aside in here first i'm going to target the site tag and i'll set up padding to 64 pixel all around so this will create a padding 64 pixel then i'm going to target the comment so aside dot comments and also archives in here i'll set a margin top to 64 pixel see we have this margin top comments and archive so this is the side section let me change the color i'm going to remove this background color to this color hash 3 1 3 three three eight so let's see so we have the other side now let's work on this main section first let me change the color from tomato to hash fff ffc let me also change the color of the footer to hash f9 f9 f9 so let's see so all the colors are changed now let's work on this main section so after this a side section i'll write main or let me write block i'm going to target blog post h1 and i'm going to change the color to hash 20 20 20 then i'm going to target the blog post a this this had been this one and i will write color to torture blue then i'm going to set a padding so blog post padding all around 32 pixel so this is what we need to do for the main section this blog post let's work on this footer so go to this footer tag here so inside this i'll write text align to center i'll change this to display flex align item center and justify content center so let's see so we have this text vertically and horizontally aligned so this is the complete site that we have created using css grid so let's check this on mobile so this is how it looks like in the mobile version and also we have this mobile navigation which is also working fine so i hope you like this video and if you do please give it a like and also subscribe to my channel and i will see you in my next tutorial thank you

Channel: SG WEB DEV

Views: 1,760

Keywords: web development using html and css grid, Responsive website css grid, css grid, css grid website, css grid layout, learn to make a website using css grid, make a website using css grid, 3 column layout website, responsive website using css grid, css grid project, css grid with flexbox, website development using css grid, learn how to make a website using css grid, build a website using css grid, website layout tutorial, build a website layout using css grid

Id: knd0rBIRQ-Q

Length: 28min 26sec (1706 seconds)

Published: Thu Sep 02 2021