1 00:00:00,960 --> 00:00:01,260 All right. 2 00:00:01,260 --> 00:00:07,260 So in order to get to where we are right now we've learned about a number of Bootstrap components, 3 00:00:07,260 --> 00:00:16,800 for example the navigation bar, the Bootstrap buttons, Bootstrap containers, grids, and the responsiveness 4 00:00:16,860 --> 00:00:20,810 that we get using Bootstrap for layout purposes. 5 00:00:20,820 --> 00:00:28,530 Now, before we carry on, I want to add some more CSS code, so normal bog old standard CSS, so that 6 00:00:28,530 --> 00:00:36,780 we can customize all of our Bootstrap components and make our title page look a little bit more like 7 00:00:36,870 --> 00:00:39,760 our design on Balsamiq. 8 00:00:39,780 --> 00:00:41,980 So let's get started. 9 00:00:42,090 --> 00:00:47,180 Now, the first thing that you may or may not have noticed, there are some different fonts going on here. 10 00:00:47,550 --> 00:00:55,800 The nav bar uses the Bootstrap default font, as does the nav bar brand, as does the text in our buttons, 11 00:00:55,890 --> 00:01:00,140 and also of course the rest of our unstyled web page. 12 00:01:00,210 --> 00:01:08,400 Now, instead of going into the button, and going into the nav bar, and adding CSS to each of them, changing 13 00:01:08,400 --> 00: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 14 00:01:15,630 --> 00:01:18,010 font that we got from Google fonts. 15 00:01:18,030 --> 00:01:22,280 So pause the video and see if you can complete this mini challenge. 16 00:01:22,280 --> 00:01:25,870 All righ. So, this shouldn't be too hard because we've done it before. 17 00:01:25,920 --> 00:01:32,610 Now, what is the one thing that encompasses all of our content for our web site? 18 00:01:32,820 --> 00:01:40,650 Well, it's the body element, because all the content is embedded inside it. And we can simply define a 19 00:01:40,680 --> 00:01:47,860 global font for the body in order to apply it to all the text on screen. 20 00:01:47,880 --> 00:01:55,620 So, I'm going to target the body element, and I'm going to change the font-family to Montserrat, and 21 00:01:55,680 --> 00:01:59,280 I'm going to close it off with a semi-colon. 22 00:01:59,280 --> 00:02:02,910 So let's hit save and let's go back and refresh. 23 00:02:03,000 --> 00: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 24 00:02:08,700 --> 00:02:12,810 unified, and gets us closer to our final design. 25 00:02:13,200 --> 00: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 26 00:02:22,950 --> 00: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 27 00:02:29,070 --> 00:02:31,910 for our imaginary TinDog product. 28 00:02:31,920 --> 00: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 29 00:02:39,480 --> 00:02:41,240 and setting it to white. 30 00:02:41,250 --> 00: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 31 00:02:49,920 --> 00:02:51,060 inside. 32 00:02:51,060 --> 00:03:00,450 So, this line is inside our title section, and, by changing the color of all text in the title section, 33 00:03:00,930 --> 00: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 34 00:03:08,340 --> 00:03:08,870 be, 35 00:03:08,970 --> 00:03:11,930 it will still keep to our current color scheme. 36 00:03:11,940 --> 00:03:15,800 So it's a little bit more encompassing, and that's what I'm going to do here. 37 00:03:16,170 --> 00:03:21,630 I'm going to add our color property and I'm going to set it to white. 38 00:03:21,750 --> 00:03:29,550 So, as a shorthand remember that the color hex codes for #fff is always going to be white, 39 00:03:29,940 --> 00:03:37,710 and #000 is always going to be black, and you can see our Pigments add on showing you that. 40 00:03:37,710 --> 00:03:39,020 So I want white. 41 00:03:39,240 --> 00:03:42,470 Let's hit save and let's refresh. 42 00:03:42,510 --> 00:03:47,840 You can see we've now got our white big title, which looks brilliant. 43 00:03:47,940 --> 00: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 44 00:03:54,870 --> 00: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. 45 00:04:01,560 --> 00:04:05,820 So that's completely acceptable and it's not wrong at all. 46 00:04:05,820 --> 00: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 47 00:04:13,500 --> 00: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 48 00:04:19,350 --> 00:04:20,250 prominent. 49 00:04:20,310 --> 00: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 50 00:04:27,240 --> 00:04:28,850 product here after all. 51 00:04:29,040 --> 00:04:38,190 And the closest logo that I found on Google Fonts was the Ubuntu font, which we already incorporated when 52 00:04:38,190 --> 00:04:41,690 we embedded our Google Fonts into our web site. 53 00:04:41,820 --> 00:04:45,450 So let's go ahead and do that. Now, before I do that, 54 00:04:45,450 --> 00: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 55 00:04:52,800 --> 00:04:57,480 of highlighting it and command forward slash to style it. 56 00:04:57,480 --> 00:05:02,460 I find this much easier than typing a bunch of asterisks and forward slashes. 57 00:05:02,460 --> 00:05:07,240 Now here we're going to first target our nav brand, 58 00:05:07,350 --> 00:05:18,670 so navbar-brand, and and I want to change the font-family to Ubuntu, so font-family, and that's 59 00:05:18,680 --> 00:05:22,330 going to be Ubuntu. 60 00:05:22,340 --> 00: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 61 00:05:30,260 --> 00:05:36,380 it's still too small, so let's increase the font size as well to 2.5rem, 62 00:05:39,990 --> 00:05:43,870 and maybe while we're here we can make the font-weight to 63 00:05:43,920 --> 00:05:45,210 bold as well. 64 00:05:46,120 --> 00: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 65 00:05:53,880 --> 00: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 66 00:05:58,890 --> 00:06:00,410 our tiny text. 67 00:06:00,480 --> 00:06:05,780 Now, with the bigger font size for the navbar-brand, you start to notice that it’s a little bit awkward 68 00:06:05,790 --> 00:06:09,290 having it so close to our title text and image, 69 00:06:09,300 --> 00: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, 70 00:06:17,220 --> 00:06:19,760 because it would make it look a lot nicer. 71 00:06:19,890 --> 00:06:24,450 So, I don't really want to add any padding to the top or the left and right. 72 00:06:24,630 --> 00: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 73 00:06:35,460 --> 00:06:37,840 on any other side of the nav bar? 74 00:06:37,950 --> 00:06:42,050 So, again, mini challenge, pause the video if you want to complete it. 75 00:06:43,750 --> 00:06:44,060 All right. 76 00:06:44,070 --> 00: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 77 00:06:53,260 --> 00:06:56,380 bar instead of any component inside the nav bar, 78 00:06:56,410 --> 00: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 79 00:07:05,170 --> 00:07:08,190 to more specific as you scroll down, 80 00:07:08,260 --> 00:07:12,150 and also I try to keep the CSS styling 81 00:07:12,250 --> 00:07:14,970 roughly in the order that you see on the page. 82 00:07:15,010 --> 00:07:19,570 So, the title section will go first, then the next section, then the next section. 83 00:07:19,600 --> 00:07:24,260 It just makes it a little bit easier to change and to fix later on. 84 00:07:24,310 --> 00: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 85 00:07:31,750 --> 00:07:40,060 to set it to 2.5, and we want to set it to 4.5rem, hit save and refresh. 86 00:07:40,060 --> 00: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 87 00:07:46,960 --> 00:07:52,660 it makes the whole web site look a lot less bunched up and a lot more designed, if you will. 88 00:07:52,660 --> 00:07:56,980 Now the next thing we should address in the nav bar are these nav items. 89 00:07:57,070 --> 00:08:00,190 They need a bit more space between each other. 90 00:08:00,400 --> 00:08:03,200 So I'm again going to add some padding. 91 00:08:03,220 --> 00:08:08,270 I'll keep this as a fixed size just because we've got that responsiveness, 92 00:08:08,440 --> 00:08:12,220 so I don't really need it as a percentage or as a rem. 93 00:08:12,490 --> 00:08:20,350 So, I'm going to put in probably 18 pixels of padding left and right of each of these nav items. 94 00:08:20,350 --> 00: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 95 00:08:27,670 --> 00:08:38,260 padding 0 top and bottom, and then about 18 pixels left and right, hit save, refresh, bit more spaced 96 00:08:38,260 --> 00:08:40,310 out, looks a lot nicer, 97 00:08:40,330 --> 00:08:45,640 we won't accidentally press on the wrong button, but they still need to be a little bit larger. 98 00:08:45,670 --> 00:08:49,690 So I'm going to dig even deeper inside the nav-item. 99 00:08:49,690 --> 00:08:53,380 I'm going to target the actual nav-link to style it. 100 00:08:53,500 --> 00:08:56,200 So we're going to target the nav-link. 101 00:08:56,320 --> 00: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 102 00:09:02,560 --> 00:09:04,480 a little bit more like this. 103 00:09:04,480 --> 00:09:06,090 So a little bit larger, 104 00:09:06,280 --> 00:09:12,900 and I'm also going to change the font-weight to the Montserrat-Light font 105 00:09:13,090 --> 00:09:16,370 so it's not so prominent on the page. 106 00:09:16,480 --> 00:09:17,830 So let's go ahead and do that. 107 00:09:17,830 --> 00:09:24,420 Let's change the nav link’s font size, we can change it to maybe about 1.2rem. 108 00:09:24,460 --> 00: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. 109 00:09:29,710 --> 00:09:41,200 So let's change the font-family to Montserrat-Light, and this will thin those letters down and make 110 00:09:41,200 --> 00:09:44,800 it less prominent and blend in a bit better. 111 00:09:44,800 --> 00:09:50,250 Now let's take a look at how our nav bar looks by activating Pesticide. 112 00:09:50,410 --> 00:09:54,400 And you can see that this is the entire section, 113 00:09:54,460 --> 00:10:00,220 this blue section. And you can see that we've still got a bit of padding, 114 00:10:00,220 --> 00:10:05,590 it seems, leftover from the top, the left and the right of our nav bar, 115 00:10:05,740 --> 00:10:12,780 which is why that text is not aligning on the left with our title text here. 116 00:10:12,820 --> 00:10:15,970 So that is just a little bit off. 117 00:10:16,030 --> 00: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 118 00:10:24,670 --> 00:10:26,830 to the padding bottom that we added. 119 00:10:26,830 --> 00:10:34,060 So let's try and get rid of this padding which came from, probably, the Bootstrap element, and we can do 120 00:10:34,060 --> 00:10:42,070 that by, instead of using padding bottom to add padding and then add zero to the top, zero to the left 121 00:10:42,070 --> 00:10:45,690 and right and 4.5 rpm to the bottom only. 122 00:10:45,940 --> 00:10:48,270 So now if we refresh. 123 00:10:48,400 --> 00:10:55,320 You can see that our navbar-brand now aligns perfectly with our title text and our buttons. 124 00:10:55,450 --> 00:11:02,530 And when you're designing web sites or apps or whatever it may be, try to minimize the number of lines 125 00:11:02,530 --> 00:11:07,750 that you can align things to, because it will usually make your designs look more together. 126 00:11:07,750 --> 00:11:10,620 So now I'm pretty happy with my nav bar. 127 00:11:10,810 --> 00: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 128 00:11:16,510 --> 00:11:20,680 and they need a little bit of a margin to push it away from that text. 129 00:11:20,920 --> 00:11:32,140 So let's go into our CSS and add another section. Let’s call it Buttons, maybe more specifically the 130 00:11:32,140 --> 00:11:39,730 Download Buttons. Let’s comment that out so that we have our new section. Now, in order to target the button, 131 00:11:39,820 --> 00:11:48,550 I have a choice of either using the Bootstrap btn class, and customize the Bootstrap style, or I can 132 00:11:48,580 --> 00:11:50,560 add in my custom class. 133 00:11:50,560 --> 00:11:58,690 Now, in this situation, if you start getting lazy and using the existing classes from Bootstrap, you often 134 00:11:58,690 --> 00: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 135 00:12:04,810 --> 00:12:08,590 the same amount of margin as you do in the title section. 136 00:12:08,590 --> 00: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. 137 00:12:15,850 --> 00: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 138 00:12:24,850 --> 00:12:25,300 as well. 139 00:12:25,300 --> 00: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, 140 00:12:36,100 --> 00:12:38,800 I've sort of been tweaking around with it, 141 00:12:38,860 --> 00: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 142 00:12:50,240 --> 00:12:53,700 on the left, and 0 on the bottom. 143 00:12:53,900 --> 00:13:01,220 So let's hit save and refresh, and you can see that that provides a large enough distance between the 144 00:13:01,220 --> 00:13:05,870 two buttons to make it take up roughly the amount of space that we've got 145 00:13:05,870 --> 00:13:07,160 for our title, 146 00:13:07,190 --> 00:13:14,710 and it makes our button aligned perfectly with the navbar-brand as well as the title text. 147 00:13:14,750 --> 00:13:19,520 So that's what I quite liked when I was messing around with these numbers, 148 00:13:19,640 --> 00:13:23,370 but of course feel free to play around with it yourself. 149 00:13:23,390 --> 00: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 150 00:13:29,360 --> 00:13:34,460 some of these numbers and see what it ends up being for the design that you want. 151 00:13:34,460 --> 00: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 152 00:13:39,800 --> 00:13:41,120 title section. 153 00:13:41,240 --> 00: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 154 00:13:47,870 --> 00:13:49,660 as much width as it can. 155 00:13:49,670 --> 00:13:56,260 It's like full size right now, and I want to be maybe 60 percent of its parent. 156 00:13:56,270 --> 00:14:04,460 So this is its parent, which is the containing div, which is our col-lg-6 on desktop and 157 00:14:04,910 --> 00:14:09,790 12 and a full width on iPad or mobile. 158 00:14:09,950 --> 00:14:14,080 But I want it to take up only maybe 60 percent of this width, to make it a little bit narrower. 159 00:14:14,090 --> 00:14:16,620 So let's go and do that. 160 00:14:16,670 --> 00:14:21,550 So again I'm going to add a new section. This is called Title Image. 161 00:14:21,650 --> 00:14:29,070 Let's add a comment there and let's find out what class we need to use to target that image. 162 00:14:29,180 --> 00:14:33,120 And you can see at the moment our image is devoid of all classes. 163 00:14:33,260 --> 00: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. 164 00:14:43,180 --> 00: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 165 00:14:53,180 --> 00:14:56,250 used to be, hit save, refresh. 166 00:14:56,350 --> 00: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 167 00:15:02,330 --> 00:15:04,390 a much better design, I think. 168 00:15:04,490 --> 00:15:04,760 Right. 169 00:15:04,760 --> 00: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 170 00:15:11,000 --> 00:15:14,790 be rotated to the right. 171 00:15:14,930 --> 00:15:20,430 And this is the part where I said to you might need to search for it on Google. 172 00:15:20,630 --> 00:15:26,990 So, as I've been saying, a lot of times getting good at development or programming is very often getting 173 00:15:26,990 --> 00:15:31,040 good at Google and knowing the right things to search for in order to get your answer. 174 00:15:31,280 --> 00: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. 175 00:15:40,670 --> 00:15:45,380 So we are getting some results from W3 Schools as well as MDN, 176 00:15:45,500 --> 00:15:49,970 and they seem to point towards something about transform, something about rotation. 177 00:15:49,970 --> 00:15:55,130 So I tend to prefer the MDN docs, so let's just take a look at what they talk about. 178 00:15:55,640 --> 00:16:01,070 And you can see that there is a CSS function called rotation. 179 00:16:01,070 --> 00:16:07,120 Now we haven't really spoken much about functions, but we will do in the next section when we cover Javascript. 180 00:16:07,220 --> 00:16:13,130 But for now let's just see what we can do using this rotate function. 181 00:16:13,130 --> 00:16:22,010 So they've got a very simple bit of CSS code here, where they’re changing a transform property by using 182 00:16:22,010 --> 00:16:23,160 the rotate function, 183 00:16:23,180 --> 00: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 184 00:16:30,200 --> 00:16:37,010 case, the pink one, which is what this targets, is rotated 45 degrees to the right. 185 00:16:37,010 --> 00: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. 186 00:16:43,220 --> 00:16:45,700 So let's take a look at the CSS section. 187 00:16:45,770 --> 00:16:50,920 So we've got this div which is normal, which nothing really changed about it. 188 00:16:51,110 --> 00:16:58,170 And then we've got this div called rotated, with the class of rotated, which is what we are editing here. 189 00:16:58,340 --> 00:17:04,970 And what we've changed is the transform property using the rotate function and we're specifying 45 degrees. 190 00:17:04,970 --> 00:17:08,570 So when it's positive it rotates by 45 degrees to the right. 191 00:17:08,570 --> 00:17:14,170 If it's negative it rotates by 45 degrees to the left or rather anti-clockwise. 192 00:17:14,240 --> 00:17:22,980 And, as you expect, 90 degrees is 90 degrees right rotation, 180 degrees is 180 degrees clockwise rotation. 193 00:17:23,000 --> 00:17:29,390 So this seems pretty simple and we can probably figure out how we can use this to achieve what we want 194 00:17:29,480 --> 00:17:32,190 which is something like this. 195 00:17:32,240 --> 00:17:38,160 So let's go into our CSS, and we're again targeting the title image in this case. 196 00:17:38,170 --> 00:17:44,780 We're going to use what we just learned which is changing the transform property to use the rotate function 197 00:17:45,140 --> 00:17:51,250 and we're going to specify how much we are going to rotate by. Now, with repeat sort of experimentation, 198 00:17:51,250 --> 00:17:53,690 changing this number a few times, 199 00:17:53,740 --> 00:17:57,240 I found that 25 degrees tends to work quite well. 200 00:17:57,280 --> 00:18:05,710 So, if you add 25 degrees in the positive and you refresh, you can see that we've now got that 201 00:18:05,770 --> 00:18:08,710 lovely right sided rotation. 202 00:18:08,710 --> 00:18:12,100 So we are almost done here. 203 00:18:12,130 --> 00:18:17,560 The last thing that I want to do is just do a final sort of sense check, 204 00:18:17,710 --> 00: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 205 00:18:23,800 --> 00:18:31,900 bit niggling for me is that this title is kind of competing with this navbar-brand. 206 00:18:31,960 --> 00:18:38,020 And whenever you're designing web sites you want to think about what is the first thing that you want 207 00:18:38,020 --> 00:18:39,270 the user to look at. 208 00:18:39,270 --> 00:18:45,040 You want to establish some sort of visual hierarchy and you can do that using size or you can do that 209 00:18:45,040 --> 00:18:46,680 using weight, 210 00:18:46,960 --> 00:18:53,260 so font weight, or you can do that using highlighting or outlining, a whole bunch of things, basically. 211 00:18:53,680 --> 00: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 212 00:19:01,300 --> 00:19:04,260 with it because it's about the same size. 213 00:19:04,270 --> 00:19:11,440 So let's just increase the title text size just by a smidge, and I'll show you the difference. 214 00:19:12,660 --> 00: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 215 00:19:21,180 --> 00:19:23,100 happens when I refresh. 216 00:19:23,130 --> 00:19:29,370 You can see now, on this web site, it's pretty obvious that the biggest boldest thing is this heading 217 00:19:29,370 --> 00: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 218 00:19:36,270 --> 00:19:41,670 that their eyes will be drawn to is this biggest boldest title and that's exactly what we want. 219 00:19:41,670 --> 00:19:45,100 We want them to immediately know what our product is about. 220 00:19:45,270 --> 00:19:52,170 And then the second most important thing should be maybe the download button which are highlighted and 221 00:19:52,230 --> 00:19:57,930 outlined for them to start taking action. And then maybe the third most important thing is for them to 222 00:19:57,930 --> 00:20:03,060 know what our company is and what other things they can explore over here. 223 00:20:03,180 --> 00: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 224 00:20:10,350 --> 00:20:15,200 going to move further down and continue with the other sections. 225 00:20:15,210 --> 00:20:19,160 So, for all of that and more, I’ll see you on the next lesson.