Make a Blog Website Using CSS GRID

[Music] hi everyone in this video we are going to make a blog website using css grid so let's take a look at what we are going to make in this video so here is the site so at the top we have this navigation section which consists of a logo and menu then we have this hero section which is divided into two parts and then we have this overlay after this we have this block section with some blogs neatly stacked and this aside section this is also created using css grid and finally we have this footer i've also added this pagination which i'm going to show you so here i've also added the scroll to top button so which one clicked moves to the top of the page so this site is completely responsive so if i right click and click on inspect and view the site on this ipad if i click on this hamburger icon we have this menu and all the sections are neatly stacked and also if you view this page on a mobile version it is completely responsive and this button also works so this is what we are going to make in this video using css grid so let's start so for this project i will be using ico font so search on google ico font this is a link click here and you need to download the font so click on this button it will be downloaded and then extract and just bring that font the entire folder into the project and also i'm going to use the google font so for this i'll be using moolish this one the font width that i'm going to use is 400 which is for regular and uh 500 and 700 so 500 and 700 and also i'm going to use one another font which is called playfair display so click here browse font and here play this one play fair display and font weight i'm going to use 800 so just click on this select this type now click on this import button import checkbox copy this and paste it in the css file at the top so in this way we have added google font so here i have already imported the folder project folder and i have also imported the images that we are going to use in the index.html file press exclamation mark and press tab so this will insert the basic html structure here i am going to change this to food blob title then i'm going to link the style sheet so link style.css and before this style of css i'm going to also link the ico font so link ico font and this ico font dot css or you can go with ipo ipophone.min.css then i'm going to link the script so script src app.js so in the js file i'll be using some javascript to code the hamburger icon and that scroll to top button nothing much but just a little bit javascript now in the body section i'm going to create the navigation first so here i'm going to wrap the entire navigation within a container i'll create a site container the width of the site container will be 80 and it will be centered inside this i'll create an app here i am going to create a div with the class logo and inside this i create h2 tag with food blog now outside the div with the class logo i'm going to create a div with a class menu inside this i'm going to use the anchor tag only to create the menu so first will be home home now i'm going to duplicate this so press option shift and down arrow to duplicate this i'm going to duplicate this four time this will be about about here blog and this one contact so blog and contact so now for the mobile menu i'm going to use the ico font after this dev created with a class mobile menu and inside this i'm going to use the ico font so i with the class ico font navigation menu so this code you can get from this this website view all icon and search for menu click on this this is the code you can click on this button it will be copied and now you can just paste this so this is the markup for the navigation section so let's see how it looks like so i'm going to use live server so right click and click on this button open with live server so this is how a page looks like now let's add some basic styles so go to style.css and after this i'm going to add some basic styles so root primary color this root tag corresponds to the html tag the primary color will be 20 20 20 secondary color this color will be hash for f7 fc and then i'm going to use a gray color hash a 6 a6 a6 now after this i'm going to target the html tag you can also write the property inside this root tag but i'm going to specifically target html so font size will be 60 2.5 percent this will change the ram unit so by default rem unit 1 ram equal to 16 pixel so what is going to do is that one ram now will be 10 pixel now scroll behavior will be smooth so that we have this smooth scrolling effect now i'm going to target everything using the universal selector then i'm going to target before after here i'll write padding 0 margin 0 and box sizing border box now i'm going to target body here i'll change the font family to mullish and the fallback will be sans serif then i'm going to target h1 h2 h3 here i'll change the font family to playfair display play fair display and the fallback will be serif font weight will be 800 volt color i'm going to use this primary color and margin since we have removed the padding and margin from every element i am going to set a margin top and bottom 1.6 ram and 0. so here 1.61 will be 16 pixel after this i will target the paragraph font weight will be 400 and margin top and bottom 1.6 rem and 0 then i'm going to target h1 here's change the font size to 40 pixels so 4m and i'm going to change the font size of h1 tag in mobile and ipad so here i'll target at media only screen and max width 768 pixel so anything below 768 pixel i'm going to change the font size of h1 to 3 ram after this i'll target h2 the font size will be 3 ram letter spacing i am going to add 1.5 pixel then i am going to target h3 font size will be 2.5 ram and letter spacing 1.5 pixel finally h4 font size will be 1.6 ram now i'm going to use span element also so span color will be var this gray color font size will be 1.5 ram and the font weight will be 500 then i'm going to target the paragraph so here i need to add some property to our paragraph so inside this i'll set the font size to 1.6 ram the color will be this primary color and line height will be 1.5 percent after this i'm going to target the anchors so text decoration will be none margin top and bottom 1.6 rim and right and left 0 the color will be var gray color and the font size will be 1.6 ram and border i'm going to set a border bottom border bottom 2 pixel dotted the style will be dotted and the color is going to be primary color now after this i'll target the site container [Music] the width will be eighty percent and margin zero top and bottom and right and left auto so that it comes at the center then i'm going to target images max width will be 100 and height will be auto to make our images responsive and finally i'll set some styles to hr margin top and bottom 16 pixel right and left 0. so these are the basic styles that we need to add now let's specifically style the navigation so i'm going to begin a comment navigation here i'll target the nav this nav so first i'm going to make this flex and line item center and justify content space between so let's see so this is how it looks like then i'm going to target the anchors so nav dot menu a here i'm going to change reset the anchors so i'm going to remove the border bottom none and i'm going to change the color to primary color font weight will be 700 and the margin left will be 24 pixel some margin from this side now for the desktop version i don't need to show this hamburger icon so i'm going to remove this i'll target the class mobile menu and set the display to none so this is the navigation now let's create the navigation for the mobile version here i'm going to write some media query so add media only screen and max with 768 pixel here i'm going to show the mobile menu so mobile menu display block and i'm going to change the font size to 24 pixel let's see so we have this menu now i'm going to target this entire menu so menu first i'm going to set the position to absolute but before this i need to change the position of this nav to relative so that it moves relative to this navigation relative now just to show you i'm going to set a background color red so this is how it looks like i'm going to change the width to 100 percent okay and i'll give it a top 100 and let's see so it moves down and change the z index so that it comes at the top of everything and finally i am going to set display to none because i want to see the menu when i click on this hamburger icon so we will write this code in the javascript then i'm going to style the anchors so for now just i'm going to come in this and i'll target the anchor inside the menu so padding 32 pixel top and bottom and right and left 0. i'm going to change the font size to 18 pixel and i'll set this to display block let me show you why i'm doing this remove this so this is how it looks like i'll set this to display block now it will come like this so after this i'm going to create a class called show and here i'll set display to block so when the user click on this hamburger icon i'm going to toggle this show class in the app.js file so this much css we need to write now go to app.js file and in here first i'm going to select the mobile menu so mobile menu document dot query selector mobile menu then i'm going to add event listener so mobile menu dot add event listener and i'm going to check for click so when a click happens i'm going to run a function here i'm going to select that menu this menu because i want to toggle this on and off when the button is clicked see i'll write document dot query selector i'm going to select that menu class list dot toggle and i'm going to toggle that class show so this much code we need to write so if i click here let me first hide this here i'm going to uncomment this go back if i click here we have this navigation later down the road i'm going to change the color but for now i'm going to just leave it so this is a navigation done next we are going to create the hero section here i forgot to add one thing the search icon that i've showed you so i need to add a anchor here so search and in here i'm going to use the html entity for the search icon so ampersand hash x 1 f 5 0 d so this is a html entity for the search icon so let's see so this is a search icon so now let's work on the hero section so after this div the site container i'm going to create a section first let's write a comment hero hero section then i'm going to create a section this is html5 tag with the class hero now inside this i'll have two parts this part and this part so i'm going to create a div with a class left and a div with a class right this right div i'll have this uh this dip this title div with the class content box so i'm going to create a div inside the right div called content box now inside this i'll write span and i'll write some content healthy food then i'm going to create h1 tag let's copy this text and paste it so this much markup we need to uh write for the hero section now let's style this let's first see how it looks like so i'm going to close this two tags so this is how it looks like now in the css file after this navigation create a comment hero section then i'm going to target the class hero i'm going to change the display property to grid and here i'm going to create two columns so this column and this column so grid template column and for the first column i'll use two fraction unit and for the second column i'll use one fraction unit so the first column will be twice as big as the second column after this i'm going to target the left class so hero left i'll change the background image to images and i have this bg sorry images bg.jpg i'll change the background size to cover height i'm going to set 60 vh 60 viewport height background repeat will be no repeat and background position will be center so let's see so we have this image now i'm going to target the right class so hero dot right i'm going to change the background color hash c 8 d 3 double 6 so this green color now i'm going to style this content box so let's target this so hero content box so to position the content box here i need to set i need to first set this hero section this entire hero section position relative because i want to move the content box relative to the zero section so i'll set the position to relative and in here i'll set the position to absolute i'll change the background color to hash fff fff ffc and i set a padding top and bottom and right and left all around padding 32 pixel i'll set a width 35 percent and i'll set the top property to 50 percent and left property to 65 percent and i've set a transform translate minus 40 percent and minus 50 so let's see so we have this content box now let's work on the mobile version so right click inspect so this is how it looks like so in the mobile version i require the media queries so media only screen and max width 768 pixel first i'm going to target the hero and here i'm going to change the column number two only one so one fr i'll have only one column so let's see so i have this only one column now i'm going to target the content box i'll set a top 50 percent left 50 transform translate minus 50 percent minus 50 to move it to the center width will be 80 percent and background color will be white so let's see so this is how it looks like in the mobile version so this is the hero section next let's work on the blog section now after the zero section i'm going to create a comment blog section again i'm going to wrap this block inside the site container container i'm going to use the html5 tag main and in main i'll have two parts so this part which will consist of the blog role and this part which will consist of this a site section so in the main i'm going to create a class called blog and also i'm going to use this aside tag which is new in html5 now inside the blog we'll have the blog post so i'm going to wrap every blog inside our div with the class blog post so a blog post consists of an image and this content so this is also divided into two parts so the first part will be thumb nail this will have the image and the second part will be block content so in the thumbnail i'll add the image image images let's choose one now inside the block content i'll use a span and write keto diet 12 to 2021 then h3 top 10 keto diet then a paragraph with some lorem text i'm going to just copy the text from here let's copy this paste it to enable word wrap let's go to view and word wrap after this we have the link so a and read more so let's see how it looks like so this is how it looks like we need to style it so this is the markup for the blog rule this uh this entire deck blog post now i'm going to just copy this entire dev this entire blog post and paste it five more times so we have six in total block rule so 2 3 4 5 6 let's change some content in the second row let's copy the text copy this and paste it here likewise copy this paste it here so i'll come back after doing this so i have changed the text now let's see how it looks like so this is how our blog role looks like now so go to style.css i'm going to style it so after this section i'm going to write a comment blog then i'm going to target the main tag and set this to display grid and i'll have grid template columns two fr for the blog roll and one fr for the size section and set a margin top 50 pixel so this main margin this one 50 pixel and a grid gap of 60 pixel now let's style the blog i'll set this to display grid and the blog will have two columns so i'll set the grid template columns 1fr 1fr and grid gap will be 48 pixel so this is the block part this is the blog block section we have this two columns that's why i've written this one fr and one fr now i'm going to style the thumbnail so blog thumbnail and i'll set this to object fit content so that it neatly fit inside the container then i'm going to target block post i'll change the background color to this secondary color i'll set a margin top and bottom 24 pixel right and left 0 and padding all around 16 pixel let's see how it looks like then i'm going to target the block content and set a margin top 24 pixel so this is how a blog roll looks like in a desktop site so let's work on the mobile version so i'm going to just change the number of columns in the mobile version so target this so at media only screen and max width 768 pixel i'm just going to change the grid template column to 1fr in the mobile version see it looks like this now after this let's create the pagination back in the index.html file and inside the blog class see this one this block class i'm going to create a div with the class pagination here we'll have some anchor tag so ahref so first i'll insert a left quotation mark for that write ampersand la quo then we have this link first link will have a class call active one then again a link two and we'll just copy this three four and copy this a paste it here and just change this to r so this much markup we need to write for the pagination so let's see so this is how it looks like right now i'm going to style it let's style it here dot pagination i'll set the display property to inline block then i'm going to target the active class so pagination dot active i'll set a border 1 pixel solid primary color and a background color set to the secondary color and then i'm going to target the links so pagination a the color will be primary color i am going to float this to left padding top and bottom 8 pixel right and left 16 pixel text decoration i don't need to add but let's add and border will be zero so let's see so we have this pagination so next i'm going to work on the outside section so inside this aside tag i'm going to create a div with a class commented post see this one this i'm creating this most commented post here i'll create a header h3 most commented post now after the header i'll create a wrapper div this wrapper div will hold the thumbnail so thumb and the content so inside the thumb i'll use this image images let's go with one in the content let's copy h4 and paragraph tag with some lorem text and finally a link in which i'll write zero comments so this is the markup for this commented section we need to style it first i'll write all the markup then i'll come back and style it so copy this wrapper this entire dev just copy this and paste it three times one two three now i'm going to change the content so which i'm going to do off screen and i'll come back when i'm done so after changing the content i'm going to create another div for the recent post section so outside this div i'll create a div with a class recent post i'm going to create a header here h3 most recent post then the same thing i'm going to do i'm going to just copy this wrapper paste it after this header so one two three four so let's see how it looks like so we have all the content now let's style it the style.css after this block section create a command aside then i'm going to target the wrapper i'll change this to display flex so this is going to move this in a row so the default behavior of a flex is to align the content in a row that's what i want i'm going to change the align property align item to center now i'm going to target the thumb class which contain the image and change this flex 1 and i'll change the content class flex 2 and i'll set a padding all around padding 16 pixel let's see now i'm going to style the paragraph inside the wrapper paragraph also span and also a in the font size i'm going to just shrink the font size to 1.4 m and margin i'm going to remove to zero let's see so this is how it looks like now let's see this page in the mobile version now let's work on this so at media so at media only screen and max with 768 pixel here i'm going to target the side container and i set the width to 100 and also i'm going to set a padding top and bottom 0 right and left 24 pixel then i'm going to target the main element and i'll change the grid template column to only one fr let's see so that we have only one column in the mobile version and also i'm going to target the wrapper class and set a margin top and bottom 24 pixel right and left 0. so this is how a page looks like in the mobile version and in the desktop we have these two columns i'm going to change the images let's change the images really fast 3 randomly i'm going to change the image to nine let's see okay so this is the main section now finally let's work on the footer so before writing the html markup for the footer let's understand the layout so our footer consists of two sections this top section and this bottom section and this top section is divided into three columns and this bottom section is divided into two columns so this is the general layout of a footer so let's write the markup so after this div the site container div this tip this site container i'm going to create the footer so inside the footer tab again i'm going to create the div with the class side container now inside this first i'm going to create the top section so footer top and then the bottom section inside the footer top we have three columns so left center and right so now inside the left section i have h3 food blog and then two paragraphs i'm going to copy the text from here so just copy this text paste here and duplicate this one more time so option shift and down arrow this will duplicate this now in the center this div i have a h3 recent post and after this h3 i have some links inside the link i have paragraph i'll write diet rich in carbs just copy this five times change the text so let me do this off screen i will come back so this is the content of the center div now in the right side this this right div again i'm going to just copy this paste it here and change this to recent comments and for the links i'm just going to rearrange this press option and arrow up and down arrow to move the links so this is the markup for the footer top now in the footer bottom we have this two columns so in the first column we have the link and the copyright message and then we have the social icons so in the bottom footer i'll first create the links for that i'm going to create a div with the class footer menu here i'll create a ul inside this li a first one will be home just copy this four times this will be about blog and contact so this is the menu and after this link i'm going to add the copyright so copyright message copyright and press and copy this is the html entity to insert the copyright symbol 2021 food blog now outside this food footer menu but inside the footer bottom i'm going to create a div with the class footer or social icons here i'm going to use ico font so i with the class ico font facebook duplicate this four times change facebook to twitter this to instagram and this to linkedin so let's see so we have all the markup now let's style it so back in the style.css file create a comment footer so first i'm going to target the footer tag background color i'm going to change this to hash 21 2124 i'll set a margin top 100 pixel and then set the inner padding 100 pixel top and bottom right and left zero so let's see so this is how it looks like now i'm going to change the h3 the footer h3 color will be hash f this color then i'm going to target the paragraph the span and the anchors and change the color to hash 9 b 9c a1 let's see so after this i'm going to set this footer top display property to grid and i will create three columns so i'll target the footer top i'll set the display property to grid and grid template columns will be three so i'll use the repeat function three and equal column so one fr let's see so now we have this three column we need to center align this the entire container so margin zero auto and i set a grid gap to 16 pixel let's see and i'm also going to centerline the content so justify item to center so this is the top section i forgot to add the hr tag so let me add this here i'm going to add the hr tag then let's work on the footer bot but before that i'm going to add some margin to the hr so footer hr margin top and bottom 60 pixel right and left 0. after this i am going to target the footer bottom in here i'll set a margin top 50 pixel here i'll use display flex and justify content justify content space between so let's see and get something wrong let me check for the bottom we have this two divs it should work so it's working since the color of the icons are black that's why it's not visible so let's work on the li footer menu li list style type will be none and display will be inline block and margin right will be 16 pixel then i'm going to work on the social icons so social icons high tag the color will be for secondary the font size will be 16 pixel i'm going to set a border so border 1 pixel solid the color will be secondary color and border radius will be 50 to make it a circle and padding all around will be 8 pixel so let's take a look so this is how it looks like finally i'm going to work on the mobile version so at media only screen and max with 768 pixel and i'm going to change the footer top the number of columns to 1. so create template column 1 fr and justify items start let's see so this is how it looks like in the mobile version and at the desktop it looks like this so this is the complete page that we have created using css grid and at last and i'm going to create the scroll to talk button so for the scroll to top button i'm going to go back in the index.html file and create a div with the class scroll top as a very beginning now i'm going to style it so let's write the css here scroll top first i'm going to set the position to fixed and i'll set the bottom to 20 pixel right 240 pixel i'm going to change the z index to let's say 99 background color will be c8 d366 the color of the text will be white let's add the text i'm going to add a simple carrot symbol i'll set the cursor to pointer padding will be top and bottom 8 pixel right and left 16 pixel font size will be 20 pixels and font weight will be 800 so let's see so we have this scroll to top button so for the scroll to top button i need to add two functionality the first functionality is when i scroll down 100 pixel from the top of the page it will reveal itself and the second when i click on this uh i'll move to the top of the page so in the app.js file we need to add the functionality first i'm going to select the button so scroll btn document dot query selector scroll top now for the first functionality first function i'll add event listener to the window add event listener and i'll look for scroll event then i'm going to run a function now inside the function i'll check if document dot body dot scroll top is greater than 100 or document dot document element which refers to the root element scroll top is greater than 100 i am going to show the button so style sorry display equal block otherwise i'll hide this button so copy this paste it here and display none so let's see so unless i scroll down 100 pixel the scroll button is hidden so this is the first functionality now for the second functionality second function when i click on the button so scroll button dot add event listener i'll look for click i'll use arrow function i'll set document dot document element dot scroll top equal zero so this much code we need to add so now let's scroll down and click on this button it will take me to the top of the page so here i want to show you one thing if i remove the scroll behavior and now if i click it will abruptly take me to the top of the page but i want that scroll behavior to be smooth so that's why i added this whole video smooth so this is the complete page that we have created using html and a css grid i hope you like it and if you do please give it a like and also subscribe to my channel for this type of content thank you

Channel: SG WEB DEV

Views: 908

Keywords: Learn to make a website using css grid, website layout using css grid, css grid layout, website design, css grid, css grid project, css grid and flexbox, css grid vs flexbox

Id: INIW731cxIo

Length: 47min 14sec (2834 seconds)

Published: Sun Sep 19 2021