Build Simple Responsive Blog Website using HTML and CSS | Step by Step Tutorial

what is up everyone this is omar gowdar from future codas in this video tutorial we are going to be building this simple responsive beautiful blog website using html css and javascript so let's have a look at what exactly are we going to be building in this video so we have this navigation with this navigation links and these navigation links are going to have this whole effect as you can see over here and next we are going to have the main important thing those are these blog posts as you can see they look very beautiful right so for the post i'm also going to add this simple hover effect as you can see and we also we will also add this box shadow and finally we are going to have this footer section so guys one more thing i would like to mention over here is this website is going to be completely responsive so let me show you so this is how it's going to look in the last screens now absorb if i already reduce the screen size as you can see it's still responsive everything like everything still looks good right now again if i reduce the screen size over here as you can see previously it was having two post now it's showing as the screen size reduces as you can see it's now single post and we also get this navigation menu as you can see navigation menu icon now if i click on it as you can see we have this nice little animation up though and as you can see nice little animation [Music] and as you can see it's completely responsive so guys this is what we are going to be building in this video so guys before we start building this please make sure you subscribe to our channel and also don't forget to leave a like on this video so and also mention what's your views on this build so let's start building this [Music] okay here i have already generated the generated the boilerplate of our html and i have also i also linked the local css file and also the javascript file so inside our body let's start building this first thing i'm gonna build the navigation bar so and one more thing i would like to mention over here is i will be using comments throughout this project so let's add some comments saying navigation starts let's make this a comment and one more comment for navigation ends okay inside this i'm gonna define an header tag inside the header i'm gonna have a do with a class name of container and also with class name of header inside this first thing i'm gonna have a logo anchor tag with the class name logo link is not going to go anywhere and this is gonna say future and inside this only we are gonna have a spam tag only with a dot i'm gonna make the dot a different color so that it looks nice so okay once we're done with the logo next thing we are gonna have uh do with the class name of menu toggle this menu toggle is going to be the icon which actually shows in the small screens i need to import this from the front awesome so let's head over to cdnds search for font awesome and copy this link tag and paste it over here now we have access to all the font awesome icons here i'll be using i with the class name of f a s and f a bars now if i save that then we have our icon okay now let's define the navigation actual navigation inside this on it's actually not going to be the due it's going to be the unordered list okay inside this unordered list it's going to have a list item inside this we are going to have a with the href is not going to go anywhere the first is going to say home and this home is also going to be active so i am going to give it a class name of active so that i can have a different styles for that similarly i am just going to copy paste these second one features about contact okay there we have our unordered list or navigation okay now we are done with the html part of the navigation let's actually style it let's head over to our style.css i'm gonna go using the custom font from the google fonts so let's import those let's head over to google fonts i'll be using the open science okay this one let's import the light 300 let's close this photo regular 400 700 and finally extra volt 800 okay now let's copy the import code close this and paste it okay now by default our browser applies some default margin and padding i need to get rid of those i will select everything and margin 0 padding 0 box sizing of not box shadow box sizing of border box and i'm also gonna add the font family which we already imported that is open sans and also a fallback front of sans serif there we have our font applied now let's give that body a different color background color of gray okay little bit green now remember i gave a class name of container right this container i will be using multiple times so i i am going to make it universal container for that i am going to set the max width to 1200 pixels width of 100 and to make the make everything align centrally i am going to use margin 0 and at o okay if i resize this as you can see the max width is 1200 pixels i think it should be from over here to i think over here and i'm gonna i'm making margin zero and at all so uh the content is actually being over here okay now once we are done with that okay now let's actually target the remember i also gave an header class so when this container is going to have the header class it's going to be for the navigation so let's uh you over here define the container which is having the class with class name of header i will say a display of flex to make everything align in the row align items to the center and justify content to space between okay there we have it and i'm also gonna add a padding one rem to the top and bottom and 0.875 rm to the left and right as you can see they are touching right they are touching to the sides i don't want that to happen so here 0.875 rem okay there we have it now i don't want to display this menu toggle icon in the last screen so i need to get rid of that that's having the class name of my new toggle let's select that simply i will say display of none so that it doesn't display that's gone now let's target the header i need to actually give it a background color and a box shadow header background color of white okay now i need to actually add the box shadow it's going to be a very big box shadow code and it's going to be 0 0 and 0 and alpha is going to be 0.1 0 pixels 10 pixels 15 pixels minus 3 pixels still i'm not going to turn the done with border sorry box shadow still rgba 0 0 0 and alpha values this time is going to be 0.05 and 0 pixels 4 pixels 6 pixels and minus 2 pixels okay let's have a quick walk through okay that's it for the box shadow now i need to actually make the navigation actually stick right even if i scroll down you might have already observed in the final version that if i when i scrolled the navigation was actually sticking to the top right it was it was actually sticking to the top okay it was fixed okay here i will say position of sticky it sticks to the top zero and i also need to add the jet index of 99 so that it stays above all of the content okay now you are not gonna see that effect but of course when i add some content and if i scroll the header this navigation is going to stick to stick to the top okay now let's continue styling and i need to actually target the anchor tags i don't want the default text decoration so i'm going to set it as none that's gone and i also want different color for those it should be 0 8 2 0 3 2 okay that's the color which i want no let's actually target the header uh logo i want that to be bigger right okay let's target that that should be header and logo for that i need to actually increase the font size or to 1.5 rem okay that's big now now uh actually i gave it a the dot is actually in the separate span right i can actually target that span for that i will give a color of crimson okay there we have the dot a different color now let's actually target this navigation which is inside the header and navigation okay let's do that header navigation list style to none i don't want those dots so gone and the display of likes by default they are in the column right so saying column sorry display flex is gonna make them row okay now let's target the individual list element list item actually i need to add some space to the margin left of 1 rm so that it leaves some space and i want the font size of little bit brig sorry big 1.1 rm okay there we have it now i need to actually add some padding of let's say 0.4 rm okay that's looking better now now remember i gave a separate active class for the home right let's work on that i gave a list item an active class so when that list item is having an active class i want a border bottom of 2 pixel solid crimson okay okay actually the active class is being applied to all the list items so let's remove that okay there you have it the active class and i also also mentioned that i also want to add the whole effect when i hold the the border bottom setup should be there right so i'm just going to copy this instead of active i'm just gonna say soda class hover okay there we have our whole tiny little hour effect okay that's it for the navigation i guess let's make this sorry okay let's make this bigger and see yeah that's how i want it to look like okay actually and we are done with the navigation don't worry i will do the responsive part at the end of this video okay now let's head over to our index.html and we need to actually work on the main content now the navigation is done okay now here let's add some comment he's saying main content starts here and one more comment for main content star sorry ends here okay now i'm gonna define a container remember i said the container i will be using that container class over and over again here it is okay and i also want it to be have the class name of main so inside this uh remember uh in the final version which i showed there were two columns right uh there were four posts and two columns each having two posts okay columns okay now let's define those first i'm going to add column sorry comment column one one more command for column two here let's define the column okay okay that's it for the column one and let's also define another column okay inside this column let's div let's uh actually uh okay we're gonna have a post right inside this column and inside this column also we are going to have a post okay let's start building that okay here first first thing i'm going to have is img image and the source is going to be i think i didn't get the images so let me grab those images first okay the images are actually over here don't worry you are gonna get the link to do to these images in the description of this video you can get there get these images from over there so the first image which i will be using over here is inside the images folder that should be post one dot jpg okay there we have our big image okay now right after the image i'm gonna define one more view with the class name of post info it's going to contain the information about our post the first information is h2 the post title of course become web developer assume if i if i am writing a blog post on becoming a web developer okay that's the title and right after this title we will have the user info it's going to contain the information about the user the user is going to have the avatar images and author.png and he is going to have his name let's say my name okay and it's going to have one more span for a date let's say it was published august 1 2021 let's add a comma beside my name okay and we are gonna have one more span tag for the hashtag that's going to be for the tech okay let's see okay there we have our avatar and my name okay everything is coming okay and right after the user info inside the post info only i will have the description right so lower end with 25 words but there we have our dummy text here actually and okay okay inside one column we we have this uh one post and okay inside one column we have this post and inside one more column i'm gonna paste this post let's copy this let's see okay over from here i'm gonna copy this post to another column okay paste and the image which i will be using for the post is for this post sorry post three j page okay now we have the two post one one column over here and another column over here okay now we need to actually fix these using css so let's head over to our css i'm gonna add some comments main okay main [Music] win and post okay as i said the main i'm gonna make the column i want the two columns right so width is going to be 48 percent it's not going to get applied yet we need to actually target the post image post it's having the class name of post img right let's see the post okay i need to actually give a class name for this post img i suppose time g okay let's target that post img the width is going to be 100 make you make the 100 percent and there we have it 100 it's actually 100 of this column with 48 okay the height is going to be 350 pixels and object fit to cover so that it doesn't ruin the aspect ratio of the image okay okay now um actually i need to give the class as well to this over here i'm the sorry post img okay let's resize this and see what do we have here okay there we have our post post looking very ugly let's use css now okay i'm going to target this avatar which is let's say user info and img okay let's target that user info img i'm going to give a width of 2.5 rm to make it small now let's target the user info which is having all of this information that should be this user info display of flags align items to the center and margin one rm to the top and bottom and zero to left and right okay let me however okay now let's target the span tags user info those span tags margin to the left of 0.5 rm and also a color of gray okay there we have our okay now i need to actually make this a different color right for that i need to actually say user info and span i'm gonna target the nth child of four and for that i need to set the color as crimson okay there we have different color applied to that okay now let's target the paragraph tag which is inside the post you can target by saying post info paragraph or you can directly say post paragraph both are same okay here i will say post paragraph font size of 0.9 rem line height of 1.5 rm opacity of 0.6 okay now text align to justify okay now let's actually target the whole post i want the background color to white okay there we are background color applied white and i need to add the box shadow rgba 0 0 0 and alpha value 0.1 0 pixels 10 pixels 15 pixels minus 3 pixels and one more rgba value of zero zero zero and zero point zero five zero pixels four pixels six pixels minus two pixels okay there we have our slight little box shadow okay now i need to actually set the margin to the top three area so that it was actually touching the navigation bar right so i don't want that to happen so i need i set the match in top 3 rm let's make this a bigger okay that's how it's going to look as you can see now let's work a little bit further more now let's target the post info that should be this one post info padding off one rem all around so that it applies padding over here okay now it's time for bringing this column over here these are actually two columns right this post is inside one column and this post is inside one column by saying display flex we can bring this over here right so that's what i'm gonna do what i'm gonna target is the container with the class name of main i can't target the container because that's i'm also using this container over here right so i can't do that i can target the container with the class name of main i can do that as you can see we have the column one and column two okay let's set display for flex and see what happens container main let's say display flex okay there we have it our post we are still not done yet i need to say justify content of space between so that it loses some space and i need to actually add some padding padding is going to be zero to the top and bottom and point eight seven five rm to the left and right okay there we have our post right now uh let's actually add some margin to the top it's actually leaving a lot of space at the margin top i don't want that so here um i need to set it as minus minus 1.5 rm so that little space is applied if you want more space you can just remove this okay okay now let's add the hover effect for these okay i can do that by saying post info right post info is having the s2 so i can do that post info s2 i want the text decoration to underline actually when i hover on it and the cursor should turn to pointer okay that's it there we have our effect okay let's add few more post one in this column and another one in this column let's copy this post one more time okay we have to post over let's see once let's even see okay we have one more post over here i need to actually change the image let's set it as post 2 and finally let's also copy paste these one more time so that each column has two posts and this one is post four but this one is not going to be jpeg it's just dpt okay there we have our four post now we are done with the pose and let's actually work on the footer inside the index.html where we have the ending over here the main content ends over here when the main content ends the footer starts and one more comment for footer ends let's define the footer oh mod footer okay inside the footer we are going to have a due with the class name of container and footer inside the footer it's going to be simple just a paragraph saying which are called us copyright copyright symbol i'm gonna grab the copyright symbol and paste it and 2021 let's see okay there we have our footer that's it for the html now let's add the styling for the footer let's target the footer margin to the top of three rem so that it leaves some space okay and background color of white and let's add some box shadow of zero pixels zero and five pixels and rgb value of zero zero zero and alpha value of point one so there we have a slight little box shadow okay now let's target the container with footer for that i need to actually set the text aligned to the center so that text comes to the center and finally a padding of one ram to the top and bottom and 0.875 rm to the left and right okay there we have our footer let's resize this and check okay there we have our completed blog website but it's actually not done yet that's because let me show you it is not responsible as you can see it's not even responsive so we need to add some media queries to fix this okay and i'm gonna add some media queries let's see let's bring my vs code over here okay that's fine now let's add some media queries and make this blog responsive observe guys i'm gonna as media query max width of 800 pixels when the max width is 800 pixels and below that these styles are gonna apply for that first i don't want to display the navigation i want to display the navigation menu right so here i will target the header navigation that should be let's let me show you visually okay we are targeting let's see and we are targeting the header and inside that we are targeting the navigation i don't want that and all i have to do is display none and it's gone and i want to display the menu toggle icon remember i set it as display of num here i'll say container sorry it should be it's in the header right in the header menu toggle and i will say display of flex so that it appears and let's make it a little bit bigger 1.3 rm font size okay and cursor to pointer so when i hold on it the cursor is turning to pointer let's make this small okay okay once we are done with that okay and i also want to don't want to display two posts over here right i want to display full one post so that for that let's target the container remember for the container main i set it as display of flex and yes display of flex by default it's going to be in the row right here this container and i can't actually target the whole container class i need to actually target the main okay now let's set it as display of flex nothing happens yet but i'm gonna change the flex direction to column see guys the flex direction is going to make them appear in the column wise okay now remember i also set the column width to 48 right i need to actually change that where is it okay in the main i target the column and the column width i set it as 48 now i want the width to 100 so i'm gonna target that main and column width of 100 okay there we have our post full post if i resize this screen again as you can see it's completely responsive and one more final thing which we should work on is this uh mobile navigation mobile navigation okay if i click on this menu should open up right so that's what i will be working on now now we need to actually work on the javascript okay let's head over to our script.js file so to navigation to work when i click on this uh it should actually add a cl navigation to i it should actually add an active class to the navigation right so let's actually grab those first i need access to this menu icon so that i can add an event listener to the click and i also want the navigation so let's grab those here i will define const menu toggle i can grab get document dot query selector it's having the class name of menu toggle okay i have access to the button now i also want the access to navigation i will say document.queryselector and navigation remember i'm i'm getting access to navigation because that's because in the media query actually set it as display of none right okay now we once we have access to those both let's add the menu toggle an event listener for that so that i can listen for the click when the user clicks on the menu i need this function to run inside this function when you toggle i'm gonna change the class of the menu toggle and toggle an active class saying the menu is active now and i want to display the menu okay similarly for the navigation and i'm also going to add the navigation active class to the navigation let me show you so that you can understand where we have the menu toggle sorry this one navigation observe when i click on it as you can see the active class is being added to the when you toggle as well as the navigation okay there we have it now once we add the act to class we need to actually do one more thing over here if the menu toggle dot class list if it contains an active class if the menu toggle actually contains an active class i don't want to display this icon right i want to display the close icon so for that if it contains like that i'll say menu toggle i will just change the inner html and over here i will define the new icon actually okay inside the codes i with the class name of fas i think it should be in the double quotes now fps fa times and let's close those similarly in else case and i want it to be the same icon fas fa bars so that it toggles okay let's close this okay observe when i click on it as you can see the icon actually turned to the cross icon and when i click on it again the menu bar is appearing okay that's it for the javascript now let's actually head over to our style.css okay now we need to actually work on this let's click on this so now we have added the we have it okay active class based on that here if the navigation is having an active class if the navigation has having the active class for that i need to set the display of flex so that menu appears position of fixed top for rem from the for top let's add some background and set it as white width of 100 so that it takes all the width and and as you can see it's in the left it's actually leaving some space so i need to fix that left 0 done justify content to the center and flex direction of column padding of 1.25 rem and finally the animation which i need to define animation is going to be the animation name is going to be slide slide is going to be for 0.2 seconds and is and i also need to set the align items to center okay there we have it now the the one thing i need to do is add the animation so to add the animation i'm going to use the keyframes here i already defined over here i now need to define the actual animation keyframes slide zero percent at the zero percent it's going to be at the left minus 300 pixels and at the 100 percent is going to be at the left zero now again now if i click on it as you can see the animation is appearing now few more things which i need to do here is right after the keyframes i need to target the header sorry the navigation inside the header and the list item i need to set the margin to the left remember i actually set some margin to the left at the beginning so i'm gonna set it as position to the left zero rem and padding one rm to the top and bottom and zero rm to the left zero to the left and right okay now if i click on it as you can see there we have our mobile navigation menu and we have just completed our build let's see there we have our completed responsive simple blog website let me know in the comments what do you what you think about this okay guys it's done that's it guys for this video hope you guys enjoyed and hope you guys learned something from this video for more videos like these please make sure you subscribe to our channel and also don't forget to leave a like on this video so i will see you in the next one thank you for watching [Music]

Channel: Future Coders

Views: 1,632

Keywords: responsive, responsive website, how to build website, how to create website, html css, learn how to create responsive website, tutorial, html css tutorial, responsive website tutorial

Id: tl5GQQAg1u8

Length: 41min 13sec (2473 seconds)

Published: Sun Aug 15 2021