0
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
1

2
00:00:06,030 --> 00:00:06,800
Ply.
2

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
3

4
00:00:13,180 --> 00:00:18,860
links disappear into a button which can toggle our collapsable menu.
4

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,
5

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.
6

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
7

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 
8

9
00:00:45,730 --> 00:00:46,560
skeleton.
9

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
10

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
11

12
00:00:58,150 --> 00:01:00,590
I want you to open it inside Atom.
12

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
13

14
00:01:06,730 --> 00:01:08,200
we've placed in here.
14

15
00:01:08,470 --> 00:01:11,580
And essentially you've got the html boilerplate,
15

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
16

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
17

18
00:01:26,320 --> 00:01:28,340
the sections in our one page web site.
18

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
19

20
00:01:34,030 --> 00:01:35,980
to place the navbar.
20

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
21

22
00:01:43,120 --> 00:01:46,420
to have this navbar using Bootstrap.
22

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,
23

24
00:01:51,640 --> 00:01:54,040
so just in here.
24

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,
25

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
26

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.
27

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
28

29
00:02:22,080 --> 00:02:23,140
HTML.
29

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,
30

31
00:02:29,670 --> 00:02:31,640
I've incorporated some images,
31

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
32

33
00:02:40,060 --> 00:02:41,680
the way that we want it to.
33

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
34

35
00:02:48,190 --> 00:02:51,840
lot of time creating these h1s or h2s or h3s.
35

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.
36

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.
37

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
38

39
00:03:14,830 --> 00:03:17,400
open up the index.html
39

40
00:03:17,620 --> 00:03:22,580
inside your browser and you can look at what we've added here,
40

41
00:03:22,720 --> 00:03:27,600
all of the text and images, and you can create the HTML yourself.
41

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
42

43
00:03:33,730 --> 00:03:37,500
new thing every module, and it would markedly accelerate your speed of learning.
43

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
44

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
45

46
00:03:52,090 --> 00:03:53,250
doing anything, right?
46

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
47

48
00:04:01,900 --> 00:04:02,960
of any code.
48

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.
49

50
00:04:10,210 --> 00:04:15,380
Now I want you, as a challenge, to add Bootstrap into your project.
50

51
00:04:15,460 --> 00:04:18,080
So pause the video now and give that a go.
51

52
00:04:20,500 --> 00:04:22,330
Now how did that go?
52

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.
53

54
00:04:26,890 --> 00:04:32,770
So we'll head to the Bootstrap documentation and we'll go to Get started.
54

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
55

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.
56

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,
57

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
58

59
00:05:00,370 --> 00:05:02,180
it over here,
59

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
60

61
00:05:10,480 --> 00:05:14,710
different, and everything is now styled using Bootstrap.
61

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.
62

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
63

64
00:05:25,750 --> 00:05:28,970
our project, even though we've enabled Bootstrap.
64

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.
65

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
66

67
00:05:45,790 --> 00:05:47,020
happens.
67

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,
68

69
00:05:54,130 --> 00:05:58,380
but here, if I toggle this, it works perfectly.
69

70
00:05:58,630 --> 00:06:01,350
So why is that?
70

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
71

72
00:06:09,880 --> 00:06:12,150
Javascript and jQuery.
72

73
00:06:12,550 --> 00:06:16,420
And, in our case, we actually don't have any of that,
73

74
00:06:16,510 --> 00:06:20,650
and we only have our CSS file from Bootstrap.
74

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
75

76
00:06:28,240 --> 00:06:30,100
lines of Javascript
76

77
00:06:30,250 --> 00:06:34,020
and also jQuery to add to our project.
77

78
00:06:34,030 --> 00:06:38,890
So let's go ahead and add that just below our CSS file.
78

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
79

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.
80

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
81

82
00:06:56,140 --> 00:07:02,200
site and refresh it, you'll see that now our collapsable menu works.
82

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
83

84
00:07:08,710 --> 00:07:10,670
your web site can do,
84

85
00:07:10,930 --> 00:07:16,360
and the CSS is only for the style, or the appearance, of the web site.
85

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
86

87
00:07:23,530 --> 00:07:25,340
though it's very simple.
87

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
88

89
00:07:31,690 --> 00:07:38,240
start styling up our web site using some of these Bootstrap components and layout tools.
89

90
00:07:38,260 --> 00:07:41,350
So for all of that and more, I’ll see you on the next lesson.