How To Make Website Using HTML & CSS | Full Responsive Multi Page Website Design Step by Step

hi guys this is avinash and you are welcome to my new video in this video you will learn to create a complete responsive website using html and css a step by step it will be a multiple pages website this is the website design that we are going to create in this video first we have this navigation bar with one logo and some menu on the right side and in this menu you can see this hover effect after that we have some text over here and one button you can see this very beautiful hover effect on this button let me scroll this website then we have the another section which is courses we offer so here we have added three different columns with over effect and then we have another section where i have added the our college campus and next we have the our facilities where we have again added the three columns with image and some text and if i scroll down you can see then we have the testimonial section where we have added two user reviews after that i have another section for call to action where i have added one message and one button if you will click on this button it will take you to the contact page and last at the bottom you can see this about and some social media icons and copyright message now let me scroll this webpage to the top and if i click on the menu i will click on the about so it will open the about page and in this about page you can see this title then you can see some other text over here and small description one button and one image on the right side and the same footer it will be same for all the pages let's come to the top again and click on the next page which is course here also you can see this title and the same course that we have added on home page and i have added the facilities also on this page let's come to the top and click on the blog and in this blog page i have created this single blog post and this is the title image and post content let's scroll down and here you can see the comment box where we have the three input field and one button and in the right side you can see post categories where we have added the categories name and number of first then the last page is contact where i have added the title and address google map and after that some details like address contact number and email id and in the right side there is one contact form we can fill this contact form let me add the name email id and subject and message and when we will click on the send message it will send the inquiry to our email when we will upload this form to the online server when someone will fill this form then you will receive one inquiry like this one on your email id it will only work when you will upload this website to the online server that also i will teach you in this video let's come back to the page and let's click on the home page and i will open this website in small size so when you will open this website in small devices like mobile phone you can see it is completely responsive for small screen also all the layouts are looking good so this is how it looks for the small screen and for this menu you can see we have this toggle option we can open and close the menu from the right side if i click on the about it will take you to about page this is the website that we are going to create in this video and we will create this website using html and css step by step after that we will learn how to upload this website to the online server so that anyone can see our website through the internet so before starting this video please hit the like button and subscribe to my channel easy tutorials to watch more videos like this one now let's start this video so here you can see i have created one folder and in this one i have another folder called images where i have added all the images that i will be using on the website i will put all these image zip file link in the video descriptions so that you can download all the images and try to make this website after watching this video now here we will create a new file and i will rename it as index.html and i'll create another file which is a style.css now we will open this folder with any text editor here i am using brackets editor you can use any text editor so i will open this folder with brackets here let's add the basic html structures in the html file in this title i will write university website design easy tutorials before that i will add one meta tag which is viewport content it will be width equal to device width and initial scale 1.0 so it will help us to make the website responsive now we will come to this css file and here we will add one star and for this one we will add margin 0 and padding 0 so this margin and padding will be applicable for all the html elements next come back to the html file and here we will connect the css file for that we will add the link tag link rel styles it href and the file name which is style.css next we will write the code in the body tag and it will be displayed on our website so here first we will create one section and let's add one class name for this one so i'm adding the class name header now just copy this class name and come to the css file write this class name with a dot and here we will add the css properties so first let's add the minimum height for this div then we will add the width and now we will add the background image on this background image we will add the linear gradient color so i am adding the linear gradient and then color code this is the first color code and let's add the second one which is same then write comma url and in this url you have to add the image file path so you can see we have the folder called images and in this folder i have the image called banner.png so let's come to the css file and here we will write images slash banner.png so this is the complete path of the image after writing the background image we will add background size and background position background position will be centered and background size will be cover then position relative so after adding this we have to preview our website so come back to the folder and open this html file with web browser so i will open with google chrome so now you can see this image on complete webpage let's come back to the html file and here first we will create one tag which is nav and in this snap we will add the logo so i am using img tag and on this logo we will add one anchor tag so that we can click on this logo so here i am adding a hdf index index.html then image tag and image file path which is images slash logo.png like this next we will add some links so here let's add one div and we will add one class name also so the class name i'm adding nav links let's add the some list here so here we will add ul and li then we will add the anchor tag so that we can click on the link and in this one we will add the link text which is home and simply duplicate this line because we have to add multiple links just rename it i will write about and course then blog and the last one is contact after adding the logo and menu text we will again refresh the web page and you can see this logo and menu next we have to design it so that it will be aligned properly so just come back to the css file and here we will add the tag which is nav and let's add display flex next we will add the padding which will add some internal space then justify content a space between and a light item center now it looks like this you can see some space from the left side and right side and from top let's copy it again and then add img for the logo here we will fix the size of this logo so we will fix the width so let's add width 150 pixels now we will copy this class name nav links write it here in the css file for this nav links we will add flex 1 so it will occupy all the space in the row then text align right so the text will be on the right side let's copy it again and here we will add ul and li for this list we will add list style it will be none so there will be no bullet then display it will be inline block so it will come horizontally and let's add some padding to add some space which is 8 pixel and 12 pixel position will be relative after that refresh this website and you can see this menu like this next we have to add the color and remove this underline so just come back and copy this one then write a for the anchor tag and here let's add color it will be white color and text decoration will be none then let's change the font size to the 13 pixel now you can see this menu in the white color this font style is not looking good so we will change the font for that we will come to the google and search for google fonts open this website fonts.google.com here you can search the font by their name and i will go with this one pop-ins let's click on this one and here you have to select which font you want to use i mean you can add the extra light light bold regular like that so just click on these plus icons i will add thin this light and regular then i will add this semi bold and bold after that in the right side you can see this link just copy this one and come to the html file and in the head tag we will paste this link so paste it here so after connecting this google fonts link we have to add the google font in the css so again come to the same website and copy this one font family copy and come to the css file and i will add it at the top in the start i will add it here like this save these changes and now refresh the webpage you can see the font style has been changed next we will add the hover effect on this menu so just come back and copy this one write it here then write after in this after first we will add the content it will be empty then let's add the width of 100 and height 2 pixel then background it will be 1 color code then display it will be block and margin auto after that refresh the website and now you can see one line at the bottom of each menu but we have to remove this line it will be visible when we will take cursor over any menu so just come back and we will make it zero width will be zero so it will be hidden like this and again come back to the css copy this one then write hover and after and here we will add the same width but it will be 100 and in this one we will add the transition so it will be 0.5 seconds it is the transition time that's it now you can see if i take cursor over any menu you can see the beautiful hover effect one line is coming at the bottom and it is increasing so this hover effect for the menu is looking very nice next we will add the content in the center of this webpage so just come back to the html file and here you can see this nav is closing here so here we will create one div let me move it in the left side here we will create the div with the class name text box in this text box first we will add one title so i am adding the title in h1 tag and the title is world's biggest university then let's add some text in p tag so this is the text and after that we have to add one button so here i'm adding the anchor tag and the button text it will be visit us to know more after adding the title text and link let's refresh the website you can see these content it is in the black color and we have to change its position so just copy the class name text box write it here in the css file and for this one first we will add the width it will be 90 percent and color will be white and position absolute it will be top 50 left fifty percent then add transform translate minus fifty percent and minus fifty percent so it will be in the center of this div then let's add the text align center so it is coming over here again copy this one then write h1 for the title here we will increase the font size of the title so let's add the font size 62 pixel again copy this one and we will write p for the paragraph here let's add margin 10 pixel 0 and 40 pixel 10 pixel from top 0 from left and right and 40 from the bottom then we will change the font size it will be 14 pixel and color it will be white now it is coming like this we have to make this text in two lines so we will add the line break so just come back in the html file and in this paragraph text here we will add the br to change the line so we have added the line break over here so let's refresh the website again and you can see this text in two lines next we have to design this link so it will look like a button so in this anchor tag we will add one class name and let's add the class name hero btn copy this class name and come to the css file here we will add this class name herobian and for this one let's add display it will be inline block and text decoration will be none and color white then we will add border of one pixel solid and this color which is white then some padding and font size will be 13 pixel background it will be transparent we will add the position relative and cursor pointer after writing this you can see this button looks like this next we will add the hover effect on this button so that it will change its color when we will take cursor over the button so come back and copy this one then right hover here we will add border it will be one pixel solid and here let's change the color it is different color code and we will change the background the same color then let's add transition of one second now you can see if i move cursor over the button you can see very good hover effect it is changing its color so in the header section we have added all the content let me open this page in a smaller screen so that you can see right now it is not looking good for the small screen devices so we have to correct this one for that we will use the media query so just come back in the css file and here we will add media and let's add max width 700 pixel so whatever code we will write in this media query that will be applicable for the device whose width is less than or equal to 700 pixel so for this small device we will add a small size for the text so let's come to the top and see where we have written the title here you can see we have written font size 62 pixel so let's add it here and here we will reduce the font size it will be 20 pixel like this refresh the website and you can see this font size is looking perfect for the smaller screen next we will collect the menu for this website so just come back to the css file again and let's see where we have written the css for the menu here it is nav links ulli write it here in the media query and here we will add display it will be block write it again and let's remove this one here we will add position absolute then background it will be one color code height 100 vh so it will be complete height and width 200 pixel top 0 and write 0 text align it will be left and z-index too after that you can see this menu is coming like this but right now this menu is open we have to add the icon which will close and open this menu you can see this menu is hidden for the full screen device and it is only visible for the small screen so to add one icon we will come to the google and search for font awesome for cdn open this website and you can see the link here just copy this one and come to the html file in the head tag in the head tag we will add the link rel styles it href and paste the url that you have copied like this after adding the cdn link again come to the google and search for fondosum 4 icons open this website and here you can search for the icons that you want to use on your website so i will search for close so you can see we have this icon called times let me click here and we can copy this one line of code just copy and paste it in the html file where you want to display the icon so i will add this closing icon before this ul remove this part so it will look simple like this next we'll add the another icon so here i will search for the another icon which is menu you can see this icon bars open this one and copy this one line of code copy and come to the html file and we will add it here before the closing nav tag remove this part so we have added two icons over here now you can see this closing icon over here if i open this website in full screen you can see this two icons so we have to hide this icons from the full screen web page because it will be only visible for the smaller screen so just come back to the css file and here before this media query it means we have to write it outside of media query here we will write nav dot fa display none so the icon will be hidden for the larger screen devices like this now in the smaller screen you can see this icon is hidden so we have to add the icon for the small screen so just come back to the css file again and here in this media query we will add the same thing which is nav dot fa here let's add the properties like display it will be block so it will be visible then color and some margin and font size let's add cursor pointer now you can see this cross icon is visible we will add some space around this menu links for that we will again come back to the css file and copy this nav links then write ql in this one we will add some padding which is 30 pixel now these alignments looks good right now you can see this menu is opened in a smaller screen so we have to hide this menu for that we will come to the css and here you can see in the media query we have added write 0 so instead of that we will write minus 200 pixel like this so after adding this you can see this menu is hidden next you can see this menu icon over here so we have to add the click functions when we will click on this menu it will open the side menu then we will click on the close icon that will close the side menu to add this we need to add a small javascript so that is very easy so let's come back to the html file again and we have to add the click event on this icon so on this icon we will add on click on click equal to let's add one name hide menu when we will click on this close icon it will call the function called hide menu let's add the same thing in the menu icon but here we will change the name so menu so it will call the function called so menu you can see we have added this class name nav links so with this one we will add one id also so let's add the id nav links like this after that we will come to the bottom before this closing body tag so before this closing body tag we will add one script a script open and closing tag first we will create one variable here then nav links equal to document.getelementbyid and paste the id which is nav links next we have to create the function so you can see we have added this name just copy this one show menu write it here before that i'll write function then show menu and in this function we will add this variable which is nav links dot style dot right because we have to change the right value so here it will be zero and let's copy it again and change it to hide menu so when we have to hide this the right value will be 200 pixel that's it so when we will click on the close icon it will add the right value minus 200 pixel and when we will click on the menu icon it will add the right value to the zero so the menu will be visible and here we will add one comment also so it will be easy when you will look at your code anytime let's add javascript for toggle menu and we will comment it like this next just come back to the css and you can see in this nav links we will add transition it will be one second that's it after adding this transition come to the website refresh this website if i click on this menu icon it will open the menu from the right side and if i click on the close icon it will close the menu so you can see this toggle option is working fine it open and close the menu very smoothly and if i will open this website on large screen the menu is on the top now we have created the header section of this website and it is completely responsive next we will create the next section which is course so come to the html file here we will add one space and here let's add one comment which is course let's create one section here and we will add one class name for this section so the class name is course here we will add one title in h1 so the title is courses we offer after that we will add some small text in p tag so this is the text after that let's refresh the website you can see this text at the bottom so we have to add some space and make it in the center so just come back and let's copy this course come to the css file and in this css file also first we will add one comment after that add this class name with a dot for this one we will add width it will be 80 percent then we will add margin auto so it will be in the center then text align center and some space from the top so we will add padding top 100 pixels now you can see this text in the center and there is some space from the top let's come back and here we will add the h1 for this title let's add the font size it will be 36 pixel then font weight 600. next we will write the css for the p tag here we will change the color and we will change the font size and font weight it will be 300 then line height it will be 22 pixel and padding 10 pixel right now this text is not visible i think we have to change the color see it is white so let me change it triple seven after that you can see this a small text at the bottom after that we will add some content in three different column for that first we will create word tip with the class name row and here we will add another div with the class name course call which is course column let's add one course title here in the h3 so the course title is intermediate and some text in p tag which is paragraph let's duplicate this one we will duplicate this complete column and we will change the title it will be degree and the last one will be post graduation we have added three different column let me refresh this website right now it is coming like this it is not looking that good so we have to add the css properties so just come back and copy the class name row and add it here in the css file for this row we will add the margin from the top it will be 5 percent then display flex so all the div inside this row will be in the column then write justify content space between you can see it is coming in the three column now just come back and we will copy the class name course call which is course column here we will add flex bases 31 percent and background this color code this is very light red then we will add border radius 10 pixel and margin from the bottom then padding 20 pixels and 12 pixel after that box sizing border box now you can see this background color for all three columns next we will add the css for this title so let's come back and here we will add h3 and it will be text align center then font weight 600 and some margin now this course section is looking good after that let's copy this one course call then write hover here we'll add the box shadow 0 0 20 pixel 0 pixel and this color code which is black with 20 opacity and here we will add transition it will be 0.5 seconds after that you can see if i hover on any column you can see the shadow for this div so it is looking good for the larger screen device let me open this webpage in the smaller screen and you can see right now it is not looking good for this small screen so we have to add the css in the media kd so let's come back to the css file here we will write the media and max width 700 pixel you can write all the css of media query at the same place but for this video i am just writing it separately so that you can understand easily in this media query we will add this row and here let's add flex direction column that's it so after adding this one line of css property refresh the website and you can see this content is looking very nice in the smaller screen so this is how we have made this section also very responsive and it is looking very nice so we have completed the course section next we'll add the another section on this website so come to the html file so after this section closing here we will create another section let's add the class name campus before that here we will add one comment so it will look good and it will be easy to understand when you will again look at your code so in this section again we will add one title in h1 so the title is our global campus then one small text in p tag so let me just copy from here and paste it here after adding this title description refresh the website and you can see this title and description at the bottom just come back and copy the class name campus come to the css file and in this css file first let me add some space and here we will add one comment after that we will add this class name with a dot and here let's add the width 80 percent so that there will be some space from the left side and right side and margin auto and text align center and some space from top so padding top 50 pixel now you can see it is coming in the center our global campus and a small text just come back to the html file and here also we will add three different column so let's create one div with the class name row and in this one we will add one div with the class name campus call it means campus column and in this one we will add one image so i am adding image tag img tag and the image file path which is images slash image name dot png so after adding this i will refresh the website right now you can see it is looking like this there is one image in the left side just come back and copy this class name campus call write it here in the css file for this one we will set the flex basis it will be 32 then we will add border radius of 10 pixel so the corner will be round then margin from the bottom 30 pixel and position relative overflow hidden now it is looking like this now we have to add the css for the image so just come back and copy this class name again then write img for this image we will just add width 100 so now this image size is perfect next we have to add one colored layer on this image so just come back to the html file and here we will create one div let's add the class name layer in this one we will add one title also so let's add the title in h3 and the title is london which is campus location let's copy this class name layer and we will write it here in the css file for this layer we will add the css properties like background so the background will be light red colored with less opacity so we will add rgba this code 0.7 so the opacity will be 0.7 then we will add the height 100 and width also 100 so it will cover complete image then position absolute top 0 and left 0. now you can see a red color layer on this image and this title which is london right now this color is visible so we will hide this color and it will be visible when we will take cursor over it so just come back and copy this layer again then right over and here we will add this background same thing we will add and here let's add it as a transparent and let's add the transition 0.5 seconds that's it and after that refresh the website and if i move cursor over the image you can see the color and if i remove the cursor it is simple image without any color now just come back and we will just duplicate this one we will duplicate this complete column write it two times and we will change the title it is new york and the next one let's write washington we have to change the image also so we have added three columns with different image and title and you can see three different images in the columns next we have to change the position of the title and we will animate the title so just come back and write this class name here layer then write h3 for this title we will add the width 100 and we will change the font weight 500 then let's add the color white and font size it will be 26 pixel so it will be big then bottom 0 and left 50 transform translate x minus 50 so it will be at the bottom and center from the x axis then position will be absolute you can see this text at the bottom but right now this text is visible so we have to hide this text and it will be visible when we will take cursor over the image so just come back and copy this one and here we will add layer hover then h3 like this and let's add the bottom it will be 49 percent and opacity 1 and initially we will make the opacity 0 and we will add the transition also so let's add the transition 0.5 seconds that's it after that reload the webpage and you can see if i move cursor this title is coming from the bottom moving to the center right now you can see the bottom corner is not round so let's come back to the css file and in this campus call img we will add display block so for this image we have added display block after that if i refresh the web page you can see this corner is completely round and it looks good and let me open this webpage in a smaller screen so that you can see this section is also responsive for smaller screen devices so we don't have to add any media query for this section it looks good so after completing this campus section we will create another section so let's come back to the html file and see this section is closing over here so we will add one comment here which is facilities and let's add one section and add one class name for this section so the class name i'm adding facilities again we have to add the title and a small description so let's add the title in h1 and the title is our facilities and small description i will add one p tag here and copy this text from here paste it here like this refresh the website and it is coming at the bottom now just copy the class name facilities and come to the css file again in the css file first we will add one comment and after that we will add this class name with a dot and here let's add the width eighty percent and margin auto so it will be in center there will be some space from left side and right side then text align center and padding from the top to add some space from the top now you can see this title and text in the center just come back to the html file again and here also we have to create three columns so let's add one div with the class name row and let's add another div with the class name facilities call in this one first we'll add one image so i'm adding the img tag image file path over here it is library.png after that we will add one small title in h3 so the title is world class library let me add some small text in p tag so this is the text over here after adding this image title and small text let me duplicate this complete column and we will change the image so it is basketwall.png and we will change the title largest playground now the third image the image name is cafeteria.png and the title is tasty and healthy food refresh the website and you can see right now this image is coming very big so let's come back and copy the class name facilities call come to the css file add this class name over here and for this one first we will add the flex basis it will be 31 then let's add the border radius let's say 10 pixel and after that margin from the bottom five percent so there will be some space when we will open this webpage in a small screen then let's add text align left just copy this class name again then write img and for this image we will add the width it will be 100 and again we will add the border radius of 10 pixel now you can see perfect size for the image next we have to add the css for the small p text and title so just come back and copy the class name again and here we will add the p for the paragraph here we will add the padding 0 copy the class name again and write h3 for this title first we will add the margin from the top and margin from the bottom and text align it will be left that's it now you can see this our facilities area is also looking nice let me open this website in a smaller screen and scroll the web page you can see this section is also looking perfect in a small screen there is no need to add any extra media query for this so we have completed our facilities section also next we will create another section so come to the html file and here let's add one comment and the comment i'm adding testimonials and let's create one section here and for this section we will add one class name so the class name i'm adding testimonials again we have to add the title and description so let me just copy from here and paste it here in this testimonials we will change this title whatever student says just copy this class name testimonials and come to the css file first we will add one comment in the css file after that we will add this class name with a dot and here we will add the css properties so first we will add the width 80 and margin auto and let's add some space from the top so we will add the padding top 100 pixel and text align center that's it now you can see this title whatever a student says and a small text after that we will come to the html file and here we will create one div with the class name row because we have to create two columns so in this row we will add another div with the class name testimonial call so it will be the first column in this one we will add the user's image so i am adding the img tag and the image file name user1.jpg this is the user's picture after that we will add one div and in this tip we will add one small text in p tag and after that we will add the user's name so we'll add the user's name in the title tag so let me use the h3 and this is the user's name that's it now we will copy the complete column and paste it again and here we will change the user's image user2.png and we will change the user name so we have added two testimonial text and name you can see it on the webpage right now the image is so big so we have to add the css so just come back and copy the class name testimonial call and add it here in this css file for this one also we will add the flex bases so this time i'm adding flex bases 44 because we have only two columns then we will add the border radius of 10 pixel and let's add margin from the bottom five percent and text align left then we will add the background it will be light red color and some padding cursor will be pointer display flex let's just copy this class name again and then write img for this image we will set the height it will be 40 pixel and we will add the margin from the left side which is 5 pixel and margin from the right side which is 30 pixel then let's add the border radius 50 so the image will be circle you can see this image is very small it looks good next we have to add the css for the text and name so just come back and copy the class name again and let's add some space here and here we will add p for this p we will add the padding 0 copy the class name again and write h3 for this s3 we will add the margin from the top and text align it will be left now it is looking good next we have to add some start icons in this one to add one icon again we will come to the same website font awesome and here we will search for the icon so let me search star you can see we have different types of icon here star star o star half o star half so we will use this one star open this one and copy this one line of code and add it here in the html file add this icon after this title and remove this part like this now we will duplicate this to add multiple icons and in this last one we will add star o it will be empty icon empty start icon like this one that you can see on this page and we have this half star also so just copy this one and paste it in the another review and here we will add star half o which is the another icon that's it after adding this i can refresh the website again and you can see these icons in this testimonial the first one is for start and the second one is for an half star next we have to change the color of these icons so let's come to the css file and copy this class name testimonial call again and here we will add dot fa for the icon and what we have to add here we have to add the color so that it will change its color that's it and now you can see different color for the star icons so we have added the content in this testimonial section let me open this website in a smaller screen and you can see it is looking good but still we can remove some space so it will look better so just come back and here again we will add the media query and let's add max width 700 pixel as i told you we can write all media query at same place but i am writing separately so that it will be easy to understand let me just copy everything here from this testimonial img and here let's remove this height and remove this bottle radius so right now you can see the margin left is five so i will change it to zero and margin right i will change it as 15 pixel that's it so we have reduced the space so you can see this testimonial is looking good in the smaller screen so we have completed this testimonial section also for our website next we will create the another section for that just come back to the html file and let's see this section is closing here so let me add some more space here and i will add one comment so the comment i will add call to action because we will create the call to action section and here we will create one section with the class name call to action let me write it in sort cta so the class name is cta again we will add one title here so let me add the title enroll for our various online courses anywhere from the world after that we will add one button so let me add the anchor tag and button text it will be contact us that's it come to the website again and you can see this title and one link which is contact us now we have to add a line break in this title so just come back and here we will add br to change the line and after that refresh the webpage and you can see this title is coming in two lines so it will look good now just come back and copy the class name cta and come to the css file in the css file also i will add one comment which is call to action and after that we will add this class name dot cta here let's add margin 100 pixel and auto 100 pixel from top and bottom and auto from the left and right then width 80 percent and in this one we will add the background image then linear gradient color which is first color code here and again the same color code then comma url and in this url we will add the image file path so i will write the image folder name then image file name which is banner2.jpg this is the image file name you can see this image here in this folder banner2.jpg so after adding this background image we will add the background position it will be centered and next we will add the background size it will be cover let's add border radius of 10 pixel and text align center padding it will be 100 pixels and zero so after adding this refresh the website and you can see it is coming like this this text is black right now we have to change the color and we have to decorate this button so just copy the class name again dot cta here we will add h1 and let's add the color white and margin from the bottom which is 40 pixel and padding will be zero after that in the html file we will add one class name here that we have already written which is hero btn we have added this class name in the header section like this so after that let's refresh the website again and you can see this text is looking good and this button is also working fine we can see the hover effect on this button because we have already added the css for the hero bdn right now you can see this section on the smaller screen and the text are so big so we have to reduce the text size in the smaller screen so just come back to the css file and here we will write the media query and let's add the maximum width 700 pixel and in this one we will add the same thing which is dot cta h1 and we will reduce the font size so let me write the font size 24 pixel that's it and after that refresh the website again for a small screen now you can see the text is looking fine in this section so we have completed the call to action section also and this complete webpage is looking nice and responsive now we'll create the another section so just come back in the html file and here let's add one comment so just copy from here and add it here and we will replace the comment text it will be footer in this footer we will add one section and let's add one class name so the class name is footer in this one we will add one title so let me use the title tag here h4 and the title is about us after that we will add one small text in p tag so in this p we will add this text like this we have added the title and description let me refresh the website and you can see this title here and this text here at the bottom now just copy this class name footer and come to the css file and in this css file again we will add one comment which is footer and let's add this class name with a dot here let's add the width it will be 100 and text align it will be center then some padding 30 pixel and 0 just copy this footer again and write h4 for this title we will add the margin from the bottom and margin from the top then font weight it will be 600. right now you can see this text is very long so we have to add a line break in it so just come back and let me add one br over here we will again refresh the website and you can see this small description is coming in two lines it looks good now we'll again come to the html file and here we will create one tip with the class name icons and in this div we will add one icon let me copy this one and we will change the icon name so it will be facebook if you don't know the exact name of the icon you can search on font awesome website let me duplicate this one and we will change the name so the second one is twitter then next one is instagram and the next one is linkedin let me remove this one that's it we have added four icons after adding this refresh the website and you can see all these icons over here we have to add some space and colors so just come back and we will just add one text here in p tag so the text is made with and let's add a space and add one icon and after that easy tutorials i will add buy easy tutorials and here we will change the icon name it is heart o so made with heart icon then buy easy tutorials like this you can see this text at the bottom made with love by easy tutorials next we have to add the css properties for these icons so just come back and copy this class name and come to the css file here we will add this class name icons then write dot fa for this i can we will add the color it will be this red color then we will add margin 0 and 13 pixel and cursor pointer padding of 18 pixel and 0 let's copy this fa heart o write it here with a dot and here we will add this color that's it so after adding this again refresh the website and you can see these icons looks very nice so we have completed this footer section also let me scroll this website so that you can see this complete home page is looking very nice if i open this webpage in a smaller screen you can see this footer is responsive and this website is looking nice for the smaller screen also and for the larger screen also so we have completed the home page of this website in the next video we will create the other pages of this website like about page course page blog and contact page and i will put the video link in the description thank you so much for watching this video if you have any question you can ask me in the comment section and please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: Easy Tutorials

Views: 1,498,412

Keywords: HTML CSS Website Design, HTML and CSS Website Design, Make Website Using HTML And CSS, Craete Website Using HTML and CSS, Complete Website Design, Full Website Design, Make Resonsive Website, Responsive Website Design, HTML and CSS, HTML Website, Learning, Computer Science, Computer Engineering, HTML Tutorial, CSS Tutorial, HTML Coding

Id: oYRda7UtuhA

Length: 71min 58sec (4318 seconds)

Published: Mon Mar 15 2021