Original subtitles

0 All right. 1

So in order to get to where we are right now we've learned about a number of Bootstrap components, 2

for example the navigation bar, the Bootstrap buttons, Bootstrap containers, grids, and the responsiveness 3

that we get using Bootstrap for layout purposes. 4

Now, before we carry on, I want to add some more CSS code, so normal bog old standard CSS, so that 5

we can customize all of our Bootstrap components and make our title page look a little bit more like 6

our design on Balsamiq. 7

So let's get started. 8

Now, the first thing that you may or may not have noticed, there are some different fonts going on here. 9

The nav bar uses the Bootstrap default font, as does the nav bar brand, as does the text in our buttons, 10

and also of course the rest of our unstyled web page. 11

Now, instead of going into the button, and going into the nav bar, and adding CSS to each of them, changing 12

the font, I want you to think if you can figure out a way of changing all of the text to the Montserrat 13

font that we got from Google fonts. 14

So pause the video and see if you can complete this mini challenge. 15

All righ. So, this shouldn't be too hard because we've done it before. 16

Now, what is the one thing that encompasses all of our content for our web site? 17

Well, it's the body element, because all the content is embedded inside it. And we can simply define a 18

global font for the body in order to apply it to all the text on screen. 19

So, I'm going to target the body element, and I'm going to change the font-family to Montserrat, and 20

I'm going to close it off with a semi-colon. 21

So let's hit save and let's go back and refresh. 22

You can see that all the text now has changed to our chosen font, which makes it look a little bit more 23

unified, and gets us closer to our final design. 24

So, the next thing I want to change is, I want this title text to have a white color, so that it matches 25

with the color palette that we've got going on here, which is this kind of red and white kind of scheme 26

for our imaginary TinDog product. 27

So, one way of doing this is going into the h1 that we've already selected here, and adding a color property 28

and setting it to white. 29

Now, the other way of doing this is adding it to the title section, which, if you remember, the h1 is residing 30

inside. 31

So, this line is inside our title section, and, by changing the color of all text in the title section, 32

if later on I decide to add a subtitle or, you know, a little bit of explainer text, or whatever it may 33

be, 34

it will still keep to our current color scheme. 35

So it's a little bit more encompassing, and that's what I'm going to do here. 36

I'm going to add our color property and I'm going to set it to white. 37

So, as a shorthand remember that the color hex codes for #fff is always going to be white, 38

and #000 is always going to be black, and you can see our Pigments add on showing you that. 39

So I want white. 40

Let's hit save and let's refresh. 41

You can see we've now got our white big title, which looks brilliant. 42

Now, don't worry, if you added your color to the h1, it's perfectly valid, and we can always refactor code 43

later on if we see we’are duplicating any part or, you know, if we want to make our code more succinct. 44

So that's completely acceptable and it's not wrong at all. 45

So, now that we've styled the text on our page, the next thing I want to look at is this nav bar, because 46

you can see that the text is a little bit too small and this brand should really be a little bit more 47

prominent. 48

And also I want to make it look a little bit more like the Tinder logo, because we are making a copycat 49

product here after all. 50

And the closest logo that I found on Google Fonts was the Ubuntu font, which we already incorporated when 51

we embedded our Google Fonts into our web site. 52

So let's go ahead and do that. Now, before I do that, 53

I want to add a new section, and I'm going to say Navigation Bar, and I'm going to use that good old trick 54

of highlighting it and command forward slash to style it. 55

I find this much easier than typing a bunch of asterisks and forward slashes. 56

Now here we're going to first target our nav brand, 57

so navbar-brand, and and I want to change the font-family to Ubuntu, so font-family, and that's 58

going to be Ubuntu. 59

Now let's hit save and refresh and you can see that that t looks a lot like the t for Tinder now, but 60

it's still too small, so let's increase the font size as well to 2.5rem, 61

and maybe while we're here we can make the font-weight to 62

bold as well. 63

Let’s save and refresh, and you can see that now we've got this big navbar-brand, which looks a lot better and it 64

makes us seem like we're more proud of what we're called, rather than as if we're trying to hide it with 65

our tiny text. 66

Now, with the bigger font size for the navbar-brand, you start to notice that it’s a little bit awkward 67

having it so close to our title text and image, 68

so ideally I would like to push down any content, and have a bit of padding at the bottom of our nav bar, 69

because it would make it look a lot nicer. 70

So, I don't really want to add any padding to the top or the left and right. 71

So, can you think of a way in which we can set the bottom padding to 4.5rem, without touching the padding 72

on any other side of the nav bar? 73

So, again, mini challenge, pause the video if you want to complete it. 74

All right. 75

So, I'm going to put this just above our navbar-brand, because it's more broad, and it targets the nav 76

bar instead of any component inside the nav bar, 77

so it's a higher level div, so I tend to add my selectors in that kind of order, going from less specific 78

to more specific as you scroll down, 79

and also I try to keep the CSS styling 80

roughly in the order that you see on the page. 81

So, the title section will go first, then the next section, then the next section. 82

It just makes it a little bit easier to change and to fix later on. 83

Now, in the nav bar we want to change the padding, and we only want to touch the padding bottom, and we want 84

to set it to 2.5, and we want to set it to 4.5rem, hit save and refresh. 85

And now we've got a little bit more space in between that nav bar and the title text and images, and 86

it makes the whole web site look a lot less bunched up and a lot more designed, if you will. 87

Now the next thing we should address in the nav bar are these nav items. 88

They need a bit more space between each other. 89

So I'm again going to add some padding. 90

I'll keep this as a fixed size just because we've got that responsiveness, 91

so I don't really need it as a percentage or as a rem. 92

So, I'm going to put in probably 18 pixels of padding left and right of each of these nav items. 93

So, we're going to go below the navbar-brand. We’re going to target nav-item, and we're going to say 94

padding 0 top and bottom, and then about 18 pixels left and right, hit save, refresh, bit more spaced 95

out, looks a lot nicer, 96

we won't accidentally press on the wrong button, but they still need to be a little bit larger. 97

So I'm going to dig even deeper inside the nav-item. 98

I'm going to target the actual nav-link to style it. 99

So we're going to target the nav-link. 100

So, in this case I'm going to change the font size, the font-family, as well as the colors, so that we get 101

a little bit more like this. 102

So a little bit larger, 103

and I'm also going to change the font-weight to the Montserrat-Light font 104

so it's not so prominent on the page. 105

So let's go ahead and do that. 106

Let's change the nav link’s font size, we can change it to maybe about 1.2rem. 107

You can’t see it's just a little bit bigger, but it's a little bit too heavy in terms of weight at the moment. 108

So let's change the font-family to Montserrat-Light, and this will thin those letters down and make 109

it less prominent and blend in a bit better. 110

Now let's take a look at how our nav bar looks by activating Pesticide. 111

And you can see that this is the entire section, 112

this blue section. And you can see that we've still got a bit of padding, 113

it seems, leftover from the top, the left and the right of our nav bar, 114

which is why that text is not aligning on the left with our title text here. 115

So that is just a little bit off. 116

And I suspect the reason is, if we inspect on this, is that the nav bar actually has some padding, in addition 117

to the padding bottom that we added. 118

So let's try and get rid of this padding which came from, probably, the Bootstrap element, and we can do 119

that by, instead of using padding bottom to add padding and then add zero to the top, zero to the left 120

and right and 4.5 rpm to the bottom only. 121

So now if we refresh. 122

You can see that our navbar-brand now aligns perfectly with our title text and our buttons. 123

And when you're designing web sites or apps or whatever it may be, try to minimize the number of lines 124

that you can align things to, because it will usually make your designs look more together. 125

So now I'm pretty happy with my nav bar. 126

So the next thing I'm going to deal with are these buttons. They’re far too close to this title text 127

and they need a little bit of a margin to push it away from that text. 128

So let's go into our CSS and add another section. Let’s call it Buttons, maybe more specifically the 129

Download Buttons. Let’s comment that out so that we have our new section. Now, in order to target the button, 130

I have a choice of either using the Bootstrap btn class, and customize the Bootstrap style, or I can 131

add in my custom class. 132

Now, in this situation, if you start getting lazy and using the existing classes from Bootstrap, you often 133

find yourself in a situation later on when you want to use this button, but you don't want it to have 134

the same amount of margin as you do in the title section. 135

So, usually, it's much better to just add in a custom class, which is what I'm going to do right now. 136

So I'm going to call this our download-button, and I'm going to apply that class to our Google Play button 137

as well. 138

So let's hit save, and now we can target it over here, and our download button needs a margin that is, 139

I've sort of been tweaking around with it, 140

and the one that I find to work the best is about 5 percent on the top, 3 percent on the right, 5 percent 141

on the left, and 0 on the bottom. 142

So let's hit save and refresh, and you can see that that provides a large enough distance between the 143

two buttons to make it take up roughly the amount of space that we've got 144

for our title, 145

and it makes our button aligned perfectly with the navbar-brand as well as the title text. 146

So that's what I quite liked when I was messing around with these numbers, 147

but of course feel free to play around with it yourself. 148

So it's usually easiest if you just inspect on it, and then just go into the box model and try changing 149

some of these numbers and see what it ends up being for the design that you want. 150

All right. So the very last thing I want to change is this image. That’s all that we have left in our 151

title section. 152

And, firstly, I want to make its width a little bit smaller, because at the moment it's kind of taking up 153

as much width as it can. 154

It's like full size right now, and I want to be maybe 60 percent of its parent. 155

So this is its parent, which is the containing div, which is our col-lg-6 on desktop and 156

12 and a full width on iPad or mobile. 157

But I want it to take up only maybe 60 percent of this width, to make it a little bit narrower. 158

So let's go and do that. 159

So again I'm going to add a new section. This is called Title Image. 160

Let's add a comment there and let's find out what class we need to use to target that image. 161

And you can see at the moment our image is devoid of all classes. 162

So let's go ahead and add that, and I'm going to call the class maybe title-image, and we can hit save. 163

Now here I can use that class called title-image, and we can make its width only 60 percent of what it 164

used to be, hit save, refresh. 165

You can see it's now a little bit smaller and less sort of assuming and less in your face, which makes 166

a much better design, I think. 167

Right. 168

So the last and final thing that you might have been struggling to figure out is, how do we get it to 169

be rotated to the right. 170

And this is the part where I said to you might need to search for it on Google. 171

So, as I've been saying, a lot of times getting good at development or programming is very often getting 172

good at Google and knowing the right things to search for in order to get your answer. 173

So in our case we want to rotate an image using CSS. And let's see what we get with this search query. 174

So we are getting some results from W3 Schools as well as MDN, 175

and they seem to point towards something about transform, something about rotation. 176

So I tend to prefer the MDN docs, so let's just take a look at what they talk about. 177

And you can see that there is a CSS function called rotation. 178

Now we haven't really spoken much about functions, but we will do in the next section when we cover Javascript. 179

But for now let's just see what we can do using this rotate function. 180

So they've got a very simple bit of CSS code here, where they’re changing a transform property by using 181

the rotate function, 182

and then you specify the degree, the amount, that you want to rotate your element by, and you can see, in this 183

case, the pink one, which is what this targets, is rotated 45 degrees to the right. 184

So let's just open this in Code Pen and have a mess around with it to fully understand what is happening. 185

So let's take a look at the CSS section. 186

So we've got this div which is normal, which nothing really changed about it. 187

And then we've got this div called rotated, with the class of rotated, which is what we are editing here. 188

And what we've changed is the transform property using the rotate function and we're specifying 45 degrees. 189

So when it's positive it rotates by 45 degrees to the right. 190

If it's negative it rotates by 45 degrees to the left or rather anti-clockwise. 191

And, as you expect, 90 degrees is 90 degrees right rotation, 180 degrees is 180 degrees clockwise rotation. 192

So this seems pretty simple and we can probably figure out how we can use this to achieve what we want 193

which is something like this. 194

So let's go into our CSS, and we're again targeting the title image in this case. 195

We're going to use what we just learned which is changing the transform property to use the rotate function 196

and we're going to specify how much we are going to rotate by. Now, with repeat sort of experimentation, 197

changing this number a few times, 198

I found that 25 degrees tends to work quite well. 199

So, if you add 25 degrees in the positive and you refresh, you can see that we've now got that 200

lovely right sided rotation. 201

So we are almost done here. 202

The last thing that I want to do is just do a final sort of sense check, 203

looking at this layout and seeing if we're happy with how it looks, and the one last thing that's a little 204

bit niggling for me is that this title is kind of competing with this navbar-brand. 205

And whenever you're designing web sites you want to think about what is the first thing that you want 206

the user to look at. 207

You want to establish some sort of visual hierarchy and you can do that using size or you can do that 208

using weight, 209

so font weight, or you can do that using highlighting or outlining, a whole bunch of things, basically. 210

And, in this case, even though this one has a much higher font weight than the navbar-brand, it’s kind of competing 211

with it because it's about the same size. 212

So let's just increase the title text size just by a smidge, and I'll show you the difference. 213

So let's go ahead and change that font size from 3rem to maybe, say, 3.5rem, and let me show you what 214

happens when I refresh. 215

You can see now, on this web site, it's pretty obvious that the biggest boldest thing is this heading 216

here, and it's pretty much guaranteed that if you get a user to load up this web site, the first thing 217

that their eyes will be drawn to is this biggest boldest title and that's exactly what we want. 218

We want them to immediately know what our product is about. 219

And then the second most important thing should be maybe the download button which are highlighted and 220

outlined for them to start taking action. And then maybe the third most important thing is for them to 221

know what our company is and what other things they can explore over here. 222

So now that we have more or less finished styling our title section of our page, in the next lesson we’re 223

going to move further down and continue with the other sections. 224

So, for all of that and more, I’ll see you on the next lesson.