Original subtitles

Now, before we continue, we should really save all of this good work that we've done here in our Code

Ply.

We've set up our navigation bar so that when it's on smaller screens, like the phone or the iPad, the

links disappear into a button which can toggle our collapsable menu.

So we don't want to lose all of this good work that we've done. Now in the previous lesson,

you should have downloaded a file called Bootstrap, inside which we have this folder called TinDog 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.css, 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 index.html, and

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 set, the title, the link to the stylesheet, which is in the CSS folder in the same

TinDog Start Here project folder, and then in the body we've got a number of sections that will eventually become

the sections in our one page web site.

And I've commented out areas where we're going to be interacting with, for example, where we're going

to place the navbar.

Now I want you to go into your Code Ply and to select all of this code that we created earlier on in order

to have this navbar 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've lost your Code Ply area, or for some reason you can't find the code that you created here,

then I will provide a link to the Code Ply that I created that we followed along, so that you can open

it up in your browser and just simply copy this code into your new project file.

Now, if you keep scrolling, you'll see that there's many sections, and all I've done is to create the skeleton

HTML.

So some of the content for our web site, for example some text, some buttons where 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 h1s or h2s or h3s.

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 prefer to create your own from scratch, then you can always

open up the index.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 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 our 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 CSS 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 there's Quick start, 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 stylesheet and hit save.

And let's refresh our page and you can see that we've now got all of our wonderful Bootstrap styling,

our h1s have been styled into a Sans-serif font, our 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. Our 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 Ply, 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 collapsable menu to work, you actually need some

Javascript and jQuery.

And, in our case, we actually don't have any of that,

and we only have our CSS file from Bootstrap.

So, what you can do to make it work is to scroll down on the Bootstrap page, and we can copy these three

lines of Javascript

and also jQuery to add to our project.

So let's go ahead and add that just below our CSS 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 adding Javascript to our web site in a little bit more detail.

But for now, we're just going to leave our script tags here, and if we hit save and go back to our web

site and refresh it, you'll see that now our collapsable menu works.

And if you remember, the reason is because Javascript is responsible for any behavior, or anything that

your web site can do,

and the CSS is only for the style, or the appearance, of the web site.

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.