0
1
00:00:00,870 --> 00:00:06,270
Now, we're steadily getting closer to our final design for our front page header.
1

2
00:00:06,600 --> 00:00:12,840
But one of the things that you notice is that our download buttons still look extraordinarily out of
2

3
00:00:12,840 --> 00:00:13,510
place.
3

4
00:00:13,560 --> 00:00:18,680
They don't look like they've been styled at all, even though they are using Bootstrap.
4

5
00:00:18,720 --> 00:00:24,680
So, in this lesson, I want to talk about another Bootstrap component which is the Bootstrap button.
5

6
00:00:24,730 --> 00:00:28,700
Now, if you head over to the documentation for the Bootstrap buttons,
6

7
00:00:28,830 --> 00:00:34,650
so just go to Documentation, Components, Buttons, then you can see that there's a whole bunch of buttons
7

8
00:00:34,650 --> 00:00:36,080
that we can choose from,
8

9
00:00:36,330 --> 00:00:42,680
and they come with the Bootstrap palette, which allows you to simply use one of these classes, for example,
9

10
00:00:42,690 --> 00:00:50,150
btn-primary for a blue button and btn-warning for a yellow button, etc..
10

11
00:00:50,400 --> 00:00:53,250
Now there's also other types of buttons.
11

12
00:00:53,280 --> 00:01:00,300
For example, you can have outline buttons, which become filled in as you hover over them, which looks pretty
12

13
00:01:00,300 --> 00:01:01,160
nice.
13

14
00:01:01,170 --> 00:01:08,050
Now, you can also have larger or smaller buttons, or buttons that take up the entire width of the parent.
14

15
00:01:08,070 --> 00:01:13,980
Now, because we've seen this before and we played around with this in a previous lesson, I want you, as
15

16
00:01:13,980 --> 00:01:23,310
a challenge, to add a dark and light button to style our download buttons here, and it should look somewhat
16

17
00:01:23,310 --> 00:01:26,210
like this as the final outcome.
17

18
00:01:26,220 --> 00:01:34,140
So these are large buttons, and the left one is dark and the right one is a outlined light button.
18

19
00:01:34,140 --> 00:01:40,600
So, pause the video and see if you can complete that challenge with the help of the Bootstrap documentation.
19

20
00:01:43,110 --> 00:01:45,350
All right. So how did that go?
20

21
00:01:45,630 --> 00:01:45,890
All right.
21

22
00:01:45,900 --> 00:01:51,050
So let's head into Atom and let's find the relevant section first.
22

23
00:01:51,210 --> 00:01:55,620
So here is our title section with our little comment here,
23

24
00:01:55,950 --> 00:01:59,850
and we've got our two download buttons. Now,
24

25
00:01:59,850 --> 00:02:03,220
they are button elements of type button,
25

26
00:02:03,300 --> 00:02:09,750
so all we need to do here in order to implement the Bootstrap styles is just to add a class.
26

27
00:02:09,810 --> 00:02:17,430
So, after the type, I'm going to add a class, and the first one to make it into a Bootstrap button is
27

28
00:02:17,610 --> 00:02:18,610
btn.
28

29
00:02:18,850 --> 00:02:21,970
And the next one specifies what type of button I want.
29

30
00:02:22,020 --> 00:02:27,500
So, the left one I wanted a dark button, and that's filled in already.
30

31
00:02:27,690 --> 00:02:31,290
So I will go for the button, button dark,
31

32
00:02:31,320 --> 00:02:33,610
so btn-dark.
32

33
00:02:33,720 --> 00:02:40,610
So let's hit save and let's check to see if we got what we wanted, which looks pretty close,
33

34
00:02:40,650 --> 00:02:41,240
right?
34

35
00:02:41,550 --> 00:02:46,860
And then the next one we wanted was a light outlined button for the one on the right.
35

36
00:02:46,860 --> 00:02:53,310
So let's scroll down to the outline buttons, and let's find that light one which is almost imperceptible,
36

37
00:02:53,310 --> 00:02:57,210
because the background is white, but we can see it when we hover over it.
37

38
00:02:57,420 --> 00:03:03,750
So this is the one that we're looking for, and this requires the class btn-outline-light, which is
38

39
00:03:03,750 --> 00:03:05,150
a little bit longer.
39

40
00:03:05,190 --> 00:03:12,420
So let’s head over here and again add another class, and this one is btn btn-outline-light,
40

41
00:03:12,810 --> 00:03:20,010
hit save and refresh, and we've now got our button styles down.
41

42
00:03:20,010 --> 00:03:24,730
Now, you notice that we specified that we wanted the larger buttons here.
42

43
00:03:24,930 --> 00:03:30,990
So let's head into Bootstrap again and look at the Sizes section of the button component, and you can
43

44
00:03:30,990 --> 00:03:36,990
see that, just by simply adding a class called btn-lg or btn-sm, we can change
44

45
00:03:36,990 --> 00:03:40,930
the size of our buttons without touching the CSS.
45

46
00:03:40,950 --> 00:03:48,820
So, let's go and add yet another class to our button, which is btn-lg or lg,
46

47
00:03:48,840 --> 00:03:54,500
both of them, let's hit save, head back and refresh.
47

48
00:03:54,580 --> 00:04:01,170
And now we've got some lovely Bootstrap buttons, making our web site look a lot nicer than before.
48

49
00:04:01,170 --> 00:04:06,240
Now one thing you might notice that I've got here in our final version of the web site that we don't yet
49

50
00:04:06,240 --> 00:04:14,010
have over here are these pretty little glyphs or icons on the left of our download buttons.
50

51
00:04:14,020 --> 00:04:18,010
Now these things come from a web site called Font
51

52
00:04:18,060 --> 00:04:18,760
Awesome.
52

53
00:04:19,080 --> 00:04:21,580
And it is really really awesome.
53

54
00:04:21,600 --> 00:04:29,610
And the reason is because they have over 900 icons which are free for commercial use and they have a
54

55
00:04:29,610 --> 00:04:37,080
really really generous license, which means that the icons are open source and completely free for use
55

56
00:04:37,110 --> 00:04:39,000
in any of your web sites.
56

57
00:04:39,030 --> 00:04:46,320
So head over here, and we're going to go over to the icon section in order to try and find our Apple and
57

58
00:04:46,320 --> 00:04:47,860
Google Play icon.
58

59
00:04:47,880 --> 00:04:53,790
So let's search for Apple, and the first one that comes up is the one that we want.
59

60
00:04:53,790 --> 00:04:56,760
You can see that this is the full vector that they've drawn.
60

61
00:04:57,060 --> 00:05:02,650
And you can see it in the various different sizes, or how it looks with different backgrounds,
61

62
00:05:02,790 --> 00:05:08,880
and they've even styled it and put it into, you know, some common usage scenarios, so that you can imagine
62

63
00:05:09,180 --> 00:05:10,360
what it might look like.
63

64
00:05:10,620 --> 00:05:17,480
So, in order to use it, all we need to do is just to copy this line, and you can see that, similar to Bootstrap,
64

65
00:05:17,560 --> 00:05:22,500
it’s implementing these glyphs by adding a couple of classes.
65

66
00:05:22,500 --> 00:05:29,580
So, firstly, you’ve got the Font Awesome button, fab, and then you’ve got fa-apple, which specifies
66

67
00:05:29,970 --> 00:05:35,160
exactly which glyph, or which icon, you're looking to insert.
67

68
00:05:35,190 --> 00:05:43,410
Now, before we can use this, however, similar to Bootstrap, we need to add Font Awesome to our web site.
68

69
00:05:43,530 --> 00:05:46,140
So let's head over to get started.
69

70
00:05:46,290 --> 00:05:49,510
And the first thing you see is Use Font
70

71
00:05:49,510 --> 00:05:51,630
Awesome Free CDN,
71

72
00:05:51,690 --> 00:05:54,940
so, similar to what we had with Bootstrap, Font
72

73
00:05:54,930 --> 00:05:59,480
Awesome has a CDN that distributes the resource,
73

74
00:05:59,550 --> 00:06:07,260
so the Font Awesome icons, and allows you to embed this into your web site, so that any users who don't
74

75
00:06:07,260 --> 00:06:13,020
have, who've never opened a web site that required Font Awesome, they'd be able to go here and download
75

76
00:06:13,020 --> 00:06:13,320
it.
76

77
00:06:13,440 --> 00:06:22,520
So let's go ahead and copy this and insert it into our web site, so just below where we've got our CSS.
77

78
00:06:22,560 --> 00:06:28,830
I'm going to paste this in. And this is probably a good time to start commenting on what some of these
78

79
00:06:28,830 --> 00:06:29,720
things are.
79

80
00:06:30,000 --> 00:06:36,270
And, as you find your code getting more lengthy and more complex, it's a good idea to start commenting
80

81
00:06:36,270 --> 00:06:41,070
on things, so that you remember later on when you come back what everything is all about.
81

82
00:06:41,280 --> 00:06:44,220
So, the first one we've it are Google Fonts.
82

83
00:06:44,440 --> 00:06:50,530
So, the way that I prefer to do it is just to type out plain text highlight it and then hit command or
83

84
00:06:50,560 --> 00:06:53,570
hold down control in Windows and hit forward slash,
84

85
00:06:53,770 --> 00:06:57,860
and that basically comments that particular line of text.
85

86
00:06:57,880 --> 00:07:04,000
So those are the Google fonts and these are the CSS stylesheets.
86

87
00:07:04,480 --> 00:07:07,280
And then we've got our Font
87

88
00:07:07,300 --> 00:07:08,330
Awesome.
88

89
00:07:08,560 --> 00:07:15,170
And finally we have our Bootstrap Scripts, put that in as well.
89

90
00:07:15,190 --> 00:07:21,670
So now, when we come back to this, we can see easily at a glance what we've got over here, and it's a good
90

91
00:07:21,670 --> 00:07:27,340
idea to sprinkle these around in your code so that it's really clear to yourself or anybody else who
91

92
00:07:27,340 --> 00:07:29,640
looks at your code what everything is all about.
92

93
00:07:29,680 --> 00:07:34,960
And also, as you're doing the tutorials, and, you know, you're learning about these different components,
93

94
00:07:34,990 --> 00:07:41,740
or how you use selectors in CSS, etc., all these new concepts, once you understood what they're all
94

95
00:07:41,740 --> 00:07:46,700
about, you can add a comment to remind yourself in case you come back to it at a later date.
95

96
00:07:47,050 --> 00:07:56,290
So let's save and let's go ahead and go back to that icon that we found, which was Apple, and let's copy
96

97
00:07:56,290 --> 00:08:03,310
this line of code, and we can now insert it wherever we want to use it, because we now have that CDN where
97

98
00:08:03,310 --> 00:08:06,910
we can download and derive any icons that we want to use.
98

99
00:08:06,910 --> 00:08:11,850
So let's go back to our download button, and, just in the text section,
99

100
00:08:11,860 --> 00:08:18,550
so between the button elements, I'm going to insert this icon, and then I'm going to insert a space
100

101
00:08:18,700 --> 00:08:19,780
in between.
101

102
00:08:19,780 --> 00:08:22,410
Now, you'll notice that, by default, Font
102

103
00:08:22,420 --> 00:08:24,720
Awesome likes to use the i tag.
103

104
00:08:24,820 --> 00:08:34,240
So this is the italic tag, which is not that great in terms of HTML best practice, but the reason that
104

105
00:08:34,240 --> 00:08:40,530
they can use it is because glyphs and icons are not italicized, so it doesn't become slanted.
105

106
00:08:40,690 --> 00:08:47,590
And they say that they use it just because the i tag is pretty much the shortest tag that can be used
106

107
00:08:47,650 --> 00:08:48,810
for this purpose.
107

108
00:08:48,850 --> 00:08:56,500
So you can use what they recommend, which is the i tag, or if you prefer to have a more semantically understandable
108

109
00:08:56,800 --> 00:09:00,420
HTML code, then you can change that into a span as well.
109

110
00:09:00,460 --> 00:09:06,450
And you'll see either the i or the span when people are using Font Awesome out in the wild.
110

111
00:09:06,490 --> 00:09:11,800
So I'm just going to leave it as it is, because it is short and it is quite easy to spot.
111

112
00:09:11,980 --> 00:09:14,930
Now let's hit save and see what this looks like.
112

113
00:09:15,160 --> 00:09:19,810
So let's hit refresh and you can see we've now got a little Apple icon, a space,
113

114
00:09:19,960 --> 00:09:22,310
and then our download text.
114

115
00:09:22,330 --> 00:09:29,800
So, as a challenge, I want you to go into Font Awesome and find the Google Play icon, and implement that
115

116
00:09:29,830 --> 00:09:33,860
in your code so that you have the second button that looks a bit like this.
116

117
00:09:33,970 --> 00:09:37,160
So pause the video and complete the challenge.
117

118
00:09:39,160 --> 00:09:39,530
All right.
118

119
00:09:39,540 --> 00:09:41,300
So that shouldn’t be very hard.
119

120
00:09:41,300 --> 00:09:46,450
We just had to go back to the Font Awesome page and search for Google Play.
120

121
00:09:46,880 --> 00:09:53,240
And now we've got our icons showing up, and this is exactly what we want, and we can just copy this line
121

122
00:09:53,240 --> 00:10:00,620
of code and paste it where we pasted our last icon, which is just before the download button.
122

123
00:10:00,620 --> 00:10:02,430
And then we hit space.
123

124
00:10:02,450 --> 00:10:08,060
Now make sure that you're not pasting it into the actual button element, because it's actually a separate
124

125
00:10:08,060 --> 00:10:11,940
piece of text that belongs between the element tags.
125

126
00:10:12,140 --> 00:10:15,990
So now let's hit save and let's go back and refresh.
126

127
00:10:16,160 --> 00:10:20,370
We've now got an Apple download icon and a Google Play download icon.
127

128
00:10:20,570 --> 00:10:23,970
So it's looking pretty good so far.
128

129
00:10:24,030 --> 00:10:31,130
Now, in the next lesson, I want to finish styling up the title section of our web site, so that it looks
129

130
00:10:31,220 --> 00:10:33,020
more like this.
130

131
00:10:33,020 --> 00:10:34,910
Now if you want to give it a go
131

132
00:10:34,910 --> 00:10:36,330
before we start.
132

133
00:10:36,530 --> 00:10:40,920
Now if you want to give it a go before I start walking you through the step by step,
133

134
00:10:41,000 --> 00:10:48,950
then you can just simply pause this video right now and look at the design that I've got onscreen, and
134

135
00:10:48,950 --> 00:10:52,660
try to use a combination of documentation,
135

136
00:10:52,790 --> 00:10:59,060
so CSS documentation along with Bootstrap documentation, and maybe sometimes you might need to search
136

137
00:10:59,060 --> 00:11:05,070
for something on Stack Overflow, especially how you might get this image to rotate.
137

138
00:11:05,180 --> 00:11:09,040
So there's quite a bit of styling involved and this is completely optional.
138

139
00:11:09,140 --> 00:11:14,600
But I do recommend giving it a go yourself before watching me go through the solution, just so that you
139

140
00:11:14,600 --> 00:11:19,150
start thinking and challenging yourself on how you might do this yourself.
140

141
00:11:19,160 --> 00:11:25,400
So, pause the video now, and make a copy of your project as it is now to mess around with and try to complete
141

142
00:11:25,400 --> 00:11:26,250
this challenge.
142

143
00:11:26,270 --> 00:11:28,860
Otherwise I will see you on the next lesson.