Build a responsive website using HTML5 and CSS3 (Flexbox)

hello everyone welcome to code spot I'm a burner I'm a web developer and today we are going to see how to build a website using flexbox this is a website that we are going to design today using the Flex box property in CSS if you are new to flexbox check out my tutorial on basics of flexbox I would mention the links down in the description box below and let's get started so let's look at the website that we're going to build today this is the website that we will today today there are the social icons towards the right you'll have a logo and news today heading below that you will see the navigation and then down you have the breaking news and a market tag which helps the text to scroll all the way towards the left going down you are going to have featured news latest news in our fix news so in the feature you have the key result and the rest all just plain old news [Music] going down you have the world article sport article and the nusselt section consists of recent news and further down you have above section Instagram section there is a button and also subscribe to news section you also have a button to subscribe then finally the copyright information so this is the website that we are going to design today now if you resize it and go for a mobile view you can see the navigation bar changed to a hank hamburger menu and then all the latest in our fix news comes all the way down the world and the sports news come beneath one in one another and so dizzy about section Instagram and subscribe section finally the copyrights but now you will see exactly how easy it is to do this in a flexbox so in today's tutorial I'm going to use special studio code as my code editor and I have already created two files in the extraordinary ml and style of CSS I use the live preview option right here to see the output as we code we've to enable this live preview option you need to search for an extension called life server [Music] and then you have to install the light server you'll be able to get a button called gold light beneath your index dot HTML 5 and when you click on that you can see the light output alright let's start with the HTML head and body tags [Music] I'm going to first start with a hello world to see if this life review option works I'm going to create a paragraph tag saying hello again I'm going to save and you can see the output is reflected on our browser window now let's go to the head tag and start with linking our style sheet file now let's go to the style dot CSS file and just give a background color to check whether this is working [Music] yes it does we are going to include some bootstrap into our file so we don't have to waste our time typing up the CSS so we should go to the bootstrap website copy the CDN and paste it into our head tag [Music] [Music] and then let's copy the JSC DM links and paste it in our body tag and it's that simple to include bootstrap into our index dot HTML file I will flow to the code for this news website in the github.com and i will mention the links down in the description box below this tutorial is for absolute beginners so this is a step-by-step tutorial so before we jump into the tutorial I would like to go to the github web profile and download the entire code I would like to copy the images folder into a project file so you would get access to all the images that is used in this website [Music] alright now we got all the images inside our project let's get started I'm going to start with the head attack I'm going to create a div class called website header [Music] inside I would first give the logo image my first image from the images folder [Music] and there you have it the logo image in our browser window next I will give a h1 tag called news today then I would create a div container for the social icons that you would see it towards the right of your website links to your social media like Facebook Instagram etc to get those icons I would like to visit the website called font or simcom go to the start button here and just copy the whole CDN and paste it inside our head tag then we also give the comment below that I will paste the link [Music] there you go now I'll quickly type all the social icons for Facebook [Music] now if you go to the browser window you can see the F icon below the new studio h1 tag let's go ahead and create the rest of them Twitter Google+ Instagram and Horace's now in case if you are wondering how I'm coding for this icons go to font awesome website go to the icons and search for the icon that you want [Music] click on the desired icon that you want I'll go for Facebook Square and there you have it the Facebook's Square and you have the code on top of it as soon as you click it it gets copied and then all you have to do is paste it wherever you want now if I save it and go to the index dot HTML you can see the last icon that we are added now let's remove that and let's move on to the standard CSS I'm going to start with the body tag starting with padding and margin I will set them to zero and then I'll move on to do you headed back first I would say the background color to black I'll set the font color to white [Music] then I would start to the website head up I would give some padding padding 20 pixels I would resize the screen size so you can see the output as we code I'll give it some height 80 pixels and I'll set the display to flex flex wrap to wrap now I save it as soon as I save it you can see all the child elements of website header go next to each other horizontally now this is the basics of flexbox now you can't see the icons anymore because you have mentioned the font color s white if I remove that and say we can see all the social icons we need the social icons also horizontally especially in the smallest screens it is not visible so let's go ahead and style the logo and news today so starting with image I'll give the width as 50 pixels and height as 50 pixels [Music] I'll set a margin:0 and 30 pixels left in white now moving on to our hitch run tag I'll start with a margin or taupe to zero that means it is vertically centered and then the social icons [Music] I'll say text-align:right so it is pushed all the way to its right [Music] now if I expand the browser window you can see the social icon still remains with same position this is because the dip container that is containing all the social icons have a smaller width go to the inspect element and such for this social icon still plus when you click on it you can see the blue light highlighting the width and height of the web icons to fix this we need to use the Flex box property to say that it is okay to expand till the end to do that you need to take the Flex go to one now by setting that you can see the width has expanded all the way from news to date till the end and you and the text-align:right is working perfectly fine I'll quickly resize the browser window so it is more visible now I'll go ahead and style the individual icons parting with a margin I'm going to give left and right margin as seven pixels I'll say the cursor to pointer [Music] now you can see when I move the cursor towards each wrinkles you are turning into a hand symbol [Music] okay and I will resize the window horizontally so you can see the output as we go down below now moving on to your navigation I'm going to go ahead with a bootstrap navbar so it is easy for us to code so here I'm looking for the collapsing navbar because we want the never to collapse into a hamburger menu for the mobile screen size so we'll just copy the whole code that is available here in table 3 schools and paste it in our navigation bar so let's go ahead and paste the whole code beneath their social icons here we do not need the beachy dark and nav nav bar dark classes because they are basically templating styles so we'll go ahead and delete them we also do not need the navbar brand because we have already created a brand icon for the news today website now I'll go below and quickly change the links in our navigation bar home politics and world now if I go ahead and go to the index dot HTML browser window you can see this navigation bar next to the social icons which is strong so let's go to the index dot HTML and see what we have done wrong [Music] he replaced all the navigation bar insides the website head order + so let's go ahead and change that now I've kept the navigation bar outside the website editor plus it is still inside the header tag but outside the website header div class now if I save and go to the browser you can see the navigation bar has come down below all right now let's go ahead and create more links in our navigation bar business travel technology [Music] sports cars videos all right now let's go ahead and style them [Music] I'll start with the nav tag I'll give it some height 50 pixels I've given margin what almost 20 pixels I'll give the background color as black then I'll start with the UL tag marchin 20 pixels this would set only the margin top as 20 pixels in rest as zero and then I'll go ahead with a navbar now I'll go for each links I'll set the color to white I'll set the font size to 20 pixels I'll give the font weight as 800 so they are bold and moving on to navbar NAB alai each and every list items I would first set the padding to 10 pixels and 20 pixels now when I hover over the link tag I want the color to be e 0 8 v 6 C now if I home where you can see they are changed into brown color on the second thought since I am going to use this color a lot of times I'm going to set it as a global variable by setting the route back now I can use the variable in solid color property and if you check it works still the same [Music] now let's go ahead and go over the breaking news section so starting with for the breaking news heading and then we'll move on to the market tag [Music] I'll remove this behavior and the direction is going to leave left now here I'm going to give links to some breaking news I'll say the class to breaking news and I'll set some random text inside this head schref i'll also going to I'm also going to mention a time of this news here and then the random text [Music] I'll give three breaking news copy and paste them and change the dates [Music] now if you see you can see the breaking news just going one below the other now we need to style them so they go horizontally next to each other so let's go to the style dot CSS and start with a breaking news section I'm going to give it a padding:0 30 pixels 0-60 pixels and I'm going to set the display to flex now you can see the breaking news and the market tag appear one next to each other now I'll go ahead and style the breaking in your section it starts with a B tips I give it a width of 200 pixels 25 16 pixels and I'll trigger and I'll transform the text to uppercase and also it'll also give the color as color brown I'll set the font weight as 600 I'll give the margin or to 0 so it is vertically Center now I'll style each and every breaking news I'll give the padding as 6 30 pixels I'll give the color as white [Music] also the font way to 800 I'll say the display:inline-block so now they appear one next to each other I'll also go ahead and set the time as display:inline-block so even the time and the text appear one next to each other now I'll reduce opacity for this time I'll set the RGB a tag to 255 255 255 and 0.5 s FS T now you can see if I change the opacity to 1 you can see they are back to white color it is fully white and if I reduce it 0.5 the color fades and it turns to grayish color so let's go ahead and set padding:0 10px is and then I'll set the font size to 12 pixels so the time stamp is smaller than the actual breaking is now when I hover over the news I want the color to change to brown so I'll set the color and then I'll also set the cursor to pointer so there you go when I hover over the news the color changes and the mouse changes to handsome [Music] I'll also use the same property for the social icon still [Music] but actually that is dot social icons well it is for each and every eye pencil [Music] now when I hover over the market tag I want the news to stop moving to do that we can go to the market tag and set the on mouse over to this stop stop and then on Mouse out to this dot start that means when I take oh the take the mouse out it should start moving but when I hover over it means to stop so let's go to the browser and check whether that works so when I try to stop the market tag it stops and when I take a closer out it continues moving now let's give this whole breaking news section a height I'll set the height to 30 pixels now it is not appearing because of the padding so when I remove the padding you can see of the market tag is positioned properly now let's set the padding to zero 30 pixels there is some space between you should never use [Music] in the breaking news section now let's move for the future latest and our pics in your section [Music] so in the picture you have the carousel and then in the latest you have newest one below the other and then same in the our pics section so let's go to the index dot HTML and all this news comes into the main tag so I'm going to give me and I would put each and every one inside an article inside article I'm going to have three sections called feature latest and our pics [Music] let's go to bootstrap carousel and copy the code so I'll come all the way down and see for the one with indicators and caption [Music] so let's go about and copy the code the one that comes to the indicators so let's go ahead and copy them inside the featured section now I'll quickly change the source property to our images that we have there is a one carousel two and carousel three dot jpg [Music] if you go to our index traditional kisi the three images and the carousel property [Music] now we also need the captions for each and every images so let's go and copy the caption part alone [Music] now I'll quickly replace the hitch fry and the P tag with some random text [Music] inside the P paragraph tag I'm going to paste some date and now if you see the Browse of seeing the browser you can see the caption appearing in our Kara so now let's move on to the latest in our fake section starting with a heading for each and every section for featured latest on topics I'm going to use the h2 tag for them [Music] and then I'll include all the news inside a section called news and I'll use a class called news container to hold each and every container for the news so a container would contain an image and then some text that describes the news I'll give it a class called popular news text so we can style them and I'll place some random text ring inside them I'll copy the same section and then I'll just change the content for the image and the paragraph tag and I'll repeat the same thing for the out big section too [Music] let's open the browser window you can see the images and the text files alright let's go ahead and start them first I will say the popular news to display flex so all of them come next to each other but this is not working because the image is taking all the space so we need to set the image files to width 100% so they are not oversized [Music] now you can see they are one next to each other all occupying almost equal space now I'll go ahead and set the margin 30 pixels and 5% [Music] and then I'll go for the popular loose hitch to tack I'll give it the margin 0 padding:5px ills and set the color to white [Music] now we'll set the background color for each and every headings [Music] you [Music] now it is not visible so let's go to the index traditional and shake it [Music] I have said the class name as latest but it should be IV so I'll change that out and you can see them now but our pics are still missing so we go to our style dot geo CSS and check you can see I've given the wrong idea so now it is perfectly fine you can see the feature latest in optics section now let's go ahead and darken the images for the new section by sitting the brightness to to 0.7 this helps the text become much more visible so now if I open the browser window you can see the text is much more visible this way now let's tell the text for each and every images also the font size to 14 pixels I'll also say the position:absolute I'll give color as white and I'll set this at index 2 - so it would appear and on top of the images I will give the positioning as bottom 5 pixels so it is pushed all the way down and then I will set the font size to 24 pixels and the font-weight:bold up let's say the padding to 0 to 10 pixels [Music] now I'll set the featured section flex - so it will have lot of space and the rest latest in optics as flex one so the featured section occupies double the size of a mom than the rest of me so now you see the output is just asked me desired now when I hover over the news container we want some sample transition to happen so I'll make the text appear a little bit above so when you go here and hover over this you can see the text is a little bit about [Music] but it's just happening very abruptly so let's go ahead and say the transition deviation for the popular news text as 500 milliseconds so the transition happens smoothly also when when we hover over the news container that said the cursor to the pointers show it changes to the hand syndrome [Music] all right let's move on to the next section world sports and the recent news if you see here there is the heading an image another heading and the news description so let's start with a section called more news which contains the entire section and then I'm going to create a place for the new section and the asite section the new section will have two articles one for the world years and one for eSports news [Music] inside the world's news we have an image a heading handsome dummy text that describes the news so I'll go ahead and quickly paste the code for this so if you go to our browser file you can see the content here heading image another heading and some text in their site section you just have a heading an image and a small description so I'll go ahead and quickly paste that here so you have each news inside a container called recent news and inside that you have an image and a text file so when you go to that browser they can see they see them let's go ahead and mention the recent heading [Music] the entire section is under the class called Manu so let's first go ahead and set display flex for this one [Music] as soon as I said the display flex you can see the news and their site section from one X to another next we'll take the new section which covers both the world and sports article and set the display to flex payment [Music] as soon as I said that the world in sport come next to each other and if a horizontal scroll then you can see me recent a side section to now here I'm going to set the background color as black and I'll say the justify content space wrong but nothing of this works I'll also I said the font color to white so that is visible [Music] as you know the space around would not work unless you give some width to the sections so so it will know how much space that is left to space around so let's say the Flex races for the new section is 70% and for the aside section as 25% now it is not working because we need to set the image width to 100% now it works there is a space around the new section and the asite section and also in between the news now for the new section let's set the justify content to a space with [Music] again we need to set the Flex basis for the world and sports so for both of them I'm going to say the Flex basis as 45% [Music] so now there is space in between them [Music] we're just the padding for the entire section zero and five percent [Music] now let's style the hitch tilt up the world I'm going to set the background color to be 21 7-5 me and for the sports I'm going to set the background color as 3 c1 b75 how inside the more newsom you decide that takes the line to justify so the description is much clearer now [Music] let's go ahead and design the recent near section that contains the image and paragraph under the aside section first I will set the display to flex so the image and the text of your one next to each other and for the image I'm going to set the width to 70% and height 70% and also margin [Music] now I'll style the paragraph tag inside the recent year somebody said the font size to 14 pixels and we say some windows so you can see the output as we code I'll give the font-weight:bold and also I'm going to give a margin or toe so it is vertically and horizontally Center now let's Sally entire a side section I'm gonna give the padding 10 pixels [Music] I'll give the border 1 pixel solid and white color so there's some water there once again to give the margin Auto zero so to sporadically centered I'm going to give the border radius as 5 pixels the edges are curved finally let's give some padding to the headings 0 10 pick system [Music] I'm also going to give the margin as 10 pixels 0 0 0 so the heading is properly placed alright let's move to the final section where you have the About section Instagram and subscribe section they all come under the footer section so I'm going to create a footer tag I'm going to give a drill class for social links and inside this container tag I'm going to create three sections one for about 1 for Instagram and one to subscribe [Music] inside the About section you have a heading some text and with these social icons the social icon so full of font awesome icons so I'm just going to copy and paste the entire thing h2 tag a paragraph tag and the social icons under a div class called social icons fruta for the Instagram we just have the heading images and a button so copied the images so let's go to the index dot HTML and see you can see all the images below the Instagram we need to create a button so let's create that I'm going to give the class called footer button and the value is going to be view on Instagram now finally the subscribe section I'm going to create a heading pitch to tap sync subscribe to news today and I'm also going to create a paragraph tag saying that enter your email address to subscribe to this blog and receive notifications of you posts by email I'm going to give an email input type [Music] and finally the button foot to subscribe let's go to the index dot HTML and see whether we caught that yes now let's go to the style of CSS installed am starting with the social links I'm going to set the display to flex so all of them come next to each other all the sections now when I set the padding as 5% so there is some padding around I'm going to say the justified content as space between so there is space in between each sections now this doesn't work properly if you don't set their Flex basis so I'm going to set the Flex spaces as one for all the sections so 30% for all the sections now they are all equally spaced and the 10% of this way is to spread around and in between now I will star the Instagram images I'm going to give some padding to them [Music] now I'll design the social icons footer icons [Music] I'll give the font size a 37 pictures and I'll give the padding asphalted cells let's go to the browser and see yes it's fine now now let's design the filter buttons we subscribe that and here [Music] I'm going to give the border as one pixel solid 2 1 9 9 6 f 3 and then the font color the same well it's not working because it's footer button not footer buttons so I change that it's safe you can see the stylus changed now I'll quickly resize so you can see go to the support now I'll say the font size to 14 pixels I'll get font weight as Boulder and I hit save background color as white margin 20 pixels or two I'm also going to give this a pairing 10 pixels and 20 pixels finally health of the positive point of [Music] now let's design the whole property and set the color to white and the background color as the same blue color [Music] so when I hover over the button you can see the style has changed finally the copyright information and have pasted it in the reddit class called copyright and finally let's go ahead and scale this copyright information [Music] I'm going to give it a width of 100% set the background color is black I'll give the font color as white padding five pixels as I said the text align to Center and if you open the browser you can see it's completely fine now so with that we have completed the website design in the desktop screen but if you resize it to a smaller window say for mobile screen it is all cluttered it is congested completely you can't see the social icons anymore and all the items are completely congested into the smaller space but if you see our final output you can see it comes one beneath each other properly so we'll try to do the same using the Flex box and you'll see how easy it is to do it so first set the media to max width 600 pixels [Music] let me bring the screen up so you can see you're with us rapport first starting with the website Heather [Music] I'm going to start with the image I'm going to give a smaller width and height here and also give a smaller pad in here now for their h1 tag I am going to give a smaller font size so 15 pixels as soon as I make it smaller you can see the social icons coming back up now let's go for the breaking news section entirely I'm going to get the padding as 10 pixels [Music] I'm going to get the Flex trap as app I'm going to give the height as 70 pixels so the breaking news and the breaking news down beneath one another though the Flex has been wrapped so it comes one next to each other now for the navigation [Music] if you see the travel button is under the class called navbar toddler icon so we need to make that visible so let's go down inside the media attack and let's pop it icon and I'm going to say the background image has images slash May node object and if it's a you can see the menu will need to be like right here we can paste any image that you want here I'm just pasting a basic handle Dominion here we need to style the navbar collapse the navigation that we want one service in a mobile screen [Music] here I'm going to give a background color black now when I click this the items are appearing one beneath the other so to fix this we need to set the Z index to 16 which is the highest point so disappearing about all the other elements so the navigation works perfectly fine now let's go on to the next section so in the popular news we need to set the Flex wrap to wrap soldier so we save a flexbox that you do soap okay to wrap the sections for the smaller strings [Music] and then we'll come to the media tag and we'll say hashtag fit shirt flex Auto as soon as we do that you can see a disappearing perfectly fine when I expand it goes back to the normal one and when I shrink it to the mobile screen it comes one beneath the other now for the world sport in the asite section [Music] so I got the new section the site section world and sports section first I'm going to set the Flex wrap to wrap for the new section and the more new section now you can see they are Pier one beneath the other [Music] finally the last footer section for so shillings I first said the Flex wrap to wrap and I'm going to include the social section means to flex makes this 100 so they occupy the entire space here so just like that you can see they all come in eat one another so here I'm going to set the border with l0 we don't want to bother it here in that size section to the mobile you [Music] finally let's give some space for each section the social links so I'm going to go for the social links section [Music] and I'm going to give it a padding of 15 pixels to zero so there is some padding in between each memory section just like that we finished the news website so easily and comfortably using flexbox I hope this video gave you some information about flexbox and CSS styling if you liked it please hit the thumbs up down below please share your feedbacks in the comment section and subscribe to both spot for more such videos thanks for watching [Music]

Channel: Code Spot

Views: 28,582

Keywords:

Id: ygzSkxXXwPo

Length: 49min 14sec (2954 seconds)

Published: Wed May 29 2019