Hello everyone and welcome back to our bootstrap course for beginners in this lecture.
We're going to be downloading bootstrap rather importing it into our site as well as setting up the
basic skeleton for our site.
Over on J.S. Ben which is a free online editor.
So I've gone ahead and googled bootstrap download and go ahead and click on what should be the first
link up here and we'll take you to the bootstrap documentation and only download page.
And now here there are several different options for downloading bootstrap.
Now you want to scroll down here to this city a city and we'll allow you to put bootstrap directly into
your HMO code.
So you want to copy this as well as this code.
And we're going to include this code first and then this code.
Secondly into our Web page and let's go ahead and show you how to do that right now.
OK.
So this was get bootstrap dot com slash docs.
Now we can close that and open up J.S. Ben dot com as soon as you open up GSP and you'll get what is
known as the bare bones of a Web site.
So this is the extra amount for the most basic type of Web site as you can see in the output.
There is nothing here yet because there is nothing in the body.
So we're going to do in this lecture is set up the basic skeleton for the different elements and blocks
of our Web site.
Right now we have a dark type which is a shame all the documents type.
Then we have an opening issue email tag which means that anything inside of the issue email tags should
be considered and read as each to mail code.
Then we have the head which is where you will import style sheets or put in information like the site's
title or the character set.
Now because we're using just been we don't actually need to reference any style sheet which we typically
would need to if we were using in environments such as Adam or any other idea.
But we don't have to import SPSS style sheet because it is right here in the CSX tab on bean been as
you can see any code that we write in this you tab will automatically be applied to the each GMO in
the same GSP.
OK.
So we have the character set here in the head which is UTF 8 which means that it will recognize characters
of this character set.
Then we have the Met name viewport and contents saying that the width of the viewport is equal to the
device with.
Now this is for Jeff spend to be able to set the width of your page.
Then we have the title.
This is the little type the tail that will appear on the top of your web page so you can see here J.S.
Benji has been that is the site title.
Let's go ahead and change that right now.
Now in this series we're going to be building a company Web site.
So let's go ahead and add some template name company title like company name.
So this won't actually show up on screen as you can see in the output the output represents what you
would see on screen and you type in w w w dot company name dot com.
So there's nothing on the screen because this code is all in the head and only what is in the body will
be shown on screen.
So let's go ahead and start setting up the body.
But before we do that we need to import that bootstrap code that we copied over from the bootstrap documentation.
So go ahead and copy DCD and code and paste it right in.
Now the first bit here is what is required for the city and so J.
Query and just deliver.
And then underneath that is actually the script for bootstrap itself and then you'll get bootstrap CBN
and by just putting it here into the body at the end of the body mind you just before the body type
closes this will allow us to immediately use bootstrap without having to import or download or install
anything.
Okay great.
So now we have bootstrap which means you can access its classes which allow for automatic styling et
cetera.
Let's go ahead and set up some of the blocks of what we're going to build.
So first we're going to need a nap.
So this will be our navigation containing different links to areas of the page.
We're going to build a single page site.
And when someone clicks on the link in the NAV it will scroll down to that page on the single page site.
OK.
So then what we're going to do is have these services overview for the company so the services that
the company provides give us an idea like services overview.
Now these tags and notice are not self closing which means you must provide an opening and closing tag
some different elements like image they are self closing but these and most are not.
OK.
So we're also going to have a section of the page for services or view.
Let's also setup one for their products.
So put this here as well.
Give B equals products.
Now you'll notice I have a different idea for each element and that's because an idea is reserved for
one element only a class you might have heard of is reserved for multiple elements so you can use classes
on multiple elements at once.
But ideas are for one element only.
Okay so we're also gonna have a bunch of products maybe feature products rather featured products of
the company and make sure you have a hyphen between any words in your idea.
Okay so we have featured products.
We're also going to include a carousel and that will be this featured products look good carefully at
the end of this.
So we're going to build a carousel which is going to show different images that the user can click through
to see the featured products of the company.
Okay we're gonna have product descriptions as well.
And finally we can go more in-depth about the company's services.
So we have an overview so far.
We can add one that is going more in depth about the services and then we're going to also add a contact
form.
So this will allow any user to just immediately contact the company through the contact form.
Now this we're actually going to make a section rather than a div and we're going to give us ideas of
contact as well we're gonna give it the class contact because that is a bootstrap class that will make
your contact form much more responsive and easy to build and more user interface friendly.
So it will look nicer because it is made by bootstrap.
That's a big step is for is to make it easier to make nicer looking and functional elements.
And finally we're going to add a footer.
Notice how all this is in the body just before the scripts.
Okay.
So this is the extremely basic barebones setups that you have an idea of where we're going to be continuing
throughout this series for this specific project.
We're going to have a nav as well as a services overview which is sort of like the main section we're
gonna have a carousel and then more detailed services and a contact form.
It's also footer.
Okay great.
That is all that you need to set up the web page you know so you click on output you still don't see
anything.
And that's because you don't actually have any text elements or image elements on in the body.
We just have the tags.
Nothing inside the tags.
So we're gonna be working on showing something in the output in the next lecture and then I expect you're
going to be beginning building this navigation.
So it's the first element in our bodies we're gonna begin with that.
So this will contain different links for the navigation.
Other than that that is it for this lecture.
Thank you everyone for watching and we will see you in the next lecture.