How To Make Responsive Website Using HTML CSS & Bootstrap-5 For Beginners

hi guys welcome to my channel guys today in this video i am going to show you that how you can make this beautiful animated responsive website by just using simple html css and bootstrap so guys if you are beginner or intermediate in web designing then this is the best project for you to design and practice so before starting this project let me just overview this website so first of all here we have our nav bar on the left side here we have our logo you can put any type of logo right here and in the center here we have our nav links the home feature and contact us and on the right side here we have one download button on the hover effect having one apple icon so whenever we are on this button it changes background color and after that here we have our main section first of all here we have one heading the big heading with the font size of bold and after that here we have one paragraph and here we have two buttons these are two buttons with the hover effect and having some icons and i get this all icons from the phone awesome website this is the phone awesome website from here you can get any type of icon for your project and on the right side here we have one image and after that here we have the another section first of all on the left side here we have one image and on the right side uh here we have some headings and paragraph and in the last here we have windows button and after this section here we have our next section first of all one heading and after that one paragraph and after that we have six uh columns having an images and uh the name of this uh and after that here we have six columns six images six avatar and with the name and after that here we have our pricing section first of all pricing one heading and after that here we have one paragraph and here we have three cards with the hover effect whenever we are on these cards it's a create a background shadow effect and having one button so this is this so this is our pricing section and after that here we have our last second last section one image and the heading and after that one paragraph and after that we have two buttons one for ios stores and one for play store and in the end of this project of this website here we have four sections the code about section and the contact section and the social media icons here we have some social media icons you can get this all icons this social media icons from the phone awesome website so after that in the last section here we have our copyright section so guys this website is completely responsive you can see this website in your mobile tablet or any type of touch screen [Music] so okay guys before starting this project i have two files one for html and one for css and here we have all of our images that we use in this website so guys before starting with the bootstrap you have to copy this started template from the get bootstrap website and paste it in your html file now we are going to remove this unwanted links and after that we are going to build our navbar first of all we are going to design our nail bar you have to visit the get bootstrap website from the components you have to click on the nav bar from here there are many custom made or nav bar you can select anyone and copy and paste it in your html file okay now we are going to customize this nav bar by removing some classes and unwanted properties [Music] so now let me see the output just refresh this page and see the output so here is the output now let me just center this uh nav links by using this class margin auto so now you can see these nav links are in the center and we have to add some padding right and left to the snare bar and just remove this container fluid class [Music] so now after that we are going to design to add this download button and after this url we have to add one more ul with the class of navbar nav [Music] and inside this ul we have to add our button [Music] with the class of download because we are going to design this download class in our css [Music] now let me just refresh this page so here you can see this download button but this is not design we are going to design this button in our css and now let me add some background property to this navbar this the background vg white and with the shadow effect and the navbar will be fixed on the top so now here you can see this output starting with the css with the style sheet first of all i am taking one universal tag with the pattern padding 0 and margin 0 and the box sizing is border box now let me just link this css file in our html file first of all i am going to design our nav links [Music] with the padding right is 30 pixel and the font size is medium and the text transform turns and the text transform is uppercase [Music] uh instead of using nav link class right here i am using nav item class so we can see the effect the padding between these nav links now let me add some css to the nav link if you see the output so here you can see the output and now let me just add the hover effect on the nav links [Music] instead of adding the hover effect on the nav links on the nav item [Music] and now i am going to add one more link the alloy just copy and paste the alloy and change the name of this nav link and now if you see the output so here is our output and now i am going to uh design this download button just copy this download class and start styling it in our css the height is 45 pixel and the fifth is 150 pixel and the outline for this button will be none and the border is also none and the background is red and the color of the text is white and the border radius will be 60 pixel [Music] and the font weight is bold [Music] and the font size is large now let me see the output so here you can see this button this download button without the icon we will add this icon uh in the end and now i'm going to add the hover effect on this download button whenever we are on this uh button let's change its background color from red to another from tomato color let's change its background color to tomato color this color will be good so now whenever we hovering or this button it's changing its background color and now let me add just some transition whenever we hover on this button is change in background color in the specific time like in 0.5 seconds [Music] and after this nav i am going to start with the the main section first of all the section with the class of main and inside this section i am taking one container and one row and inside this row i am taking two columns and inside this column i am taking this heading one the h1 tag and after that for this paragraph i am taking the p tag [Music] this head h1 with the glass of heading now let me just add some padding top and bottom for this section and the container and now i am taking another column of 6 6 column for the large screen and inside this i am taking one image and whenever you are taking an image in using an image in the bootstrap you have whenever you are using an image in the bootstrap you must have to take the image fluid class inside this image tag [Music] so here is our output with the image and this headings [Music] and now i am designing this heading in our css [Music] [Music] [Music] now you can see the output of this uh heading we add some css to this heading and this paragraph after this heading and now we are going to add some more properties in this p head class [Music] so now you can see this output uh and after this heading and this paragraph i am going to add these two buttons [Music] after this p tag i am adding one button with the class of btn1 and after this button i am going to add one more button [Music] so here is our output these are the two buttons now i am going to design this two button the btn1 and the btn2 in our css [Music] now we designed this btn one and now let me add just now just we we just add some properties we just add some css properties to this btn one as you can see we designed this btn one in our css now let me add just uh some hover effect on this btn one whenever we power on this btn one it change its background color and the transition will be 0.5 second the time in which the background color will be changed and now we are going to design our btn2 the height is 45 pixel and the width is 35 percent and the border will be 2 pixel solid [Music] [Music] so now let me see the output so here you can see the output let me add some background color the background will be transparent without any color and after that we have to add some power effect on this btn too whenever we hover on this btn2 the button on the button let's change its uh border color for that we are going to add some css properties for the bar color the color will be changed of the text [Music] [Music] whenever we hover on this button it changes text color and its border color and now after this main section we are going to design our next section it is very simple you can design very easily first of all i am taking one section with the class of pricing you can take any class like with the different name the course or whatever you want and inside this section i am taking one container and inside this container i am taking one more div with the glass of rope and inside this row we want two columns of six columns and inside this first and inside this this first column i am taking one image and whenever you are taking an image in whenever you are using an image in the bootstrap you have to take the class of image fluid in the image tag and now i am going to add some padding bottom and top [Music] so here is our output [Music] [Music] now let me just copy this content that we already design and paste it in the tags for the h1 and for the p and after that we will design the button i already designed this heading tag this heading class for the h1 i am taking this heading class because we already designed this heading class in our css and now i am taking the p tag for the p tag i am also taking the para that we already designed in our css with the sum padding top and bottom let me just copy this paragraph and paste it inside this p [Music] tag [Music] [Music] and after this p tag i am going to take our button and inside this button tag i am taking the btn one class this btn1 class uh we already designed this btn1 class it's already designed so here you can see the output this button the btn one with the hover effect and now let me just add some bg background color for this section [Music] so here i am designing this span tag inside our css file [Music] the output is the same as we already designed another website now i'm going to add this background color to this section with the class of course we just have to add the background color and now if you see the output so here you can see the output this is same that we already designed and now i am going to design this started section and after that the another section is the pricing section if you really want to learn this bootstrap and html in css you have to watch this complete video in which i designed this complete website so please watch this complete video you will learn a lot of things a lot of bootstrap and a lot of css [Music] please watch this complete video [Music] [Music] [Music] so [Music] [Music] [Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] thanks [Music] [Music] [Music] so [Music] [Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Music] you

Channel: Pro Web

Views: 4,533

Keywords: how to make website, how to create website, how to make a website using html css, how to create website using html and css, website design, website development, bootstrap tutorial, html website, html and css tutorial, responsive website design, responsive website tutorials, education, website, Bootstrap5, Web design

Id: XMguEP49L9I

Length: 41min 38sec (2498 seconds)

Published: Fri Apr 02 2021