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.