WEBVTT 0 00:00.960 --> 00:01.260 All right. 1 00:01.260 --> 00:07.260 So in order to get to where we are right now we've learned about a number of Bootstrap components, 2 00:07.260 --> 00:16.800 for example the navigation bar, the Bootstrap buttons, Bootstrap containers, grids, and the responsiveness 3 00:16.860 --> 00:20.810 that we get using Bootstrap for layout purposes. 4 00:20.820 --> 00:28.530 Now, before we carry on, I want to add some more CSS code, so normal bog old standard CSS, so that 5 00:28.530 --> 00:36.780 we can customize all of our Bootstrap components and make our title page look a little bit more like 6 00:36.870 --> 00:39.760 our design on Balsamiq. 7 00:39.780 --> 00:41.980 So let's get started. 8 00:42.090 --> 00:47.180 Now, the first thing that you may or may not have noticed, there are some different fonts going on here. 9 00:47.550 --> 00:55.800 The nav bar uses the Bootstrap default font, as does the nav bar brand, as does the text in our buttons, 10 00:55.890 --> 01:00.140 and also of course the rest of our unstyled web page. 11 01:00.210 --> 01:08.400 Now, instead of going into the button, and going into the nav bar, and adding CSS to each of them, changing 12 01:08.400 --> 01:15.630 the font, I want you to think if you can figure out a way of changing all of the text to the Montserrat 13 01:15.630 --> 01:18.010 font that we got from Google fonts. 14 01:18.030 --> 01:22.280 So pause the video and see if you can complete this mini challenge. 15 01:22.280 --> 01:25.870 All righ. So, this shouldn't be too hard because we've done it before. 16 01:25.920 --> 01:32.610 Now, what is the one thing that encompasses all of our content for our web site? 17 01:32.820 --> 01:40.650 Well, it's the body element, because all the content is embedded inside it. And we can simply define a 18 01:40.680 --> 01:47.860 global font for the body in order to apply it to all the text on screen. 19 01:47.880 --> 01:55.620 So, I'm going to target the body element, and I'm going to change the font-family to Montserrat, and 20 01:55.680 --> 01:59.280 I'm going to close it off with a semi-colon. 21 01:59.280 --> 02:02.910 So let's hit save and let's go back and refresh. 22 02:03.000 --> 02:08.700 You can see that all the text now has changed to our chosen font, which makes it look a little bit more 23 02:08.700 --> 02:12.810 unified, and gets us closer to our final design. 24 02:13.200 --> 02:22.890 So, the next thing I want to change is, I want this title text to have a white color, so that it matches 25 02:22.950 --> 02:28.980 with the color palette that we've got going on here, which is this kind of red and white kind of scheme 26 02:29.070 --> 02:31.910 for our imaginary TinDog product. 27 02:31.920 --> 02:39.480 So, one way of doing this is going into the h1 that we've already selected here, and adding a color property 28 02:39.480 --> 02:41.240 and setting it to white. 29 02:41.250 --> 02:49.890 Now, the other way of doing this is adding it to the title section, which, if you remember, the h1 is residing 30 02:49.920 --> 02:51.060 inside. 31 02:51.060 --> 03:00.450 So, this line is inside our title section, and, by changing the color of all text in the title section, 32 03:00.930 --> 03:08.340 if later on I decide to add a subtitle or, you know, a little bit of explainer text, or whatever it may 33 03:08.340 --> 03:08.870 be, 34 03:08.970 --> 03:11.930 it will still keep to our current color scheme. 35 03:11.940 --> 03:15.800 So it's a little bit more encompassing, and that's what I'm going to do here. 36 03:16.170 --> 03:21.630 I'm going to add our color property and I'm going to set it to white. 37 03:21.750 --> 03:29.550 So, as a shorthand remember that the color hex codes for #fff is always going to be white, 38 03:29.940 --> 03:37.710 and #000 is always going to be black, and you can see our Pigments add on showing you that. 39 03:37.710 --> 03:39.020 So I want white. 40 03:39.240 --> 03:42.470 Let's hit save and let's refresh. 41 03:42.510 --> 03:47.840 You can see we've now got our white big title, which looks brilliant. 42 03:47.940 --> 03:54.870 Now, don't worry, if you added your color to the h1, it's perfectly valid, and we can always refactor code 43 03:54.870 --> 04:01.410 later on if we see we’are duplicating any part or, you know, if we want to make our code more succinct. 44 04:01.560 --> 04:05.820 So that's completely acceptable and it's not wrong at all. 45 04:05.820 --> 04:13.500 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 04:13.500 --> 04:19.350 you can see that the text is a little bit too small and this brand should really be a little bit more 47 04:19.350 --> 04:20.250 prominent. 48 04:20.310 --> 04:26.700 And also I want to make it look a little bit more like the Tinder logo, because we are making a copycat 49 04:27.240 --> 04:28.850 product here after all. 50 04:29.040 --> 04:38.190 And the closest logo that I found on Google Fonts was the Ubuntu font, which we already incorporated when 51 04:38.190 --> 04:41.690 we embedded our Google Fonts into our web site. 52 04:41.820 --> 04:45.450 So let's go ahead and do that. Now, before I do that, 53 04:45.450 --> 04:52.770 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 04:52.800 --> 04:57.480 of highlighting it and command forward slash to style it. 55 04:57.480 --> 05:02.460 I find this much easier than typing a bunch of asterisks and forward slashes. 56 05:02.460 --> 05:07.240 Now here we're going to first target our nav brand, 57 05:07.350 --> 05:18.670 so navbar-brand, and and I want to change the font-family to Ubuntu, so font-family, and that's 58 05:18.680 --> 05:22.330 going to be Ubuntu. 59 05:22.340 --> 05:30.230 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 05:30.260 --> 05:36.380 it's still too small, so let's increase the font size as well to 2.5rem, 61 05:39.990 --> 05:43.870 and maybe while we're here we can make the font-weight to 62 05:43.920 --> 05:45.210 bold as well. 63 05:46.120 --> 05:53.880 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 05:53.880 --> 05:58.890 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 05:58.890 --> 06:00.410 our tiny text. 66 06:00.480 --> 06:05.780 Now, with the bigger font size for the navbar-brand, you start to notice that it’s a little bit awkward 67 06:05.790 --> 06:09.290 having it so close to our title text and image, 68 06:09.300 --> 06:17.130 so ideally I would like to push down any content, and have a bit of padding at the bottom of our nav bar, 69 06:17.220 --> 06:19.760 because it would make it look a lot nicer. 70 06:19.890 --> 06:24.450 So, I don't really want to add any padding to the top or the left and right. 71 06:24.630 --> 06:35.430 So, can you think of a way in which we can set the bottom padding to 4.5rem, without touching the padding 72 06:35.460 --> 06:37.840 on any other side of the nav bar? 73 06:37.950 --> 06:42.050 So, again, mini challenge, pause the video if you want to complete it. 74 06:43.750 --> 06:44.060 All right. 75 06:44.070 --> 06:53.230 So, I'm going to put this just above our navbar-brand, because it's more broad, and it targets the nav 76 06:53.260 --> 06:56.380 bar instead of any component inside the nav bar, 77 06:56.410 --> 07:05.170 so it's a higher level div, so I tend to add my selectors in that kind of order, going from less specific 78 07:05.170 --> 07:08.190 to more specific as you scroll down, 79 07:08.260 --> 07:12.150 and also I try to keep the CSS styling 80 07:12.250 --> 07:14.970 roughly in the order that you see on the page. 81 07:15.010 --> 07:19.570 So, the title section will go first, then the next section, then the next section. 82 07:19.600 --> 07:24.260 It just makes it a little bit easier to change and to fix later on. 83 07:24.310 --> 07:31.750 Now, in the nav bar we want to change the padding, and we only want to touch the padding bottom, and we want 84 07:31.750 --> 07:40.060 to set it to 2.5, and we want to set it to 4.5rem, hit save and refresh. 85 07:40.060 --> 07:46.960 And now we've got a little bit more space in between that nav bar and the title text and images, and 86 07:46.960 --> 07:52.660 it makes the whole web site look a lot less bunched up and a lot more designed, if you will. 87 07:52.660 --> 07:56.980 Now the next thing we should address in the nav bar are these nav items. 88 07:57.070 --> 08:00.190 They need a bit more space between each other. 89 08:00.400 --> 08:03.200 So I'm again going to add some padding. 90 08:03.220 --> 08:08.270 I'll keep this as a fixed size just because we've got that responsiveness, 91 08:08.440 --> 08:12.220 so I don't really need it as a percentage or as a rem. 92 08:12.490 --> 08:20.350 So, I'm going to put in probably 18 pixels of padding left and right of each of these nav items. 93 08:20.350 --> 08:27.640 So, we're going to go below the navbar-brand. We’re going to target nav-item, and we're going to say 94 08:27.670 --> 08:38.260 padding 0 top and bottom, and then about 18 pixels left and right, hit save, refresh, bit more spaced 95 08:38.260 --> 08:40.310 out, looks a lot nicer, 96 08:40.330 --> 08:45.640 we won't accidentally press on the wrong button, but they still need to be a little bit larger. 97 08:45.670 --> 08:49.690 So I'm going to dig even deeper inside the nav-item. 98 08:49.690 --> 08:53.380 I'm going to target the actual nav-link to style it. 99 08:53.500 --> 08:56.200 So we're going to target the nav-link. 100 08:56.320 --> 09:02.470 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 09:02.560 --> 09:04.480 a little bit more like this. 102 09:04.480 --> 09:06.090 So a little bit larger, 103 09:06.280 --> 09:12.900 and I'm also going to change the font-weight to the Montserrat-Light font 104 09:13.090 --> 09:16.370 so it's not so prominent on the page. 105 09:16.480 --> 09:17.830 So let's go ahead and do that. 106 09:17.830 --> 09:24.420 Let's change the nav link’s font size, we can change it to maybe about 1.2rem. 107 09:24.460 --> 09:29.560 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 09:29.710 --> 09:41.200 So let's change the font-family to Montserrat-Light, and this will thin those letters down and make 109 09:41.200 --> 09:44.800 it less prominent and blend in a bit better. 110 09:44.800 --> 09:50.250 Now let's take a look at how our nav bar looks by activating Pesticide. 111 09:50.410 --> 09:54.400 And you can see that this is the entire section, 112 09:54.460 --> 10:00.220 this blue section. And you can see that we've still got a bit of padding, 113 10:00.220 --> 10:05.590 it seems, leftover from the top, the left and the right of our nav bar, 114 10:05.740 --> 10:12.780 which is why that text is not aligning on the left with our title text here. 115 10:12.820 --> 10:15.970 So that is just a little bit off. 116 10:16.030 --> 10:24.670 And I suspect the reason is, if we inspect on this, is that the nav bar actually has some padding, in addition 117 10:24.670 --> 10:26.830 to the padding bottom that we added. 118 10:26.830 --> 10:34.060 So let's try and get rid of this padding which came from, probably, the Bootstrap element, and we can do 119 10:34.060 --> 10:42.070 that by, instead of using padding bottom to add padding and then add zero to the top, zero to the left 120 10:42.070 --> 10:45.690 and right and 4.5 rpm to the bottom only. 121 10:45.940 --> 10:48.270 So now if we refresh. 122 10:48.400 --> 10:55.320 You can see that our navbar-brand now aligns perfectly with our title text and our buttons. 123 10:55.450 --> 11:02.530 And when you're designing web sites or apps or whatever it may be, try to minimize the number of lines 124 11:02.530 --> 11:07.750 that you can align things to, because it will usually make your designs look more together. 125 11:07.750 --> 11:10.620 So now I'm pretty happy with my nav bar. 126 11:10.810 --> 11:16.210 So the next thing I'm going to deal with are these buttons. They’re far too close to this title text 127 11:16.510 --> 11:20.680 and they need a little bit of a margin to push it away from that text. 128 11:20.920 --> 11:32.140 So let's go into our CSS and add another section. Let’s call it Buttons, maybe more specifically the 129 11:32.140 --> 11:39.730 Download Buttons. Let’s comment that out so that we have our new section. Now, in order to target the button, 130 11:39.820 --> 11:48.550 I have a choice of either using the Bootstrap btn class, and customize the Bootstrap style, or I can 131 11:48.580 --> 11:50.560 add in my custom class. 132 11:50.560 --> 11:58.690 Now, in this situation, if you start getting lazy and using the existing classes from Bootstrap, you often 133 11:58.690 --> 12:04.810 find yourself in a situation later on when you want to use this button, but you don't want it to have 134 12:04.810 --> 12:08.590 the same amount of margin as you do in the title section. 135 12:08.590 --> 12:15.590 So, usually, it's much better to just add in a custom class, which is what I'm going to do right now. 136 12:15.850 --> 12:24.820 So I'm going to call this our download-button, and I'm going to apply that class to our Google Play button 137 12:24.850 --> 12:25.300 as well. 138 12:25.300 --> 12:35.940 So let's hit save, and now we can target it over here, and our download button needs a margin that is, 139 12:36.100 --> 12:38.800 I've sort of been tweaking around with it, 140 12:38.860 --> 12:50.120 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 12:50.240 --> 12:53.700 on the left, and 0 on the bottom. 142 12:53.900 --> 13:01.220 So let's hit save and refresh, and you can see that that provides a large enough distance between the 143 13:01.220 --> 13:05.870 two buttons to make it take up roughly the amount of space that we've got 144 13:05.870 --> 13:07.160 for our title, 145 13:07.190 --> 13:14.710 and it makes our button aligned perfectly with the navbar-brand as well as the title text. 146 13:14.750 --> 13:19.520 So that's what I quite liked when I was messing around with these numbers, 147 13:19.640 --> 13:23.370 but of course feel free to play around with it yourself. 148 13:23.390 --> 13:29.360 So it's usually easiest if you just inspect on it, and then just go into the box model and try changing 149 13:29.360 --> 13:34.460 some of these numbers and see what it ends up being for the design that you want. 150 13:34.460 --> 13:39.800 All right. So the very last thing I want to change is this image. That’s all that we have left in our 151 13:39.800 --> 13:41.120 title section. 152 13:41.240 --> 13:47.840 And, firstly, I want to make its width a little bit smaller, because at the moment it's kind of taking up 153 13:47.870 --> 13:49.660 as much width as it can. 154 13:49.670 --> 13:56.260 It's like full size right now, and I want to be maybe 60 percent of its parent. 155 13:56.270 --> 14:04.460 So this is its parent, which is the containing div, which is our col-lg-6 on desktop and 156 14:04.910 --> 14:09.790 12 and a full width on iPad or mobile. 157 14:09.950 --> 14:14.080 But I want it to take up only maybe 60 percent of this width, to make it a little bit narrower. 158 14:14.090 --> 14:16.620 So let's go and do that. 159 14:16.670 --> 14:21.550 So again I'm going to add a new section. This is called Title Image. 160 14:21.650 --> 14:29.070 Let's add a comment there and let's find out what class we need to use to target that image. 161 14:29.180 --> 14:33.120 And you can see at the moment our image is devoid of all classes. 162 14:33.260 --> 14:42.730 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 14:43.180 --> 14:53.180 Now here I can use that class called title-image, and we can make its width only 60 percent of what it 164 14:53.180 --> 14:56.250 used to be, hit save, refresh. 165 14:56.350 --> 15:02.240 You can see it's now a little bit smaller and less sort of assuming and less in your face, which makes 166 15:02.330 --> 15:04.390 a much better design, I think. 167 15:04.490 --> 15:04.760 Right. 168 15:04.760 --> 15:11.000 So the last and final thing that you might have been struggling to figure out is, how do we get it to 169 15:11.000 --> 15:14.790 be rotated to the right. 170 15:14.930 --> 15:20.430 And this is the part where I said to you might need to search for it on Google. 171 15:20.630 --> 15:26.990 So, as I've been saying, a lot of times getting good at development or programming is very often getting 172 15:26.990 --> 15:31.040 good at Google and knowing the right things to search for in order to get your answer. 173 15:31.280 --> 15:40.670 So in our case we want to rotate an image using CSS. And let's see what we get with this search query. 174 15:40.670 --> 15:45.380 So we are getting some results from W3 Schools as well as MDN, 175 15:45.500 --> 15:49.970 and they seem to point towards something about transform, something about rotation. 176 15:49.970 --> 15:55.130 So I tend to prefer the MDN docs, so let's just take a look at what they talk about. 177 15:55.640 --> 16:01.070 And you can see that there is a CSS function called rotation. 178 16:01.070 --> 16:07.120 Now we haven't really spoken much about functions, but we will do in the next section when we cover Javascript. 179 16:07.220 --> 16:13.130 But for now let's just see what we can do using this rotate function. 180 16:13.130 --> 16:22.010 So they've got a very simple bit of CSS code here, where they’re changing a transform property by using 181 16:22.010 --> 16:23.160 the rotate function, 182 16:23.180 --> 16:30.200 and then you specify the degree, the amount, that you want to rotate your element by, and you can see, in this 183 16:30.200 --> 16:37.010 case, the pink one, which is what this targets, is rotated 45 degrees to the right. 184 16:37.010 --> 16:43.200 So let's just open this in Code Pen and have a mess around with it to fully understand what is happening. 185 16:43.220 --> 16:45.700 So let's take a look at the CSS section. 186 16:45.770 --> 16:50.920 So we've got this div which is normal, which nothing really changed about it. 187 16:51.110 --> 16:58.170 And then we've got this div called rotated, with the class of rotated, which is what we are editing here. 188 16:58.340 --> 17:04.970 And what we've changed is the transform property using the rotate function and we're specifying 45 degrees. 189 17:04.970 --> 17:08.570 So when it's positive it rotates by 45 degrees to the right. 190 17:08.570 --> 17:14.170 If it's negative it rotates by 45 degrees to the left or rather anti-clockwise. 191 17:14.240 --> 17:22.980 And, as you expect, 90 degrees is 90 degrees right rotation, 180 degrees is 180 degrees clockwise rotation. 192 17:23.000 --> 17:29.390 So this seems pretty simple and we can probably figure out how we can use this to achieve what we want 193 17:29.480 --> 17:32.190 which is something like this. 194 17:32.240 --> 17:38.160 So let's go into our CSS, and we're again targeting the title image in this case. 195 17:38.170 --> 17:44.780 We're going to use what we just learned which is changing the transform property to use the rotate function 196 17:45.140 --> 17:51.250 and we're going to specify how much we are going to rotate by. Now, with repeat sort of experimentation, 197 17:51.250 --> 17:53.690 changing this number a few times, 198 17:53.740 --> 17:57.240 I found that 25 degrees tends to work quite well. 199 17:57.280 --> 18:05.710 So, if you add 25 degrees in the positive and you refresh, you can see that we've now got that 200 18:05.770 --> 18:08.710 lovely right sided rotation. 201 18:08.710 --> 18:12.100 So we are almost done here. 202 18:12.130 --> 18:17.560 The last thing that I want to do is just do a final sort of sense check, 203 18:17.710 --> 18:23.800 looking at this layout and seeing if we're happy with how it looks, and the one last thing that's a little 204 18:23.800 --> 18:31.900 bit niggling for me is that this title is kind of competing with this navbar-brand. 205 18:31.960 --> 18:38.020 And whenever you're designing web sites you want to think about what is the first thing that you want 206 18:38.020 --> 18:39.270 the user to look at. 207 18:39.270 --> 18:45.040 You want to establish some sort of visual hierarchy and you can do that using size or you can do that 208 18:45.040 --> 18:46.680 using weight, 209 18:46.960 --> 18:53.260 so font weight, or you can do that using highlighting or outlining, a whole bunch of things, basically. 210 18:53.680 --> 19:01.300 And, in this case, even though this one has a much higher font weight than the navbar-brand, it’s kind of competing 211 19:01.300 --> 19:04.260 with it because it's about the same size. 212 19:04.270 --> 19:11.440 So let's just increase the title text size just by a smidge, and I'll show you the difference. 213 19:12.660 --> 19:21.180 So let's go ahead and change that font size from 3rem to maybe, say, 3.5rem, and let me show you what 214 19:21.180 --> 19:23.100 happens when I refresh. 215 19:23.130 --> 19:29.370 You can see now, on this web site, it's pretty obvious that the biggest boldest thing is this heading 216 19:29.370 --> 19:36.270 here, and it's pretty much guaranteed that if you get a user to load up this web site, the first thing 217 19:36.270 --> 19:41.670 that their eyes will be drawn to is this biggest boldest title and that's exactly what we want. 218 19:41.670 --> 19:45.100 We want them to immediately know what our product is about. 219 19:45.270 --> 19:52.170 And then the second most important thing should be maybe the download button which are highlighted and 220 19:52.230 --> 19:57.930 outlined for them to start taking action. And then maybe the third most important thing is for them to 221 19:57.930 --> 20:03.060 know what our company is and what other things they can explore over here. 222 20:03.180 --> 20:10.330 So now that we have more or less finished styling our title section of our page, in the next lesson we’re 223 20:10.350 --> 20:15.200 going to move further down and continue with the other sections. 224 20:15.210 --> 20:19.160 So, for all of that and more, I’ll see you on the next lesson.