Original subtitles

0 Now, we're steadily getting closer to our final design for our front page header. 1

But one of the things that you notice is that our download buttons still look extraordinarily out of 2

place. 3

They don't look like they've been styled at all, even though they are using Bootstrap. 4

So, in this lesson, I want to talk about another Bootstrap component which is the Bootstrap button. 5

Now, if you head over to the documentation for the Bootstrap buttons, 6

so just go to Documentation, Components, Buttons, then you can see that there's a whole bunch of buttons 7

that we can choose from, 8

and they come with the Bootstrap palette, which allows you to simply use one of these classes, for example, 9

btn-primary for a blue button and btn-warning for a yellow button, etc.. 10

Now there's also other types of buttons. 11

For example, you can have outline buttons, which become filled in as you hover over them, which looks pretty 12

nice. 13

Now, you can also have larger or smaller buttons, or buttons that take up the entire width of the parent. 14

Now, because we've seen this before and we played around with this in a previous lesson, I want you, as 15

a challenge, to add a dark and light button to style our download buttons here, and it should look somewhat 16

like this as the final outcome. 17

So these are large buttons, and the left one is dark and the right one is a outlined light button. 18

So, pause the video and see if you can complete that challenge with the help of the Bootstrap documentation. 19

All right. So how did that go? 20

All right. 21

So let's head into Atom and let's find the relevant section first. 22

So here is our title section with our little comment here, 23

and we've got our two download buttons. Now, 24

they are button elements of type button, 25

so all we need to do here in order to implement the Bootstrap styles is just to add a class. 26

So, after the type, I'm going to add a class, and the first one to make it into a Bootstrap button is 27

btn. 28

And the next one specifies what type of button I want. 29

So, the left one I wanted a dark button, and that's filled in already. 30

So I will go for the button, button dark, 31

so btn-dark. 32

So let's hit save and let's check to see if we got what we wanted, which looks pretty close, 33

right? 34

And then the next one we wanted was a light outlined button for the one on the right. 35

So let's scroll down to the outline buttons, and let's find that light one which is almost imperceptible, 36

because the background is white, but we can see it when we hover over it. 37

So this is the one that we're looking for, and this requires the class btn-outline-light, which is 38

a little bit longer. 39

So let’s head over here and again add another class, and this one is btn btn-outline-light, 40

hit save and refresh, and we've now got our button styles down. 41

Now, you notice that we specified that we wanted the larger buttons here. 42

So let's head into Bootstrap again and look at the Sizes section of the button component, and you can 43

see that, just by simply adding a class called btn-lg or btn-sm, we can change 44

the size of our buttons without touching the CSS. 45

So, let's go and add yet another class to our button, which is btn-lg or lg, 46

both of them, let's hit save, head back and refresh. 47

And now we've got some lovely Bootstrap buttons, making our web site look a lot nicer than before. 48

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

have over here are these pretty little glyphs or icons on the left of our download buttons. 50

Now these things come from a web site called Font 51

Awesome. 52

And it is really really awesome. 53

And the reason is because they have over 900 icons which are free for commercial use and they have a 54

really really generous license, which means that the icons are open source and completely free for use 55

in any of your web sites. 56

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

Google Play icon. 58

So let's search for Apple, and the first one that comes up is the one that we want. 59

You can see that this is the full vector that they've drawn. 60

And you can see it in the various different sizes, or how it looks with different backgrounds, 61

and they've even styled it and put it into, you know, some common usage scenarios, so that you can imagine 62

what it might look like. 63

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

it’s implementing these glyphs by adding a couple of classes. 65

So, firstly, you’ve got the Font Awesome button, fab, and then you’ve got fa-apple, which specifies 66

exactly which glyph, or which icon, you're looking to insert. 67

Now, before we can use this, however, similar to Bootstrap, we need to add Font Awesome to our web site. 68

So let's head over to get started. 69

And the first thing you see is Use Font 70

Awesome Free CDN, 71

so, similar to what we had with Bootstrap, Font 72

Awesome has a CDN that distributes the resource, 73

so the Font Awesome icons, and allows you to embed this into your web site, so that any users who don't 74

have, who've never opened a web site that required Font Awesome, they'd be able to go here and download 75

it. 76

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

I'm going to paste this in. And this is probably a good time to start commenting on what some of these 78

things are. 79

And, as you find your code getting more lengthy and more complex, it's a good idea to start commenting 80

on things, so that you remember later on when you come back what everything is all about. 81

So, the first one we've it are Google Fonts. 82

So, the way that I prefer to do it is just to type out plain text highlight it and then hit command or 83

hold down control in Windows and hit forward slash, 84

and that basically comments that particular line of text. 85

So those are the Google fonts and these are the CSS stylesheets. 86

And then we've got our Font 87

Awesome. 88

And finally we have our Bootstrap Scripts, put that in as well. 89

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

idea to sprinkle these around in your code so that it's really clear to yourself or anybody else who 91

looks at your code what everything is all about. 92

And also, as you're doing the tutorials, and, you know, you're learning about these different components, 93

or how you use selectors in CSS, etc., all these new concepts, once you understood what they're all 94

about, you can add a comment to remind yourself in case you come back to it at a later date. 95

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

this line of code, and we can now insert it wherever we want to use it, because we now have that CDN where 97

we can download and derive any icons that we want to use. 98

So let's go back to our download button, and, just in the text section, 99

so between the button elements, I'm going to insert this icon, and then I'm going to insert a space 100

in between. 101

Now, you'll notice that, by default, Font 102

Awesome likes to use the i tag. 103

So this is the italic tag, which is not that great in terms of HTML best practice, but the reason that 104

they can use it is because glyphs and icons are not italicized, so it doesn't become slanted. 105

And they say that they use it just because the i tag is pretty much the shortest tag that can be used 106

for this purpose. 107

So you can use what they recommend, which is the i tag, or if you prefer to have a more semantically understandable 108

HTML code, then you can change that into a span as well. 109

And you'll see either the i or the span when people are using Font Awesome out in the wild. 110

So I'm just going to leave it as it is, because it is short and it is quite easy to spot. 111

Now let's hit save and see what this looks like. 112

So let's hit refresh and you can see we've now got a little Apple icon, a space, 113

and then our download text. 114

So, as a challenge, I want you to go into Font Awesome and find the Google Play icon, and implement that 115

in your code so that you have the second button that looks a bit like this. 116

So pause the video and complete the challenge. 117

All right. 118

So that shouldn’t be very hard. 119

We just had to go back to the Font Awesome page and search for Google Play. 120

And now we've got our icons showing up, and this is exactly what we want, and we can just copy this line 121

of code and paste it where we pasted our last icon, which is just before the download button. 122

And then we hit space. 123

Now make sure that you're not pasting it into the actual button element, because it's actually a separate 124

piece of text that belongs between the element tags. 125

So now let's hit save and let's go back and refresh. 126

We've now got an Apple download icon and a Google Play download icon. 127

So it's looking pretty good so far. 128

Now, in the next lesson, I want to finish styling up the title section of our web site, so that it looks 129

more like this. 130

Now if you want to give it a go 131

before we start. 132

Now if you want to give it a go before I start walking you through the step by step, 133

then you can just simply pause this video right now and look at the design that I've got onscreen, and 134

try to use a combination of documentation, 135

so CSS documentation along with Bootstrap documentation, and maybe sometimes you might need to search 136

for something on Stack Overflow, especially how you might get this image to rotate. 137

So there's quite a bit of styling involved and this is completely optional. 138

But I do recommend giving it a go yourself before watching me go through the solution, just so that you 139

start thinking and challenging yourself on how you might do this yourself. 140

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

this challenge. 142

Otherwise I will see you on the next lesson.