Bootstrap Blog | How to create a Responsive Blog using HTML 5 , CSS3 & Bootstrap 4 | Build a Blog

hey there everyone what's up this is ram here and first of all a very happy new year to all of you guys and today i hope that you all are doing well so today we are going to create a blog this is not the final one uh like it is going to be a full project or a project or a series of blog project the first one in this first one we are going to create a kind of overview of a blog you guys can see that here is the title the navigation bar plus when i click on the button it has a drop down and drop down menu in which we have list and grid then archives okay and it has this side um popular post on the right side so the images i have got i've added in this one i've got from pixels.com and then it has a video post also another post and some gallery posts so um cookies post it's it it has a footer and you know what it is not going to be the final one in the next video we are going to create the grid then in uh after that list plus the posts like it is going to be a uh the next four or five videos are going to help you guys how to set up a complete blog okay so let's get started uh one thing more that it is completely bootstrap project and it has more bootstrap than css okay css only used for the colors but and it is responsive too let me show you the responsiveness here is the let me show you okay it's not going to be there that's just because of the browser so here is the hamburger menu and it is um when we click it appears nicely then you guys can see that the image the post button then the video post button image sorry video post text and the button so i hope that you guys are going to like this one everything stacked on top of each other nicely and elegantly so i hope that you guys will like this one so let's move on to the editor and start working with this project i'm using vs code editor if you are following me you know about it and if you are new here then for you guys it's a vs code editor i've already created a folder on my desktop the folder name is blog rack or recording i have images folder text file but this is not for you guys when i'm going to use this one then you will understand why i have created a text file in this folder so here is the new file let me name it index.ht html and another file which is going to be mean dot css that's all okay now i'm i have already installed a bootstrap for extension so i just click on it and i just type b4 press enter and the starter template of booster 4 is here in the title section i would like to say blog record okay then i would like to add i would like to link the css here so link related to style sheet and each ref so main dot css then i would like to go with for awesome icons and uh i have a code of awesome with me for an awesome kit code for you guys if you're new here then let me tell you go to for awesome.com website and mention your email address and follow the instruction you are going to get from the from them so follow those instructions they are going to send you the code add that code here okay or you guys can download that also but i'm not downloading it i just use the cdn or the this code i've got from them then i would like to use the font uh google fonts so okay here is the font awesome so as i've told you just go to font awesome.com and in this area mention your email address they are going to send you the kit code follow the instruction and get the code okay let me close this one here is the uh google font and from google fonts let me show you okay google fonts and today i'm going to use this font where that is ubuntu so open uh ubuntu i'm going to use this one i just want to copy um i just open it and i'm going to use three three variations of this one first of all this medium 500 and this regular 400 and then bool 700 okay if you want you guys can use the uh you can download it or you can use the api but i i don't want that so what i'm going to do i just want to copy this link from here and i want to you know i want to paste it here okay and then in the main.css i would like to go with the with the font family here so i'm just copying this one i want to paste it here um not like this i need to declare the body and it should be here okay so within the body i do have the font okay so now we have uh i think we have done all the necessary things now let's move on to the body section and start working with the code so first of all we would like to create let me close this one also and we are going to we are going to work with this navigation bar this form and the search button okay so first of all i would like to now within these lines let's start writing the code so let's say nav class the class is going to be nav bar now bar expand medium and it's a booster class then i would like to use nav color and this color class i'm going to use in css okay then after i would like to go with the division and let me bring it here within the online and assigning in a class this class is going to be container then we have to add a link here href and right now i'm not going to add but uh it should be index okay or index.html so we are going to create the pages when you're going to when we will create the pages and you will see that how you can link them or maybe i will link them with you here with you guys okay then we have a class navbar brand for the logo and then let's say cakes and cookies this is going to be the brand or the logo then i would like to go with the unordered list so this unordered list uh no sorry i would like to go with the button not with unordered list i need a button this button i'm talking about image first of all let me change okay i'm talking about this button okay this hamburger menu so let's see let's go with the button element button assigning it a class and this class is going to be spelling of button okay but an element in this class is going to be nav bar toggler never toggle then the type is going to be button let's use a data toggle and the data toggle is going to be collapse then i would like to go with the data target all these are the bootstrap elements you guys can read all these from the bootstrap documentation and i would like to use the uh target id which is going to be my nav mine f not number okay let's say mine f and um then i would like to see area controls and now your controls are going to be now bar collapse you know every time i use this my nav let's change it into okay no problem it's not going to do anything it's not going to affect on any anything else so my never mind f bar i i usually use this one so let's go with this never collapse and then let's say arya expanded and it is going to be false it is expanded okay and then we say that our your argo label aria label is going to be um toggle mary toggle navigation okay then i would like to have a fon awesome icon class here so for that i class f e f f a bars and this is going to show those hamburger menu parts then i would like to go with another division assigning it a class and this should be um here i would like to say the class is going to be collapse navbar collapsed and let's have an id so i'm going to use this id okay my nav so my now partner bar then within this i would like to go with the unordered list assigning it to class and this class is going to be nif bar nav then let's choose margin right auto within this let's go with the list item and assign it a class this class is going to be nav item and the nav item is going to have a link href and then it should have a class the class is going to be now blink let's assign it a link name or yeah link name it's okay home then i would like to copy and paste it for several times but you know uh i don't want to do this let's go with the blog and the arc i went about so let's let's change it let me copy this i want to paste it up sorry what i have done and hold on yeah let me copy this paste it here and in this one let's say about okay and then we should go with the blog so then we have to go with the blog one so it will have a drop down for this let's say list item a list item is going to have a class and this class is going to be nav item and this name item um this nav item is going to have a drop down and then let's say drop down small and it should be active okay let's have a href here so assigning it a class and this class is going to be again now link then the link is going to have a drop down toggle and then after i would like to go with an id and this id is going to be blog drop down okay let's use the roll and the roll it is going to be button and let's use the data toggle so data toggle is also going to have a drop down and all these are the bootstrap classes okay you guys can find them from bootstrap documentation and drop down and let's see aria not not within this one arya arya has pop okay so it is going to be arya has pop is going to be true and then we have to go with the aria expanded so are you expanded and this is going to be false okay and then after let's write uh um let's give it the title or a link so the link is going to be blog and then after this uh you know let's have a span element so this span element is what this span element is going to do let's assign it to class and this class is going to say that screen on the like only for the screens and it is going to be you know current and that's all for this one let's save it and you know what uh let me i just want to keep it open uh let's save it and move on to the browser so i'm using the live server okay so we have the blog and this button okay remember we have coded your data toggle the rule of this is going to be button and id is going to be block drop down okay so this is what we have done so far so we have but now we have what we have to do next let's go to the um the next thing is going to be for this drop down okay for this drop down menu the list and the grade so for this watch me here and here we are then we have to go with another division so do it a class and this class is going to be drop down menu drop down [Music] menu and let's use the aria area label and area labeled labeled by and going to be blog we are going to use this id okay and so blog drop down and then we have to add a link here href a is going to say that we'll add it and let's have a class here so the class is going to be drop down item and it is going to be active let me show you where is that so this is the active one the last one will create the grid and grid um grid style of blog also so in the next video we will create the grid one but right now the active one is here and the list okay and for that and no yep it is going to be active and then we have to add uh let's see list title or the name the name is going to be list and let's have another one so far other one i just want to copy this i'm going to paste it but i want to remove this active from here and then i would like to go with the grid okay class is going to be dropped on item and the grid okay so we have done until now then let's go and so we have the list and the grid okay then after um let's add this archive so for the archive again here i would like to go with an other list item and this list item is going to have a class this class is going to be nav item now i um drop down and then let's say drop down small or small devices and each rep then and then let's say class this class is going to be now link nav link drop nav link drop down toggle let's have an id and this id is going to be archive drop down and then after we have to go with the rule and the rule is also going to be button okay then let's use data toggle and the toggle is again going to be drop down then you have to go with the aria are your hands pop up and it is going to be true then let's say arya pended and it is going to be false then we have to go with archives and that's all move on to the browser first okay so this is the button not doing anything but we have created now what we have to do next the next thing is let's create a div assigning it a class this class is going to have a let's see again it is going to be drop down menu and aria labeled by so it is going to be labeled by this archive drop down archive drop down after this drop down let's have a uh let's close this and let's with the heading six element uh let's go with heading five element okay or yep so the setting five element is going to have a class and this class is going to be drop down then drop down header and then let's say 2020 then after this let's go with the href right now nothing but let's assign it a class in this class is going to be drop down item and here let's say december now i would like to copy and paste this link for several times and again so let's remove all these decembers except the first one and then here let's go with november october um september august and july okay let's save it let's go to the browser click on it and we have the drop down of archives now we need this form and this search button so for this again i would like to go with two with the form element and the form is going to have a class this class is going to be form inline then margin top is going to be 2 and margin top medium on medium devices is going to be zero okay then we have to go with the uh it's not this but it should be here now we have to go with the input element where we are going with type type is going to be text then let's go with the name the name is going to be search and the class for this is going to be form form control margin right this one small devices only two then we have to go with the place oops placeholder so the placeholder uh placeholder is going to be search and let's say aria label and aria label is also going to be search okay then we have to go with the button element and the type of this is going to be button and another button type it is going to be submit my apologies um let's have a class the class for this is going to be button median and then let's see median search we're going to use this b and search in css margin top and bottom is going to be two then margin top and bottom on small devices it's going to be zero okay let's have a fun awesome icon class here [Music] so fb a search and the area is going to be hidden here and it is going to be true then we let's use the spam element here first of all let me bring it here and let's use this pan element those pan element is going to have a class the class is going to be screen only and search let's save it move on to the browser okay so the search form and the icon now let's go to the css but i have to wait because my neighbor's dog is not in a good mood so let him be quiet and then i'll start it again okay okay so first of all here i would like to bring it down and then i would like to go with the nav bar and then first of all let's go with the nav color class let's have a background the background is uh you know what first of all i would like to declare some other variables so for that i would like to go with the root element and then i should go with the primary you know primary color and the primary color for this is going to be these bbb 0821 and then i would like to declare another variable which is going to be text um text background and it is going to be white then i would like to declare okay first of all let's go with these two or i want to use okay okay let me let me have it so i'm going to use the badges so for the badges i'm just saying badges and that color is going to be c1 cf1 b1b cf1b1b then i would like to go with the tags i'm going to explain you each and everything later when we will have this but first of all i need all these things here so d a two f two f two f and d a two a e2 and then i would like to go with the button and for the button let's go with f 8 1 5 one five okay almost the red color variations i'm going to use then after with the navbar in the background i would like to assign a primary color so i'm saying var or variable and here i would look to go with the primary color then i would like to go with the nav nav link and then that link is also then the link is going to have a color of white so for this for the white for white i have a again let me declare var text bg and then i would like to go with them item sorry not here but let it be here and now item um blink and hover so for this color this color i just want to use once so i'm going to have it here without any declaring any variable 1d1c1c and then after i would like to go with the navbar brand and nav bar brand what is this navbar brand so the navbar brand is going to have a color again the text color is going to be text bg and the next one the font weight for this i would like to go with with 700 first of all let's go to the browser and see how does it look so in the browser it's looking good when i hover okay this i need to change this one but the brand i need to change because it's not it's looking ugly and then they are looking good nice we have to change this one too okay in the search also so move back and then after the brand let's use nav brand hover or hover so now brand nabar brand over and the color again is going to be 1d1cn1c and let's go with the search button so media and search vbn search is going to have the background not an attachment but only the background and the background again is going to be text sorry text background and then after i would like to go with the first of all let's see okay and then i would like to go with the um icon so for the icon bdn search media search uh for an awesome icon class and let's say i color is going to be the variable and it is going to be the primary color then after let's use the uh this drop down okay the list so for this again let's go to drop down item active and drop down item acting active like drop down item here let's use it and use it as a pseudo element so then we have to say that the the background um color and the variable here is going to be primary color save it and in the browser okay so we do have a red color now the next thing is the navbar toggler so let me show you something that's cool this hamburger menu it is black i want it to be white and you know what when i click there is a outline and in most of the projects i don't like this outline i remove this one i'm sure you guys know about it how to remove this but let's add the style for this code here and for this it is going to be nav bar toddler and number two blur and outline it is going to be none you know it it's not going to work because in all the previous projects we have done this so we need to use the flag and click on it it's still here it is it is not going to change so what we have to do we have to use a flag important flag important and now you guys can we can yeah not see this okay when i click there isn't that outline okay now we have to change the hamburger menu color and for this for this we have to say that um not here let me get the same selector i want to copy this one let me paste it here and let's see yeah little eye by selecting the eye we have to we are selecting that and here let's use the text v3 move on to the browser and here it is white okay nice looking good and the nev section of our blog is done okay okay the form is here is the form is a little bigger we will see this thing also okay first of all i would like to explain few things to you and if i have opened this bootstrap documentation um if you guys want to know more about it and get bootstrap.com go to the getbootstrap.com website click on documentation and here are here you guys can see the documentation okay in here from here in this left side click on the component okay so if in case if you are interested or if you are curious to know about this because in the previous projects in any of my project i haven't used this drop down okay so uh and this is almost a kind of a pure bootstrap not um i'm not going to add css in this one so all these things this drop down toggle and these all drop down classes i'm getting from here okay you guys can see this one i'm going to use the badge class also from here here you guys can see the drop downs okay click on the drop downs read the documentation it is going to clear your concept if you are not if anything is feeling um you know if you think that from if you want to know that how i got this dropped on item class it is from the component okay it is available here in the bootstrap component i'm using it from here you know this you can see here drop down item and here i've also used this drop down item class okay then um the roll aria okay the role button rule uh we have used for this button to drop down button button or for this archives button so um it has a role the area plus it has the examples examples are going to help you to clear your concept more look at this class the drop down toggle then the id as i have used vm previously so here also drop down my new button drop down menu button and drop down items menu area labeled by we have used each and everything from here and the links you look the same way we have here so drop down the label by as i've told you the names we have mentioned in our project so the rule is button the id is this one it's not necessary you use the same ids as i haven't used the same ids i have like blog drop down then i use available debut by brock block drop down this one and this one this id yeah and this area they will buy same so it's up to you it's if whatever you want to use you guys can go ahead read the documentation if you are confused in anything read it and check the examples there in every every uh everything in every title and under the title they have the description they have the example it will be easy for you guys to understand what's going on look here the span screen on the what we have used already in our project this screen only so all these things uh are not from some anywhere from just from the air but we have got all these things from here from the documentation and everything is very clear here okay in the documentation if you are confused again in anything then please concern the documentation of bootstrap 4 okay here it is we are using a bootstrap 4 version so concern this bushra 4. i'm sure in future uh we'll start working with bootstrap 5 also so but first of all we have to see all these documentation if you if you are confusing anything just type here and you are good to go you will find things whatever the confusion there may be and you will clear that confusion from the documentation like look at here the forms the collapse okay and everything is here so it will be easy for you to understand and clear your doubts now let's go back to the editor and we have done with the nav section now let's start working with the body section so this latest post and text pose first of all we are going to cover this section only this section okay and then after we will cover this uh right side the popular post section okay so here after this let's uh after this nav the bar is ended here and let's remove these extras pieces save it now let's move on to the next section and let's say let's name it body section okay now in this body section i would like to go with a div i'm not declaring the section element here going with the div only and let's say the class is going to be container margin top and bottom is going to be three margin top and bottom one small devices is going to be five and then we have another day with adding it a class and this class is going to have a raw div class the class is going to be column 12 and then column medium for medium devices 6 and four large devices it is going to be eight okay then we have to go with the heading two element and the heading two element is going to have a class this class is going to be margin bottom three and this margin bottom three let's name it latest post and then after let's go with the article element and assigning it a class the class is going to be margin bottom three then after this let's have a header element the header element is going to have a class this class is going to be margin bottom two then we have the anchor tag each ref and again not going to use any link here but now we are going to use the badge okay i'm going to explain you this badge and then the badge ct category this class i'm going to use in bootstrap so for this let's see yeah sorry not in bootstrap in css this class okay category first of all let's go to the documentation and learn what is this badge here you guys can see in the component alert badge okay so we have different kind of badges here we are going to use these badges or the badge we are going to use here is i'm talking about this badge and these and here in the tag section they all are the badges okay so these are the badges here with different example heading heading one two three four five and six okay you guys can see here and they are they have named it bad secondary then span element they are declared they have declared it in the span element and you guys can see that notifications so for the images can be used as part of links or buttons to provide a counter so we are going to use it for uh here in a category section then here in the comment for the likes and comments and tags okay so it's up to you how you want to use these badges but we are going to use these badges here even we can use the colors these uh colors and given by the bootstrap so can be used uh you guys can use in the badge the badges are of different kind the pill badges like this one okay and the pill badge classes batch pill and you know now just right now an idea comes into my mind i would like to change this into batch pill so you know what i'm going to do i'm just going to change this so badge and batch pill here i would like to see badge pill okay for the category and right now i have to you know to declare the color so here in the category we are going to use the batch pill and from the documentation okay badge badge pill and here the color whatever you want to assign so same here i have said badge badge pill and a category we are going to use it um in our c css okay now let's move on and i i'm sure you guys understand about the badge that from where this batch class come from so it came from the component of bootstrap it's a bootstrap component okay links and if you want to know more about it please read the documentation okay now the next thing is um after this after uh defining this category let's go to the next uh heading so here we have to say heading 1 and the heading 1 is going to have a class this class is going to be main title and the main title is let's have a link here the link is for um as usual i'm not going with the link here right now and let's see text post text post or let's say post title uh text post item text post title okay because it is a text post okay it's a text post so that's i and then we are going to have a video post video post okay so then another blog post and another blog text post so this is the text post title then after this text post title we have to go with the division assigning it a class and this class is not here sorry within this div let's go with the anchor tag and this is going to have nothing but another class this class is going to be a sub title and this subtitle is like author name the one who wrote this one and then we have to go with another div assigning it to class and is going to be the title is sorry the class is going to be small so posted post it on and let's use you know time and then say date time and here you know i would like to bring it here let me put it here date time and here it should be 20 20 and uh it is going to be not 2020 sorry 2021 oops 202102 zero one okay and it should be uh it should have a time so the time is going to be let's see and the time is going to be 10 15 to 15 and then after let's have a let's close it and within this let's go with the um is january you know i made a mistake it should be here and this should be here so january 2nd 2021 okay at now i have uh okay let me go with the same time so it is going to be 14 15. pm okay and then that's all then we have to go with another division after this let's go with the div that's finding it at class this the game class is going to be small and just from the boot trap again is pay an element signing at a class the class is going to be badge and this time this badge is not going to be a pill badge just a badge yes uh i'm going to use this batch cat class in css and then after let's have a for awesome icon class if [Music] a up okay and then we do have a aria hidden or hidden where it is going to be true and then you have to go with the with with the thumbs up or how many likes this post caught so let's go with 18 and let's start the span element starting request this class is going to say that screen only i've explained this thing to you through the documentation now and then let's say likes okay so on the screen it is going to show likes and then we have to go with another spam element so for that here is a span element assigning it a class the class is going to be badge and then badge category again then i would like to go with the file so my contrast if it is if a command and then aria hidden which is going to be true sorry and then it is saying that it has eight comments okay then we have to go with another span element saying that our screen screen only is going to show comment okay let's save it move on to the browser first you guys can see very small uh comments and likes the thumbs up and the icon for the comment okay now the next thing is um you know here textbooks try to let's say uh chocolate chocolate cake okay so for the chocolate cake uh chocolate cakes okay it is going to give me yeah chocolate cakes and then we have to say that let's go with the tags you know we have done until this these and now we have to go with these tags okay so for these tags back to the editor and here i would like to go with the division assigning it a class and this class is going to be very small and then the small is and then after we i have to go with the links the link says they are going to for the tags we have to but right now i'm not doing this so badge and let's use the badge pill here again okay badge pill and then i would like to save back to text this bash text class i'm going to use in css and here let's add the tag one or just a tag and you know what i'm going to do i just want to copy and paste it for several times so three four five let's go with the with five times tag other tag let's see another tag it should be some other tag okay and they do have the tags here then the next thing is we have to use the this image so for this image again we are going to use the figure element so for the figure element figure element let's use a class and this class is going to be figure and for this image and as i've mentioned before i have got the images from pixels.com in my images folder so images and the first image is main img and then after i would like to assign it a class this class is going to be figure img figure image then image fluid to make it responsive again it's a bootstrap class and we have used this class many times almost in all of the in all of our project art if you guys want to go i want to mention and you have to actually it's a good seo practice and then we have to add the figure caption so for that let's say fake caption assigning it a class in this class is going to be figure caption and captions are going to be small then we have to use a p element assigning it a class this class is going to be margin bottom zero and then we have to go with a fun awesome icon class which is going to be f a f f a utensils and then arya aria hidden is going to be true until you're true and then we have to go with the span element so this pan and within this pan element let's say class the cloth is going to be screen only and um made by um chef name so let's go with the shaft name okay and then it is let's save it and first of all let me show you what's going on in the browser okay so we do have an image the tags we we have to style these things but right now we have these images and this image the tags now we have to add this text and the button so for this again here after this figure uh let's go with the p element and some laurent text so it is going to be of 20 words then we have to use the button and for the button let's go with the link and this link has to link with another page we are going to create those pages also so mean bdn i'm just naming it main media i'm going to use this class in css say read more okay and if we say dot okay read more and the article this article is done and let's have a horizontal line here okay just to show some separation there is very light horizontal line so i think let's cut this line with uh this one is done so you know what i'm going to do just for the convenience because i think i should copy and paste it first of all let's go to the css and start styling this one then we will be then we are good then we will start working on the other things okay this and this video post and other other posts okay so here in the css i'm going to declare some global uh styles uh i was just using global variables so the global styles where because we are going to use the same classes for the error for other elements so therefore i'm going to use the global styles so let's see global styles and here in the global styles i would like to go with the badge first of all then badge cap class where i would like to go with the background and the background color is going to be primary color i'm going to use and for the text i would like to use the text background and then after i would like to use the badge tags you know we have used the badge tags and for this let's use the background color and here the background is going to be again primary color and then the next thing is the text for this is going to be the text background okay then we have the main title let me show you what's going on here okay so they are looking good and nice we have used the pills so they are here we want to use the hover also so you can change for hover and then you have to change this one and this one so for this again here um let's use the main title and it's a class so the link to the main title is going to have a color and this color is going to be primary one and then i would like to use the subtitle and for the subtitle which we have a color and it is also going to be the primary color then we have to use the font weight and it is going to be 500 then let's use the main button main main bt bd in and the main bdna is going to have a background so the background is going to be variable and the button color i have to use and the color is going to be text background and then post title so the post title is going to have a again primary color and then we have to use the post title font font wait sorry so the font font read it is going to be 700 and because we have to use the images so figure caption class is a figure caption class i'm talking about the icon and you know what i'm just going to have two classes so the other one is figure caption p about the paragraph and here the color is i'm going to be the primary color let's save it move on to the browser okay so now when we are going to have another post the second post this one then our all other posts we don't need to change the color or all these things there because we set the styles globally and they are all these global styles are going to work on the other um other other posts okay so let's move on to the browser and again here we are then the next thing is the other post which is a video post and for that you know what i'm thinking to do i just want to change um i just want to copy and paste i want to change the title so from here i would like to start it where is that article here copy this and just want to convenience and copy that copy it and i just want to paste it here and then let's see a video recipe where is it recipe video there is chocolate cakes and it is going to be recipe video and the recipe video uh in this section here we are going to use the video so for video i would like to show you something what you guys have to do so we have copied the same text here but after these tags here in the figure section like after this header closing header we have to you know i have to delete this figure caption the figure and the figure caption the figure all this figure okay and here i would like to first of all let me have a div here signing in a class and this class is going to be again the processing figure image i'm saying embed responsive to make it responsive and then embed responsive and i would like to declare the size here so it is going to be 16 by 9 okay and then here within this division we would like to have uh we would like to embed the video so how we can do we can embed a video here in my browser you have seen this uh tom and cherry video right now i just have this one and here in the share section here it is embed click on it and you guys can find the iframe tag from the complete iframe tag from here to here like just copy this one and paste it there i'm not going to use this one okay i'm not going to use this this one but i'm just telling you that how we can do this i do have another code i'll show you so you have to just copy this code and paste it or you just say copy and paste it in that section i do have my my code where in this text file so this is for the video of from my channel so i'm just copying it it's a javascript project i'm just going to paste this here okay i just embed that it's the same embedded code which is there uh in this animated movie case like this one within this iframe to here to here allow full screen picture in picture blah blah blah so you guys can see that it has also a lot of uh full screen picture in picture blah blah blah you guys have to add that one here okay and then uh i don't want to have any any i don't want to change anything let's go to the browser and let's see what's going on so here in the browser okay we do have a video here and here is the text okay after that we do have a text but you know for the text we have to go with the figure caption so for this i would like to go with the after this i frame uh not this iframe actually not within this iframe let me first remove this one after this division i would like to have a fake uh caption the figure caption and it is going to be like this figure caption and it has a class the class is going to be figure caption and then small and let's say margin bottom is going to be three and then after within this figure caption we would like to have the uh let me get that that code from here because i've deleted that um this one p to this p okay and what i'm going to do i just want to paste it here and here is going to be video by um and here the the guy name or whatever you want to name it okay so let's okay so here it is chef name and blah blah blah okay now the next thing is that again the dog starts marking and i should stop it then we will continue okay okay so we we have done with this video but you know there is some something wrong within this um style and that i found was my type of mistake and it was this is responsive not responsive now it is going to show okay so now it's looking good it's looking better on this page okay now the next thing is and yes uh if you guys remember i have created a hospital website and many of you were asking me about the appointment forms so in this video the video i have linked here in this project this link uh it has a appointment form that how we can create the appointment from using javascript i'm going to give this only and this this video link in the description below plus in the i card you guys check the i card also for this video for this appointment form that we have created it in in javascript okay and now let's move on okay so now what what i'm going to do now i'm going to uh skip this post because it is going to be same as the first one so here i would like to add this one this gallery post okay so what i'm going to do and copy and paste this one again and let's copy this and i would like to paste it here now i need to make some changes in this one so you know the recipe video it is again here so let's make the changes here because i don't want this i don't want it to be here here in this video oh sorry in this section after the header let's delete this division and then after i would like to delete this figure caption also okay we do have this p element okay let it be no need to change it so let's have this but here after this p element let's have a division here and first of all let me remove this link also and let's add a class the class is going to be raw then after let's have another division of running in a class and this class is going to be column 12 and then column medium six then column large four and that's all then after here i would like to use the figure element and then let's have a class here this class is going to be figure then i would like to go with the image and source of the image in the images i would like to have photo one dot gpg then i would like to assign it a class this class is going to be image floyd and then i would like to go with image thumbnail and then i would like to assign it a class of shadow and then let's uh go with the alt i'm not writing but okay now i would like to copy and paste this for a couple of times so this div copy this paste it here and let me paste it here so here i would like to change the image name um image number this is 401 402 and it is going to be 403. let's save it and then after i would like to go with the link which is going to be href and the link and then let's have a class this class is going to be bdn then mean median and let's say you read more okay let's save it move on to the browser and here let's see how it is okay so we do have three images there is a slight shadow and the button here now the next thing is this last cookies post so let's have this cookies posed for this i already copied and copied the code before but this time that was a video code so i would like to code copy this image code from here for this i'm going to copy this one and just turn it okay copy this let's paste it here and here in the image section let's change the image the image is going to be cookies dot gpg and here we go so we do have the three posts the first one is this one second one is this the video after the recipe of the video and here it it shouldn't be this one it should be gallery so the second one this is this shouldn't be this recipe but it has to be gathering images we will create a gallery image image page gallery images page so in the next video okay not right next but after create after covering that list and the great style of the blog then we will create this gallery images page also after covering this list and great uh after covering the list and great blog then we will create this gallery images page also so we have done with this one let's go to the browser let's try again okay gallery image uh it should be images not image gallery images sorry for the inconvenience where is that okay let me use my here i should say gallery image and i would like to replace it so gallery images and let's replace it okay save it and it is going to be it's replaced i'm sure it is yep it's gallery images here okay now the next thing uh now let me remove this tom and jerry section uh sorry tab not section then now the next thing is we have to create this pagination so the pagination after having this pagination we will create this site section okay here we are so the pagination section is going to be here okay here i would like to go with a div and then uh it's a rapper div okay so let's have another nap element with the aria label aria label it is going to be uh let's say vlog pages or yeah it's okay with blog pages and then after we have to go with the unordered list class and this class is going to be pagination pagination let's say justify justify content center content better and then we have to go with the list item class is going to be page item then you have to go with the spam element assigning it a class and this class is going to be page link then let's go with aria label and this is going to be previous then we have to go with the spam element and arya hidden which is going to be true and here we would like to go with these two less than signs and then after we have to go with another span element where class is going to be screen only and let's say previous okay then after let's have another list item and uh it is going to have a class the class is going to be again you know what i i just want to copy and paste it and we'll change few things copy this paste it here and here the aria label is going to be uh first of all the page item is going to be first of all the page item is going to be active then let me remove these spams from here and then i would like to go with the href okay then the class of this is going to be page page link and here it is going to be one then let's have a span element with a class the class is going to be screen only and then we have to say current then after let's go with a list item assigning a class the class is going to be page item and then let's have a link here let's assign it a class the class is going to be page link you know this is for let me show you this is for these links okay though two three four five and so page link and here i'm saying two now i would like to copy this let's paste piece detail and then it is three three four and five okay then after this let's have um let's have a class of this item with a class of page link and then after let's have a href with a class this class is going to be page page link aria aria label is going to be next and then we have a span element with a aria hidden and the area hidden again here is going to be true then we use two greater than signs and then after this let's have another spam element with a class and this class is going to say screen only then next okay let's save it move on to the browser so okay look at this we have made a mistake somewhere let me check where is the mistake and so i've made a mistake the mistake is let me show you let's cut it from here and it should be here and now this should be it it should be wrapped in this ally so how it is going to be ally then it is going to be page item okay and then all these links are going to be wrapped within this one within this page item okay and then this list item and class page item and then it has to be in this one my apologies for this actually i i didn't see this well i don't know how i made this this mistake but class is going to be page item and then here it is going to be this one let's save it and now it is going to be fine there here we are and yes it is fine but still there is problem with this one and let's check this again i'm sure that so there is a problem yeah it's not a page um page link no it is a page link but it is also wrapping the page uh item so you know how we can do this let's create another let me let me fix this actually so items not a link and yep now it's looking fine the next thing is that let's let's have uh let's make it like this okay the water the color and each and everything for this let's go to the main.css here in the css let's go with the page item so first of all the class is going to be page item active and then with the page the page link so here we are going to use the index 1 and color is going to be primary color right now let me let me just comment it out and show you something if there is if there would be a need then we are going to use it otherwise we are not going to use and then we have to go with the background background and the background for this is again actually and this is not going to be this one uh it is going to be text background okay and it shouldn't be in in these parentheses and then we have to go with border color so the water watercolor one sorry one pixel solid and then let's use some background color again save it and it is not showing here let's see where is the problem let's use the uh developer tool but first of all let me check with this the index okay let's use the important flag because or let me check my classes again okay so my classes are oh i i do have to do something else then then it has to again i don't know why i'm making too many mistakes today okay page link and the color is going to be primary and background background color background is again going to be text background and then we have to go with the butter and the water is going to be let's see on the bottom okay the bar is also going to be same so i just copy this i want to paste it here and let's go to the browser and let's see okay but the active one is not working as it is working here okay so the active one is it is not working where is the problem again you know what i mean because it wasn't working well in my case um real rest there there must be a problem somewhere let's check here okay let's inspect the element and here we go let me check the change the dock plus this and here we are so a page link this one okay so this is a page link and page i active spelling of active okay so i have found here we go look at my spellings it is active save it and now again let's let's check it okay it is the it is blue but i want it to be red so you know what let's take the help of our developer tools and it is loaded here so here the background color you know page link active and they are saying here blue let me just check red and i just mentioned red here yeah it is right here so what i'm going to do you know let me copy this pull get it from here and i want to paste it here let me let me delete this one save it and okay so here we go okay so so you know this background color is um this border color is not going to be this and again watercolor is also war primary color and this background color is also going to be primary color save it move on to the browser and yes now it's looking good and i'll need to do these elements they are not looking good but that's okay so we have done until this pagination section now we have to go and work with this popular post section so for this let's go to the browser here again after this let's have a comment end of the body now we have to move on to the site section so let's let's call it sides um they are not section but let's say aside section and here let's go with the div assigning it a class this class is going to be column 12 and then column medium 6 column large four and then let's use a side element okay and then let's have a heading two here with a class this class is going to be margin bottom three and let's say popular posts and then after this let's have a div assigning a class this class is going to be list group and margin bottom free then after this let's have a division not a division sorry a link href and this link is going to be nothing right now let's have a class the class is going to be list group item and then list group item action let's use a div again assigning it a class this class is going to be badge and let's use the badge pill okay batch pill and then badge category and let's use a float here load right then we can say in the next page when we are going to wear the other page i'll try to use the flex okay so in the next page we'll use the flex and then heading 5 yep is going to have a class this class is going to be post post title and post title okay after this heading let's have a p element and the class of this is going to be small margin bottom two then the sub title uh this class you guys know we are using it css and authoring and then we then we have to use the let's say time element and then date time and you know what i'm going to do let me bring it here keep it here date time and here are the 20 321 and it is going to be you know i'm checking my time right now so it is going to be and then we have to go with the time so the time is going to be and p.m so you know let's go 24 hour and sorry okay we'll fix this no problem and then let's have let's have another class this is going to be color color class and this is also going to be close okay then we have to go here with the date so let's say june 16th um not june 16th oh sorry let's put it in the back date sorry sorry sorry it is going to be and yeah sorry my apologies again june june 16 and 2020 it's a previous post from june 16 and it was posted on 6 30 r okay there's not going to need ingredients and then we have to say that that's all then the next thing is going to be you know another div here and this div is going to have a class this class is going to be small margin bottom two let's have a span element assigning it a class the class is going to be badge badge and then let's say badge category and from some icon class then it is going to say yes f a thumbs up and this text is going to be white then we are going to have area hidden which is going to be true and then it is going to say 15 okay so 15 likes or 15 thumbs up then let's say span element is going to have a class and for the screen so screen only then it is going to be known as likes and then the span are close then we have to create let me bring it here and then let's have another spam element with a class badge and then badge category and then we have to go with the class f e s f a commence text white so aria hidden and it is going to be true then here i would like to go with eight comments and then let's go with the spam element so this is pan element for the screen so screen on the screen readers comment and then let's go with the [Music] let's go with the p element class margin margin bottom is going to be zero with some uh lorem ipsum could be off nine words okay and then it is done okay so just for my convenience let's see wait move on to the browser run this one and we are not here i'm sure we have made a mistake somewhere so these this this shouldn't be here these should be here and let's check and find out the mistake so so you know again i've made a mistake here this shouldn't be here first of all it should end here and this all a side section is it has to be let me cut it from here and it has to be here okay let's go to the now it's in its proper place okay it has to be in the same let me go back towards the top and let me show you that it has to be same in the same raw okay not to be in the different one so that's why only we have to change the site element so it has to be in the same raw okay that was the mistake we i have made there now the next thing is category pro style now we have to create this one so for this i just want to copy and paste this thing for a couple of times i guess so let's let's see let me check at how many posts do we have one two three four five let's go with three three pulls okay or four posts so for this let's copy and paste this one so from here i'm just copying it and okay copy this because it's a list so it is within a list group i just copied it i'm going to paste it here let's save it and let's check if i have made if i copied it correctly yep now again another one and four five let's go with the five one two three four and five okay so we have done with the five polls now the next thing is this recent posts so for this recent post here we are and after this div let's have let's start it for the recent posts so for the recent post well let's go with the heading 2 and assigning it a class the class is going to be margin bottom 3 and recent posts and then after let's go with a div assigning it a class this class is going to be list group margin bottom three and now i would like to go with a an anchor tag with the oh not having a link here but a class is going to be list group item and then let's have a look another class this is going to be list group item action then after let's go with the div assigning it a class and this class is going to have a badge and then let's use the badge pill or just let's use a badge only because we have used the pill already so let's go with the patch category and use the float right and let's use a category all these classes are from bootstrap okay again bdge again i'm reminding you here we can use the flexbox classes like display flags justify content right blah blah blah but we are using these bootstrap classes okay and then we have to go with the heading 5 after this heading 5 is going to have a class this class is going to be again post title and then again closed title i'm not like this post title okay let's have a p element of finding a class and this class is going to be small margin bottom two sub title author name or three and then here let's go with the time and then date time which is going to be 2020 and maybe i've made these deep mistakes there somewhere in the back on top and then it is going to be um let's see recent post so we have started it from july i think our archives in started from july so death and let's go with second july okay second july 2020 and then it is not going to finish here it should have a time and this time is going to be 10 40 am and where is there is some kind of a mistake and that is this okay and then after we have to go with the timing here so let's say july um would you july 2 and 20 30 credit and at 10 40 a.m 10 40 a.m okay then after we have to go with another division i'm finding it a class and this class is going to be small um margin bottom two and then let's say spam element let's have a span element apparently the class this class is going to be again badge and badge category and then we do have to go with the list item f a oh sorry for an awesome michael f a f f a thumbs thumbs up and then we have to say that the text is going to be white and it should have a the arya hidden aria hidden is going to be true and then we have to go with let's let's close it okay first then after let's say the view of the recent post could be 20 it should have 20 likes and let's go with the after these 20 likes let's go with the span element again class for the screen readers screen only and let's say likes and then we have to go with another class so you know what let me bring it here let's have another span element of planning in a class and this class is going to be again this class is going to be badge and badge category and then again our phone awesome icon sorry the class is f a f a f f a and it is going to be comment so the text is going to be white aria yeah aria hidden it's going to be true t are you true and arya hidden is going to be true let's close it and then here we are going to say 30 commands okay let's make this post popular and then we have to use this pen for the screen readers so sorry spam and this pen is going to say it has a class for screen only and then we have to go with the comments and then after we would like to go with the p element assigning it a class this again class is going to be margin bottom 0 and then we have to go with some lorem text could be of 10 words okay let's save it and here we are so we have a post recent post here so what i'm going to do now just let me get it and i want to copy and paste it for several times so let me copy this and two three let's say four times okay and here we are so we do have this for four times okay now the next thing is we have to work with these categories and the tag cloud and about the blog sign up for the newsletters okay so for the categories again we have we have used the finance icons categories names and the tag cloud about and okay so what i'm going to do now uh here is our recording we are working here so let's start our category section for the category section after this division we we should go with the heading two element assigning it a class this class is going to be margin bottom three and categories okay and then you have to go with the div assigning it a class this class is going to be list list group and margin bottom three this list group is also from bootstrap okay so let me tell you this list group and all other all the other classes i'm using here they are these all classes are from bootstrap so let me show you this list group class here just search for the list group and you guys will get that and the information about the uh the list group there and it is going to tell you that what are the the most basic this group is on order list with this items and you know blah blah blah then here is an example we are using same the lesser python this group then this group item we are using the same then the active one okay and the one which is going to be active like this we actually we have changed the active color so these all this group everything we are using in this project are pure bootstrap okay so all these classes are from bootstrap uh the classes i'm using here this little script we have used here and on top also okay so it is from bootstrap then the list group um this margin bottom also everything you know it is from bootstrap now in this let's have a href and h drive is going to have a class this class is going to be list list group item i've shown you this right now and then again list group item action again it is there and then let's see text is going to be black okay then after text is black and i want to go with the background light okay then within this let's have a phone awesome icon class and and it is going to be fasfa utensils and let's go with the first one which is going to be category 1 and then after we you know what i'm thinking to do let's copy and paste first of all let me show you here not here you can see this one so we are also going to have something like that okay background light and this category one and you are going to add more categories it is going to be in this form okay so what i'm going to do next is i just want to copy and paste this one this link from here copy this category one two three four five we are going to have five categories and the first one is this and i just want to change to them what is this for awesome icon okay apple alt is going to be category 2 then here it is going to be mug hot and category 3. so then we are going to have the fourth category which is going to be cookie and it is going to be category four and the fifth one is going to be bread birch slice and this is going to be category five let's save it and here we are okay i just want to change these icon icons here let me show you so i want them to be in the same color for this you know what i'm going to do let's go to the main dot csf and in main dot css here i just want to go with the class of list group item and then for us mycon spelling of the item okay and then here we are going to go with the color it is going to be sorry for uh primary color let's save it and you guys can see that the colors uh the color of the icon icons uh is going to it's right now it's not going to be what it is red okay then the next thing is we have these tag cloud uh sorry tech cloud and for this again let's go to the index.html and here we have to go with the tags for the for this you know here let's see tag cloud and this tag cloud is going to have a i would like to start it with a div assigning a class card margin discard is also from bootstrap okay margin bottom three and then we do have a div assignment a class card body let's go with heading 5 and card title so tag cloud and let it be capital tag cloud and let's go with href it is going to be right now nothing a class of badge and then let's use the badge tags okay and let's use the tag and you know what i'm thinking to do i just want to copy and paste this link for several times so it would be easy for let me copy this and 2 3 4 5 6 7 8 9 10 and let's say other tag another tag some some other tag more tags and let's say some more some more tags than another kind of another kind of tag and all about all about tag should be tags okay all about tags let's see if it move on to the browser and let's see how does it work so okay so we do have the tag cloud here and now what i i'm thinking to do let me copy and paste it from here to here okay so they are enough now yes okay enough tags now we have to create this about the blog and let's sign up so here we are and then the editor just for the convenience i would like to go with um other div assigning it a class this class is going to be child card margin bottom three margin bottom three and and and then and then we have to go with another division assigning it a class and this class is going to be called body then it is going to say heading 5 craft card title and the title of this card is going to be about about us uh about the not about us actually about the blog and then we have to go with the p element uh affirmative class this class is going to be card text me title and let's go with some lorem text of 25 words okay then after we have to go with the link here and uh the link should be here and tag href then let's say read read more what is this uh here it is and it has to be read more and then that's all let's go to the browser yep we do have this link here the next thing is sign up for the newsletters so again here we are and just for the convenience okay just keep the things separate i would like to go with a div i'm finding it a class and it is going to be a card then let's have another division deciding at a class this class is going to be called body and the background is going to be light and then we have to go with the heading five class is going to be what is this card title so part title and then let's say sign up for sign up for our news news letters let's have a form here and this form is going to have a div inside with a class of input okay and input group input group with margin bottom two and then we have to go with another day with any other class this class is going to be input group prepend i'm going to tell you what i'm going to do here and the span element with the class the class is going to be input input group text and then let's have an id okay add-on left now i'm going to show you what it is that on that but right now first of all let me uh finish this thing okay then i'm going to explain this add-on to you guys and then again input uh input and let's define a type of this input and this type is going to be email let's have a class form control and then have a name name is going to be email and let's choose a place folder so the placeholder is going to be your email and then let's have it or yeah are you described by are you described not at but are we are described by you guys can check it in bootstrap documentation and add on left this id we have used here i'm going to tell you just a minute and then we have to save required it's it's required it then after we have to go with the button element and the button is going to have a type so the type is going to be submit then we have a class here the class is going to be median and then mean bdn agent sign up button let's save it okay now first of all let me explain you this add-on then i'm going to show you something so here just type add-on and you guys can see okay there are multiple add-ons now what the one and the add-on we have used that our add-on look you guys can see input group in input group prepend and this is the pre-print means this one is the pre-print before and there is another one uh which is this one which is append okay this one is the append now what we have done we have used this in this pen uh we have used the at the reach in this in place of this dollar sign we have used at the rate so let me show you this one this is the add-on we have used here and our add-on is at the rate while here in this example the add-on is this dollar sign and this 0.00 these are the add-ons and we have in our case we have only one add-on which is this at the rate okay so it is also this add-on is also from the bootstrap and we have we asked that it is described by and the area described by the add-on left so we have used this one at the left side so this is what the add-on in and you can if you want to know more about it read the documentation uh learn from the examples or read the examples right to read the code and you guys will understand that add-on and the add-on functionality are not the add-on functionality actually but the role of the add-on okay uh so it i think it's not a rock you're trying to understand this thing it's very easy now though now what is left we have almost done now we have a footer so let's go and start working with the footer okay so we are here and then here let's start the folder okay so now in the footer let's go with the footer element assigning it a class this class is going to be small back now let's see let's have a do finding a class container and padding top and bottom is going to be three padding on small devices top and bottom bottom for small devices five let's go with a div assigning it a class this class is going to be a raw okay and then after let's have a div starting at a class this class is going to be column 12 column small six and then column medium three okay let's have a heading six here this heading six is going to be quick links and then after we have to go with the unordered list signing a class this class is going to be list on styled then we have to use the list item with an anchor tag again each ref sorry and then we have to go with the home and i want to close this tour so here it is going to be home now i would like to copy and paste it for a couple of times so two three four five and it should be whatever you want to name it okay i just want to go with this home right now because uh i want to finish this so the next one is after this let's again have a you know what i'm thinking to do i should probably just for the convenience okay let me copy the same paste right here and these are going to be followers links so follow us follow us links and these links are again here we have to go with something else that something else is going to be you know what i want to finish it and it's going to take time oops but no problem list unstyled list item is the list item is not going to have any class but okay let's see here um here it is going to have a for awesome icon class and let's see if you'll be if a facebook okay and here there's going to be facebook then the next one here class is going to be f a b f a twitter and this one is going to be twitter then here again i would like to go with the class fabfa instagram and then it is going to be instagram let's go with the youtube so this is going to be every every bfp youtube and it is also going to be youtube and i just want to remove this last one okay let's save it let's see what's going on in the browser okay footer and blah blah blah there is some problem there is something wrong in any of the class and on but you know and then i want to i i do have the little links there so i just want to copy and paste the same again and these are going to be known as information in for mission and then the last thing is going to be contact address and let's go here okay information follow us information and then now we have to do this contact we have to fix this issue so contact and for the contact you know i want to [Music] again i want to copy and paste this here and in this section let's say contact us and i want to remove this unordered list from here here i would like to go with the address tag and then assigning it a class this class is going to be text white because i'm going to change the background and do i let me check if i have used this yeah i'm going to use this back class let me use this here actually before going with anything else the back class is going to have a background and the background i want to go is primary color save it here we are okay so we do have this one here now we can change here and we can change the list groups and list items and all those things so here the text is going to be white then the next thing here is going to be the within this address element we have to use the let's use the strong element here let's do our strong and assigning in a class again text white and then this strong element is going to have a cake and cookies it's it's a name of our blog then we have to add the break tag and then after let's write the address here then we have to go with the um another break tag and after this break tag i would like to go with abbreviation element and let's say title abbreviation title and the title is telephone so it is going to be fun and the phone is going to have a sorry not here but here href this is going to be [Music] right now nothing but it has a class okay here is the font phone number let's use another abbreviation tag so again it is going to be title and the title is going to be mail then within this let's have a href and it has been to every class class is going to be text white and here it is going to be test at example.com okay and then we have to go with you know there should be let's save it and let's see how does it look okay this one is fine but there is some problem in this quick links we i i need to check this one and it is fine we have to assign the text white classes to all all these and then after this let's have a uh you know for a credit so for that let's go with the footer credit so on our list again assigning it a class this class is going to be list listing line and then text is setter then you have to go with the list item and the class is going to be listed list inline item again you guys can search about it in the documentation if you don't know about it just test right sorry text white now let's use the ampersand and um copy and semicolon for the copyright mark 2020 and cookies and then we have to let me copy and paste it okay a couple of times okay it's cake then here i don't want to go with this one it should be of right reserved and then here is going to say terms and privacy policies or terms and privacy terms and privacy let's see save it move on to the browser and let's see okay this is fine but do we do have some issue with the quick links and quick links uh in the quick things yep on top there there must be some issues and what are those issues i would like to padding top and bottom and for small devices so you know the problem why we have these quick links here i i'm sure you guys have noticed but i didn't so it's not the spelling of the container okay and if we go there now it's looking good but okay now let's change the color of these links so here in the main.css what i'm going to do i just want to say that list unstyled and the list item then the this is for the phone awesome icons and then list on style unstyled list items and then anchor tag and just going to have a color so the color is going to be text background and then we have to go with the text decoration which is going to be none save it okay we need to change these also so for them you know what we have to do we are here and here let's say text white let me check if it is working yeah and then let's go with the rr in simple you know what what what we can do let's get this heading 6 here and it is going to have a color so despite going one by one let's use it here save it move on to the browser okay so we have done we have done with this blog it's not it is the first page or the first um or the starting of this vlog there should be there could be a type of mistake from my site you guys please fix this otherwise in the next tutorial i will see and i will fix this one um but now i want to finish just to finish this one so we have created this nice um blog kind of overview page and we in the next video we are going to create the grid then after this list and then now let's um check the responsiveness of this so here we are and let me i want to dock it again and just let me bring it here okay so you guys can see that our hamburger menu is working again it has the links blog okay in the drop downs each and everything in this um project is from bootstrap i have shown you from the documentation and if you've got if anything is unclear to you guys please concern the documentation try to read try to know it is too big we need to make it small and i hope that you guys like this one if so don't forget to subscribe the channel and hit the like button to like this video okay i'll see you in the next one hasta la vista ciao

Channel: Code with Erum

Views: 907

Keywords: HTML 5, CSS 3, Restaurant website, construction website, coffee shop website, webdesign, how to design a website, how to develop a website, how to create restaurant website, how to create a website using bootstrap 4, e-commerce website using bootstrap 4, responsive website, responsive webdesign, how to create a blog, build a responsive blog, blog using bootstrap, blog website using bootstrap, blog building, build a blog website from scratch, blog layout html css

Id: nE34i4kM4zs

Length: 153min 50sec (9230 seconds)

Published: Sun Jan 03 2021