Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,870 --> 00:00:06,270
Now, we're steadily getting closer to our final design for our front page header.
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
3
00:00:12,840 --> 00:00:13,510
place.
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.
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.
6
00:00:24,730 --> 00:00:28,700
Now, if you head over to the documentation for the Bootstrap buttons,
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
8
00:00:34,650 --> 00:00:36,080
that we can choose from,
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,
10
00:00:42,690 --> 00:00:50,150
btn-primary for a blue button and btn-warning for a yellow button, etc..
11
00:00:50,400 --> 00:00:53,250
Now there's also other types of buttons.
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
13
00:01:00,300 --> 00:01:01,160
nice.
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.
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
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
17
00:01:23,310 --> 00:01:26,210
like this as the final outcome.
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.
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.
20
00:01:43,110 --> 00:01:45,350
All right. So how did that go?
21
00:01:45,630 --> 00:01:45,890
All right.
22
00:01:45,900 --> 00:01:51,050
So let's head into Atom and let's find the relevant section first.
23
00:01:51,210 --> 00:01:55,620
So here is our title section with our little comment here,
24
00:01:55,950 --> 00:01:59,850
and we've got our two download buttons. Now,
25
00:01:59,850 --> 00:02:03,220
they are button elements of type button,
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.
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
28
00:02:17,610 --> 00:02:18,610
btn.
29
00:02:18,850 --> 00:02:21,970
And the next one specifies what type of button I want.
30
00:02:22,020 --> 00:02:27,500
So, the left one I wanted a dark button, and that's filled in already.
31
00:02:27,690 --> 00:02:31,290
So I will go for the button, button dark,
32
00:02:31,320 --> 00:02:33,610
so btn-dark.
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,
34
00:02:40,650 --> 00:02:41,240
right?
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.
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,
37
00:02:53,310 --> 00:02:57,210
because the background is white, but we can see it when we hover over it.
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
39
00:03:03,750 --> 00:03:05,150
a little bit longer.
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,
41
00:03:12,810 --> 00:03:20,010
hit save and refresh, and we've now got our button styles down.
42
00:03:20,010 --> 00:03:24,730
Now, you notice that we specified that we wanted the larger buttons here.
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
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
45
00:03:36,990 --> 00:03:40,930
the size of our buttons without touching the CSS.
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,
47
00:03:48,840 --> 00:03:54,500
both of them, let's hit save, head back and refresh.
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.
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
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.
51
00:04:14,020 --> 00:04:18,010
Now these things come from a web site called Font
52
00:04:18,060 --> 00:04:18,760
Awesome.
53
00:04:19,080 --> 00:04:21,580
And it is really really awesome.
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
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
56
00:04:37,110 --> 00:04:39,000
in any of your web sites.
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
58
00:04:46,320 --> 00:04:47,860
Google Play icon.
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.
60
00:04:53,790 --> 00:04:56,760
You can see that this is the full vector that they've drawn.
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,
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
63
00:05:09,180 --> 00:05:10,360
what it might look like.
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,
65
00:05:17,560 --> 00:05:22,500
it’s implementing these glyphs by adding a couple of classes.
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
67
00:05:29,970 --> 00:05:35,160
exactly which glyph, or which icon, you're looking to insert.
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.
69
00:05:43,530 --> 00:05:46,140
So let's head over to get started.
70
00:05:46,290 --> 00:05:49,510
And the first thing you see is Use Font
71
00:05:49,510 --> 00:05:51,630
Awesome Free CDN,
72
00:05:51,690 --> 00:05:54,940
so, similar to what we had with Bootstrap, Font
73
00:05:54,930 --> 00:05:59,480
Awesome has a CDN that distributes the resource,
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
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
76
00:06:13,020 --> 00:06:13,320
it.
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.
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
79
00:06:28,830 --> 00:06:29,720
things are.
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
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.
82
00:06:41,280 --> 00:06:44,220
So, the first one we've it are Google Fonts.
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
84
00:06:50,560 --> 00:06:53,570
hold down control in Windows and hit forward slash,
85
00:06:53,770 --> 00:06:57,860
and that basically comments that particular line of text.
86
00:06:57,880 --> 00:07:04,000
So those are the Google fonts and these are the CSS stylesheets.
87
00:07:04,480 --> 00:07:07,280
And then we've got our Font
88
00:07:07,300 --> 00:07:08,330
Awesome.
89
00:07:08,560 --> 00:07:15,170
And finally we have our Bootstrap Scripts, put that in as well.
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
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
92
00:07:27,340 --> 00:07:29,640
looks at your code what everything is all about.
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,
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
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.
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
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
98
00:08:03,310 --> 00:08:06,910
we can download and derive any icons that we want to use.
99
00:08:06,910 --> 00:08:11,850
So let's go back to our download button, and, just in the text section,
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
101
00:08:18,700 --> 00:08:19,780
in between.
102
00:08:19,780 --> 00:08:22,410
Now, you'll notice that, by default, Font
103
00:08:22,420 --> 00:08:24,720
Awesome likes to use the i tag.
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
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.
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
107
00:08:47,650 --> 00:08:48,810
for this purpose.
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
109
00:08:56,800 --> 00:09:00,420
HTML code, then you can change that into a span as well.
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.
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.
112
00:09:11,980 --> 00:09:14,930
Now let's hit save and see what this looks like.
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,
114
00:09:19,960 --> 00:09:22,310
and then our download text.
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
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.
117
00:09:33,970 --> 00:09:37,160
So pause the video and complete the challenge.
118
00:09:39,160 --> 00:09:39,530
All right.
119
00:09:39,540 --> 00:09:41,300
So that shouldn’t be very hard.
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.
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
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.
123
00:10:00,620 --> 00:10:02,430
And then we hit space.
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
125
00:10:08,060 --> 00:10:11,940
piece of text that belongs between the element tags.
126
00:10:12,140 --> 00:10:15,990
So now let's hit save and let's go back and refresh.
127
00:10:16,160 --> 00:10:20,370
We've now got an Apple download icon and a Google Play download icon.
128
00:10:20,570 --> 00:10:23,970
So it's looking pretty good so far.
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
130
00:10:31,220 --> 00:10:33,020
more like this.
131
00:10:33,020 --> 00:10:34,910
Now if you want to give it a go
132
00:10:34,910 --> 00:10:36,330
before we start.
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,
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
135
00:10:48,950 --> 00:10:52,660
try to use a combination of documentation,
136
00:10:52,790 --> 00:10:59,060
so CSS documentation along with Bootstrap documentation, and maybe sometimes you might need to search
137
00:10:59,060 --> 00:11:05,070
for something on Stack Overflow, especially how you might get this image to rotate.
138
00:11:05,180 --> 00:11:09,040
So there's quite a bit of styling involved and this is completely optional.
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
140
00:11:14,600 --> 00:11:19,150
start thinking and challenging yourself on how you might do this yourself.
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
142
00:11:25,400 --> 00:11:26,250
this challenge.
143
00:11:26,270 --> 00:11:28,860
Otherwise I will see you on the next lesson.
14698
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.