WEBVTT 0 00:01.060 --> 00:01.440 All right. 1 00:01.440 --> 00:04.890 So how did you get on with that challenge? 2 00:04.890 --> 00:11.430 Well, if you managed to style your web site to look more or less like what we've got here, then you win. 3 00:11.430 --> 00:14.100 Ding ding ding ding ding. 4 00:14.820 --> 00:19.620 But if you struggled, or if there was anything that was unclear, then I'm going to walk you through the 5 00:19.620 --> 00:23.210 solution, so that you can do it along with me. 6 00:23.210 --> 00:28.410 Now you can see that to turn this into this there's still a little bit of work that we have to do in 7 00:28.410 --> 00:35.370 terms of styling, and the first thing is to change the call to action section to a different background 8 00:35.370 --> 00:36.190 color. 9 00:36.210 --> 00:44.700 So let's go ahead and do that now. So, you can see that we've got this call to action or CTA section, and 10 00:44.790 --> 00:48.330 this is the id that we can use to target that section. 11 00:48.330 --> 00:50.240 So if we scroll all the way down, 12 00:50.250 --> 00:59.690 but just before the media queries, we can add in a new section called the CTA section and we're going 13 00:59.690 --> 01:02.480 to comment it out and this is our new section. 14 01:02.480 --> 01:10.640 Now I'm going to target the cta id, and I'm going to change the background color to that pinkish red 15 01:10.640 --> 01:15.000 color that we had before, which is ff4c68. 16 01:15.110 --> 01:18.480 So let's hit save and check it out. 17 01:18.620 --> 01:18.850 All right. 18 01:18.860 --> 01:19.700 Looks good. 19 01:19.700 --> 01:26.810 Now we mentioned previously that whenever a background is colored we want the text to be white and not 20 01:26.810 --> 01:29.870 black because it doesn't look contrasty enough. 21 01:29.870 --> 01:34.820 So let's go ahead and add some text color and we're going to make it fff. 22 01:35.120 --> 01:38.390 And now we have white text instead of black text. 23 01:38.450 --> 01:47.090 Now currently our content of this section is pretty much stuck to the left and the top and the bottom 24 01:47.180 --> 01:49.570 and it's all too squished together. 25 01:49.640 --> 01:55.850 So let's give this section some padding like what we've done for all the previous sections. So we're 26 01:55.850 --> 02:03.110 going to use the same amount of padding as we had in, say, the carousel, or in the features section, which 27 02:03.290 --> 02:10.900 is 7 percent top and bottom and 15 percent left and right. 28 02:10.940 --> 02:14.420 So now we’ve got a little bit of padding. Looking nice, 29 02:14.420 --> 02:15.010 right? 30 02:15.020 --> 02:18.940 So the next thing that you might want to address is the heading. 31 02:19.070 --> 02:22.030 It's far too small for a call to action. 32 02:22.040 --> 02:25.420 I mean as a call to action you want to grab people's attention, right, 33 02:25.450 --> 02:27.150 not be like an afterthought. 34 02:27.260 --> 02:34.210 So let's go ahead and change the style of that heading. So we've got an h3 here. 35 02:34.430 --> 02:43.190 But you can see we've already styled the h3 for the feature titles up here, so we can't really override 36 02:43.190 --> 02:43.640 this. 37 02:43.640 --> 02:45.030 So what do we do? 38 02:45.050 --> 02:47.700 Let's give it a custom class. 39 02:47.750 --> 02:54.650 Now the class I'm going to give it is cta-heading, and I'm just going to copy that over to here so that 40 02:54.650 --> 02:56.850 I can target it down here, 41 02:56.990 --> 03:03.860 cta-heading, and remember this is a class whereas this is an id. So I know I'm getting repetitive but 42 03:03.860 --> 03:06.470 it's really important you don't mess this up. 43 03:06.470 --> 03:13.220 All right so now we've got our cta-heading and we want to change our font-family to probably the 44 03:13.220 --> 03:18.040 heaviest Montserrat that we can find which is Montserrat-Black. 45 03:18.210 --> 03:25.580 And this is the same font as the one that we've got up here as our heading, 46 03:25.880 --> 03:32.280 so Montserrat-Black. And also we're going to change the font-size to maybe 3.5rem 47 03:32.330 --> 03:38.010 and the line-height to 1.5. 48 03:38.440 --> 03:41.200 So let's hit save, let's refresh. 49 03:41.290 --> 03:43.030 Massive call to action. 50 03:43.150 --> 03:44.190 Looks pretty good. 51 03:44.320 --> 03:48.470 So you'll notice that this looks very awkward being left aligned. 52 03:48.470 --> 03:55.990 So let's go ahead and fix that and go into the parent section and change text-align inside the parent 53 03:55.990 --> 03:58.470 container to be center. 54 03:58.480 --> 04:03.540 And now we have centered items and centered text. Next. 55 04:03.580 --> 04:04.890 What's the next thing that looks weird? 56 04:04.900 --> 04:07.650 Well the download buttons look pretty weird. 57 04:07.870 --> 04:10.600 So let's apply some Bootstrap styles. 58 04:10.600 --> 04:22.720 So let's add a class and let's give it the btn style and then btn-lg, then bth-dark, and then we 59 04:22.720 --> 04:31.510 will just simply copy and paste this icon from up here which is the Apple icon and we're going to put 60 04:31.510 --> 04:32.540 it here. 61 04:32.560 --> 04:37.910 And then again I'm going to copy the Google Play icon. 62 04:37.930 --> 04:41.900 Now of course you can go on to Font Awesome and get all of this fresh, 63 04:41.950 --> 04:46.560 but it's exactly the same so why not just reuse the code that we've already got? 64 04:46.780 --> 04:52.440 So now let's hit save and let's add a class to the second button. 65 04:52.510 --> 04:57.390 And this again is going to be btn, btn-lg, btn-light. 66 04:57.390 --> 04:59.400 So hit save and refresh. 67 04:59.450 --> 04:59.850 Nice. 68 04:59.860 --> 05:01.950 We've got some nice buttons now. 69 05:01.950 --> 05:06.880 They're a little bit too close to each other and too close to the heading. 70 05:07.030 --> 05:11.060 So we need to give it some custom CSS styles. 71 05:11.080 --> 05:16.510 Now you would notice that we've already applied some styles up at the top to give it a nice amount of 72 05:16.510 --> 05:20.530 separation and a bit of margin away from anything else. 73 05:20.530 --> 05:28.720 So, what if we just borrowed the class that we used up here which was download-button, and we simply 74 05:28.720 --> 05:37.850 straight up just applied it over here as is? Now let’s hit save, refresh, and that looks pretty good. 75 05:37.870 --> 05:41.230 So now we're pretty much done with the CTA section. 76 05:41.290 --> 05:43.790 All we have is the footer that's left. 77 05:43.960 --> 05:49.090 So the footer of course again needs a whole load of padding and we're going to use the same amount of 78 05:49.090 --> 05:54.930 padding as we had before to give the content the same amount of separation from the edges. 79 05:54.940 --> 06:02.110 So let's go ahead and check that we've got the footer with an id called footer so we can target it down 80 06:02.110 --> 06:02.700 here. 81 06:02.770 --> 06:11.990 And I'm just going to add the footer section comment and then I'm going to target the footer id and 82 06:11.990 --> 06:18.370 I'm going to give it a padding of, you got it, 7 percent and 15 percent. 83 06:18.380 --> 06:22.700 All right. So we now actually have a footer, which is pretty sweet. 84 06:22.790 --> 06:24.570 Again content needs to be centered. 85 06:24.590 --> 06:30.900 So let's add text-align center, centering our text. 86 06:31.130 --> 06:35.490 And finally we need to add some social icons from Font 87 06:35.510 --> 06:36.140 Awesome. 88 06:36.200 --> 06:37.640 So let's head over to Font 89 06:37.640 --> 06:38.230 Awesome 90 06:38.260 --> 06:39.950 / Icons, 91 06:40.100 --> 06:44.930 and we're going to grab Facebook, Twitter, 92 06:48.260 --> 06:53.730 Instagram and envelope. 93 06:53.770 --> 06:54.130 All right. 94 06:54.200 --> 06:54.810 Nice. 95 06:54.810 --> 07:08.470 So let's copy Facebook and put it in here into the footer. Then next one is Twitter. 96 07:08.680 --> 07:09.100 All right. 97 07:09.110 --> 07:14.020 Next one is Instagram. 98 07:14.150 --> 07:18.090 And finally our mailing option. 99 07:18.090 --> 07:18.860 All right. Cool. 100 07:18.870 --> 07:23.260 So now let's refresh our web site, and we now have icons. 101 07:23.480 --> 07:24.300 Pretty cool. 102 07:24.410 --> 07:30.530 Now the icons are a little bit too close to each other at the moment so we need a little bit of margin 103 07:30.890 --> 07:36.500 around each of them just to give it a bit of separation and not look so bunched up, 104 07:36.520 --> 07:39.430 and it’ll be difficult to click on individual ones at the moment. 105 07:39.500 --> 07:48.930 So let's give each of these icons another class. So I’m holding down the option button to engage the Sublime 106 07:48.980 --> 07:50.420 like selection, 107 07:50.420 --> 07:53.500 and I'm going to call this social-icon. 108 07:53.500 --> 07:54.130 All right. 109 07:54.290 --> 08:04.340 So now I can go into my styles.css and I can target the social-icon and give it a margin of, say, 110 08:04.670 --> 08:08.950 20 pixels top and bottom, 10 pixels left and right. 111 08:09.050 --> 08:09.360 All right. 112 08:09.380 --> 08:12.230 Now let's hit refresh and sweet. 113 08:12.410 --> 08:14.040 We have a footer. 114 08:14.390 --> 08:20.560 Now, if you look through your web site, this is a beauty of a startup web site. 115 08:20.570 --> 08:27.220 You could probably launch TinDog right now and start using this beautiful web site. 116 08:27.260 --> 08:31.820 It does not look out of place compared to any of the other startup web sites 117 08:31.850 --> 08:33.020 that you see these days. 118 08:33.020 --> 08:35.210 So I think we did a pretty good job. 119 08:35.260 --> 08:42.560 Now just to finish off the last thing I want to enable is to make these navigation buttons work and 120 08:42.590 --> 08:47.380 I want to show you why it is that we gave each section an id. 121 08:47.480 --> 08:55.910 So one of the things that you can do is you can use a href that's not a URL and it's not a page but 122 08:56.030 --> 08:57.380 it's an id. 123 08:57.400 --> 09:03.910 So because ids are unique, then what you can do here in the href for that button, 124 09:04.070 --> 09:12.110 so all the way at the top here in the button for Contact, you see that we left the href for the anchor 125 09:12.110 --> 09:13.400 tag blank. 126 09:13.400 --> 09:18.980 But what I'm going to put here now is I'm going to put in the id. So, remember, ids have to start with 127 09:18.980 --> 09:19.940 the pound sign. 128 09:20.270 --> 09:25.670 So you can see that for our footer section we've got an id that's unique, called footer. 129 09:25.700 --> 09:32.570 So if I head back to that anchor tag where I've got the href, if I want to target that section all 130 09:32.570 --> 09:37.550 I have to do is just to put in the pound sign to say that this is an id for an href and then put 131 09:37.550 --> 09:40.160 in the name of the id which is footer. 132 09:40.330 --> 09:47.990 And now if you hit save and refresh then, if I click on Contact, it will scroll all the way down to the 133 09:47.990 --> 09:51.220 footer section where the user can contact me. 134 09:51.230 --> 09:55.410 So let's go ahead and put in the other ones for pricing. 135 09:55.430 --> 09:58.440 So pricing was called pricing. 136 09:58.550 --> 09:59.730 Okay that's easy. 137 09:59.750 --> 10:07.310 So we're going to put in hash tag or pound sign pricing, and then download is of course going to be 138 10:07.340 --> 10:09.800 the cta section, Call To Action. 139 10:09.800 --> 10:12.270 So let's hit save and refresh. 140 10:12.410 --> 10:19.410 Now if we click on Pricing, it goes to pricing, Download, it goes to download, and it's pretty cool. 141 10:19.430 --> 10:27.740 So this is one of the reasons why you would want to use ids sparingly, because they can be really useful 142 10:27.920 --> 10:30.800 when you're trying to set up the navigation of your web site. 143 10:31.010 --> 10:37.010 And if you take a look at GitHub, and if you scroll through the documentation, you can see that each 144 10:37.010 --> 10:40.060 of the headings have a id. 145 10:40.100 --> 10:46.790 So if I right click on this and I hit Inspect, you can see that this one has an id of product-features. 146 10:46.880 --> 10:50.660 So you can see that this is the URL of the web page, 147 10:50.810 --> 10:57.650 and if you put in that pound sign, which stands for, of course, go to this particular id, and then you 148 10:57.650 --> 11:01.940 put in the name on the heading, that it navigates you straight there. 149 11:01.940 --> 11:07.610 So this works in the URL level as well as in the href. 150 11:07.610 --> 11:14.140 So that's yet another reason for why sometimes you see people use ids across their web pages. 151 11:14.180 --> 11:21.250 So in the next lesson we're going to be tidying up this mess that we've made around here in our CSS 152 11:21.260 --> 11:21.920 file. 153 11:21.920 --> 11:26.160 You might have noticed along the way that there's been a lot of code duplication, 154 11:26.180 --> 11:30.050 and, remember that, as a programmer, we're always trying to stay dry, 155 11:30.050 --> 11:30.520 right? 156 11:30.530 --> 11:32.230 Do not repeat yourself. 157 11:32.360 --> 11:38.840 So in the next lesson we're going to look at why we need to refactor our code on a regular basis, 158 11:38.990 --> 11:41.390 and what is the best way of doing that 159 11:41.420 --> 11:45.640 in our case. So for all of that and more, I'll see you on the next lesson.