Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,550 --> 00:00:06,030
Now, before we continue, we should really save all of this good work that we've done here in our Code
2
00:00:06,030 --> 00:00:06,800
Ply.
3
00:00:06,910 --> 00:00:13,180
We've set up our navigation bar so that when it's on smaller screens, like the phone or the iPad, the
4
00:00:13,180 --> 00:00:18,860
links disappear into a button which can toggle our collapsable menu.
5
00:00:18,970 --> 00:00:23,430
So we don't want to lose all of this good work that we've done. Now in the previous lesson,
6
00:00:23,470 --> 00:00:31,050
you should have downloaded a file called Bootstrap, inside which we have this folder called TinDog Start Here.
7
00:00:31,090 --> 00:00:36,850
And this is a skeleton project that I've created for you so that you don't have to go through the
8
00:00:36,850 --> 00:00:45,730
tedious process of finding your own images, or creating the blank styles.css, or putting in the HTML
9
00:00:45,730 --> 00:00:46,560
skeleton.
10
00:00:46,600 --> 00:00:53,140
Now it's a good idea to have this file inside your development folder, wherever that may be, and once
11
00:00:53,140 --> 00:00:58,050
you've got it saved in there, then I want you to right click on index.html, and
12
00:00:58,150 --> 00:01:00,590
I want you to open it inside Atom.
13
00:01:00,640 --> 00:01:06,730
Now, once you've got this file open, it's a good idea to just take a quick look through it to see what
14
00:01:06,730 --> 00:01:08,200
we've placed in here.
15
00:01:08,470 --> 00:01:11,580
And essentially you've got the html boilerplate,
16
00:01:11,590 --> 00:01:19,720
so with the character set, the title, the link to the stylesheet, which is in the CSS folder in the same
17
00:01:19,720 --> 00:01:26,320
TinDog Start Here project folder, and then in the body we've got a number of sections that will eventually become
18
00:01:26,320 --> 00:01:28,340
the sections in our one page web site.
19
00:01:28,570 --> 00:01:34,030
And I've commented out areas where we're going to be interacting with, for example, where we're going
20
00:01:34,030 --> 00:01:35,980
to place the navbar.
21
00:01:36,010 --> 00:01:43,120
Now I want you to go into your Code Ply and to select all of this code that we created earlier on in order
22
00:01:43,120 --> 00:01:46,420
to have this navbar using Bootstrap.
23
00:01:46,420 --> 00:01:51,640
And I want you to paste it just below this comment where it says this is the nav bar section,
24
00:01:51,640 --> 00:01:54,040
so just in here.
25
00:01:54,160 --> 00:02:00,760
Now if you've lost your Code Ply area, or for some reason you can't find the code that you created here,
26
00:02:01,180 --> 00:02:07,210
then I will provide a link to the Code Ply that I created that we followed along, so that you can open
27
00:02:07,210 --> 00:02:14,770
it up in your browser and just simply copy this code into your new project file.
28
00:02:14,800 --> 00:02:22,000
Now, if you keep scrolling, you'll see that there's many sections, and all I've done is to create the skeleton
29
00:02:22,080 --> 00:02:23,140
HTML.
30
00:02:23,290 --> 00:02:29,670
So some of the content for our web site, for example some text, some buttons where buttons should be,
31
00:02:29,670 --> 00:02:31,640
I've incorporated some images,
32
00:02:31,810 --> 00:02:40,000
and our job in this module is to style this web site using Bootstrap so that it begins looking like
33
00:02:40,060 --> 00:02:41,680
the way that we want it to.
34
00:02:42,070 --> 00:02:48,190
And, because we've studied our HTML in the previous modules, I don't want us to have to spend a
35
00:02:48,190 --> 00:02:51,840
lot of time creating these h1s or h2s or h3s.
36
00:02:51,850 --> 00:02:58,730
I'm confident that, by getting to this point, you already know how to create images or how to create h2s.
37
00:02:58,810 --> 00:03:05,670
And we're going to save you a lot of typing by using skeleton projects from now on.
38
00:03:05,700 --> 00:03:14,740
Now, if you don't want to use this and you prefer to create your own from scratch, then you can always
39
00:03:14,830 --> 00:03:17,400
open up the index.html
40
00:03:17,620 --> 00:03:22,580
inside your browser and you can look at what we've added here,
41
00:03:22,720 --> 00:03:27,600
all of the text and images, and you can create the HTML yourself.
42
00:03:27,850 --> 00:03:33,730
But I strongly recommend you to use the skeleton project because that will allow us to focus on one
43
00:03:33,730 --> 00:03:37,500
new thing every module, and it would markedly accelerate your speed of learning.
44
00:03:37,510 --> 00:03:45,300
So now that we've added our navigation bar into our code, now the next step is for you to add Bootstrap
45
00:03:45,400 --> 00:03:51,850
into our project, because as you can see right now, even though we have that nav bar, here it's not really
46
00:03:52,090 --> 00:03:53,250
doing anything, right?
47
00:03:53,260 --> 00:04:01,900
This is just plain old HTML. And it's because our CSS file that we've linked to is completely devoid
48
00:04:01,900 --> 00:04:02,960
of any code.
49
00:04:02,980 --> 00:04:10,200
I've only just included a blank file and named it and linked it up, but it doesn't do any styling yet.
50
00:04:10,210 --> 00:04:15,380
Now I want you, as a challenge, to add Bootstrap into your project.
51
00:04:15,460 --> 00:04:18,080
So pause the video now and give that a go.
52
00:04:20,500 --> 00:04:22,330
Now how did that go?
53
00:04:22,480 --> 00:04:26,820
Let's go through it step by step and see if we can make it work.
54
00:04:26,890 --> 00:04:32,770
So we'll head to the Bootstrap documentation and we'll go to Get started.
55
00:04:33,130 --> 00:04:38,890
And you can see that there's Quick start, right, where we can just simply copy and paste the stylesheet
56
00:04:38,950 --> 00:04:46,980
link into our web site. So we can put that just above our own stylesheet and hit save.
57
00:04:47,210 --> 00:04:54,010
And let's refresh our page and you can see that we've now got all of our wonderful Bootstrap styling,
58
00:04:54,010 --> 00:05:00,370
our h1s have been styled into a Sans-serif font, our nav bar is looking exactly the way that we saw
59
00:05:00,370 --> 00:05:02,180
it over here,
60
00:05:02,740 --> 00:05:10,480
and, when we shrink it down, it becomes a button instead of all of these links. Our download buttons look
61
00:05:10,480 --> 00:05:14,710
different, and everything is now styled using Bootstrap.
62
00:05:14,710 --> 00:05:19,800
Now, there's a lot more work to be done, but that's for the lessons yet to come.
63
00:05:19,810 --> 00:05:25,750
Now for the keen eyed amongst you, you might have noticed that something is still not quite right with
64
00:05:25,750 --> 00:05:28,970
our project, even though we've enabled Bootstrap.
65
00:05:29,170 --> 00:05:38,140
And the problem manifests itself when you go down to a tablet or a mobile sized screen.
66
00:05:38,140 --> 00:05:45,790
Now we do have this button that appears, but, if you click on it, you'll notice that absolutely nothing
67
00:05:45,790 --> 00:05:47,020
happens.
68
00:05:47,020 --> 00:05:53,840
Now, if we go back to our Code Ply, you'll see that we have the same code for our navigation bar,
69
00:05:54,130 --> 00:05:58,380
but here, if I toggle this, it works perfectly.
70
00:05:58,630 --> 00:06:01,350
So why is that?
71
00:06:01,660 --> 00:06:09,820
Well, the reason is because, in order for the Bootstrap collapsable menu to work, you actually need some
72
00:06:09,880 --> 00:06:12,150
Javascript and jQuery.
73
00:06:12,550 --> 00:06:16,420
And, in our case, we actually don't have any of that,
74
00:06:16,510 --> 00:06:20,650
and we only have our CSS file from Bootstrap.
75
00:06:20,650 --> 00:06:28,240
So, what you can do to make it work is to scroll down on the Bootstrap page, and we can copy these three
76
00:06:28,240 --> 00:06:30,100
lines of Javascript
77
00:06:30,250 --> 00:06:34,020
and also jQuery to add to our project.
78
00:06:34,030 --> 00:06:38,890
So let's go ahead and add that just below our CSS file.
79
00:06:39,010 --> 00:06:44,740
Now, in the coming lessons, when we talk about Javascript and jQuery, we’ll dig into these script
80
00:06:44,770 --> 00:06:50,450
tags and the optimal ways of adding Javascript to our web site in a little bit more detail.
81
00:06:50,470 --> 00:06:56,140
But for now, we're just going to leave our script tags here, and if we hit save and go back to our web
82
00:06:56,140 --> 00:07:02,200
site and refresh it, you'll see that now our collapsable menu works.
83
00:07:02,290 --> 00:07:08,710
And if you remember, the reason is because Javascript is responsible for any behavior, or anything that
84
00:07:08,710 --> 00:07:10,670
your web site can do,
85
00:07:10,930 --> 00:07:16,360
and the CSS is only for the style, or the appearance, of the web site.
86
00:07:16,390 --> 00:07:23,530
So this is why we need those few extra lines of code in order to make our web site do something, even
87
00:07:23,530 --> 00:07:25,340
though it's very simple.
88
00:07:25,450 --> 00:07:31,690
Now, in the next lesson, we're going to learn more about the Bootstrap grid system, and we're going to
89
00:07:31,690 --> 00:07:38,240
start styling up our web site using some of these Bootstrap components and layout tools.
90
00:07:38,260 --> 00:07:41,350
So for all of that and more, I’ll see you on the next lesson.
9485
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.