How to Build a Responsive Bootstrap Website From Scratch

About this course

hey what's going on guys welcome back to programming knowledge so in this video we will learn how to create this particular website so we have this

nice-looking responsive website and you have different sections like about the site itself services the services offered and portfolio ok and then call the action and of course this contact

information or contact form and then if you try to click on this button or the menus at the top we could see that the page scroll to that particular area so about in the services portfolio contact

and we have the footer at the bottom and then if you try to click on this text or the logo it could actually navigate to the top of the page so in this particular video we will be learning how

to create this all the necessary files all the necessary structure or all the necessary tags that needed to build this particular website and if you can see this is a responsive website ok so you

try to resize this ok you can see that the elements will try to fit with the window size okay and then we will try to click on this mobile devices then we can see how our website will look in our

super sample mobile phone tablet and so on so we have we can also click on this humble gear icon and see the venue or our website and then we could click on that particular

item and then move to that particular area in our page we could also try to select devices separate sample Galaxy s5 iPhone 5se so you can see what the website will look into this particular

website so iPhone 6 okay iPad pro and then you can see that it is very responsive and it will look good whatever whatever device that we select or whatever device we're using so if you

want to learn how to build this particular website just follow along with this tutorial and I will guide you through all the steps steps necessary to build this nice looking responsive

website using bootstrap now let us see how the project is being set up and let's go to our code editor so in this particular project I'm using the atom code editor which is a very nice free

open-source editor for your different projects so in here we have the basic setup of our project we have the CSS we have the images okay and we also have the JavaScript files

and then we also have the vendor folder which also includes bootstrap font awesome jQuery and we need magnifica to save you a lot of time configuring the setup for this particular project we

will be providing a link that will enable you to download the starter files for this particular website and if you haven't downloaded the starter files yet go ahead and download the files so that

you'll be ready and you can follow along with this particular tutorial ok so the first thing that we're going to discuss is the structure or the basic structure of this index.html so we have this time

doctype HTML and we have the language as English then we have the head tab and we set the character set to the standard duty of a utf-8 and then we also set the meta name viewport and we also set the

meta name for a description and empty for the content we have also set the author and then content you can go ahead and type in your content for this particular metal tab and then the next

one we have the title which is programming knowledge and then whom the next one is to include different awesome icons and we have this in our vendor directory so we have the font awesome

tree the next one is to include the google fonts which is the Merriweather sans and we also included the other variation for e for this particular fun the next one is to include the plug-in

CSS so we have this magnetic pop-up CSS included in our file the next we have included our own style sheet which is coming from the graded dot CSS file inside the CSS directory then that's the

end of our head dad and then for this particular body tag we have added the ID page – top and then we're gonna use this ID later on so I have added different sections the section for navigation the

mast-head the section for about and then services section all the necessary code for our services section we go here and for our portfolio will be here call to action here and

action and so on and then at the end of our file we have included a different JavaScript files we have the jQuery or the minified Jaykar version we also included the bootstrap bundle minified

version that Jas and also included the plug in JavaScript or easing or jQuery acing minified Jas the other one is the Magnificat jQuery unified version also and last but not the least is our

JavaScript or creative our very own creative that Jas so we're just gonna modify this javascript file later on and then that's the end of our body tag and also our HTML and now we're going to

start modifying our index that HTML the first thing that we're gonna need is to edit the navigation or the add the navigation to or website so the first tag that we'll be adding will be the Nam

and we'll just add the ID for this which is main not okay and then for this particular element will be defining the classes for this the first one is not bar okay the second is Nam bar – expand

and then large and then also we have the knob then light or Knob bar light and this navigation should be fixed on top and then we're just gonna add padding for this which is by or py – 3 which

means that we need to set the padding for y-axis okay so inside this bag we need to add a div with a class can tailor so div and then it should have a glass container

and then we're gonna add a link and then the target for this will be the page up or the body with the ID page so every time you click on this link it should move the page to the top of our button

or top of our page okay so in this particular link we need to add classes also so class and then we're going to define knob bar Brian and another class will be Jes – scroll

trigger then inside this we need to add a name for this particular website for for for making its programming knowledge okay so in your case may be different you can use whatever name you want so I

think that's it for this particular tutorial and in the next video we will continue working on with this index at HTML to add different elements to our website thanks