Now, before we continue, we should really save all of this good work that we've done here in our code
play now in the previous lesson.
You should have downloaded a file called Bootstrap Inside, which we have this folder called Tin Dog.
Start here and this is a skeleton project that I've created for you so that you don't have to go through
the tedious process of finding your own images or creating the blank styles CFS or putting in the HTML
skeleton.
Now it's a good idea to have this file inside your development folder, wherever that may be.
And once you've got it saved in there, then I want you to right click on indexed HTML.
I want you to open it inside atom.
Now, once you've got this file open, it's a good idea to just take a quick look through it to see
what we've placed in here.
And essentially, you've got the HTML boilerplate.
So with the character, said the title, the link to the style sheet, which is in the CSC folder and
the same 10 doc start here project folder.
And then in the body, we've got a number of sections that will eventually become the sections in a
one page website.
And I've commented out areas where we're going to be interacting with, for example, where we're going
to place the nav bar.
Now I want you to go into your code play and you select all of this code that we created earlier on
in order to have this nav bar using bootstrap.
And I want you to paste it just below this comment where it says this is the nav bar section.
So just in here now, if you keep scrolling, you'll see that there's many sections, and all I've done
is to create the Skeleton HD html.
So some of the content for our website, for example, some text buttons, web buttons should be.
I've incorporated some images and our job in this module is to style this web site using bootstrap so
that it begins looking like the way that we want it to.
And because we've studied our HTML in the previous modules, I don't want us to have to spend a lot
of time creating these each one or two or three.
I'm confident that by getting to this point, you already know how to create images or how to create
H2S, and we're going to save you a lot of typing by using skeleton projects.
From now on, now, if you don't want to use this and you'd prefer to create your own from scratch,
then you can always open up the indexed HTML inside your browser and you can look at what we've added
here.
All of the text and images and you can create the HTML for yourself, but I strongly recommend you to
use the skeleton project because that will allow us to focus on one new thing every module, and it
would markedly accelerate your speed of learning.
So now that we've added all navigation bar into our code.
Now the next step is for you to add bootstrap into our project because as you can see right now, even
though we have that nav bar here, it's not really doing anything right.
This is just plain old HTML, and it's because our CSV file that we've linked to is completely devoid
of any code.
I've only just included a blank file and named it and linked it up, but it doesn't do any styling yet.
Now I want you as a challenge to add bootstrap into your project, so pause the video now and give that
a go.
Now, how did that go?
Let's go through it step by step and see if we can make it work.
So we'll head to the bootstrap documentation and we'll go to get started.
And you can see that this quick stop right where we can just simply copy and paste the stylesheet link
into our web site so we can put that just above our own style sheet and hit save.
And let's refresh our page.
And you can see that we've now got all of our wonderful bootstrap styling on each one have been styled
into a SANZAR.
Fans on NAV Bar is looking exactly the way that we saw it over here, and when we shrink it down, it
becomes a button.
Instead of all of these links, download buttons look different and everything is now styled using bootstrap.
Now there's a lot more work to be done, but that's for the lessons yet to come.
Now, for the keen eyed amongst you, you might have noticed that something is still not quite right
with our project, even though we've enabled Bootstrap.
And the problem manifests itself when you go down to a tablet or a mobile sized screen.
Now we do have this button that appears, but if you click on it, you'll notice that absolutely nothing
happens.
Now, if we go back to our code play, you'll see that we have the same code for our navigation bar.
But here, if I toggle this, it works perfectly.
So why is that?
Well, the reason is because in order for the bootstrap collapsible menu to work, you actually need
some JavaScript.
And in our case, we actually don't have any of that, and we only have our XSS file from bootstrap.
So we can do to make it work is to scroll down on the bootstrap page and we can copy these JavaScript
to add to our project.
So let's go ahead and add that just below access file.
Now in the coming lessons, when we talk about JavaScript and jQuery, we'll dig into these script tags
and the optimal ways of running JavaScript to our web site in a little bit more detail.
But for now, we're just going to leave off script tags here, and if we hit save and go back to our
website and refresh it, you'll see that now are collapsible menu works.
And if you remember, the reason is because JavaScript is responsible for any behavior or anything that
your website can do, and the CSF is only for the style or the appearance of the website.
So this is why we need those few extra lines of code in order to make our web site do something, even
though it's very simple.
Now, in the next lesson, we're going to learn more about the bootstrap grid system, and we're going
to start styling up our web site using some of these bootstrap components and layout tools.
So for all of that and more, I'll see you on the next lesson.