1 00:00:01,060 --> 00:00:01,440 All right. 2 00:00:01,440 --> 00:00:04,890 So how did you get on with that challenge? 3 00:00:04,890 --> 00: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. 4 00:00:11,430 --> 00:00:14,100 Ding ding ding ding ding. 5 00:00:14,820 --> 00:00:19,620 But if you struggled, or if there was anything that was unclear, then I'm going to walk you through the 6 00:00:19,620 --> 00:00:23,210 solution, so that you can do it along with me. 7 00:00:23,210 --> 00: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 8 00:00:28,410 --> 00:00:35,370 terms of styling, and the first thing is to change the call to action section to a different background 9 00:00:35,370 --> 00:00:36,190 color. 10 00:00:36,210 --> 00: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 11 00:00:44,790 --> 00:00:48,330 this is the id that we can use to target that section. 12 00:00:48,330 --> 00:00:50,240 So if we scroll all the way down, 13 00:00:50,250 --> 00:00:59,690 but just before the media queries, we can add in a new section called the CTA section and we're going 14 00:00:59,690 --> 00:01:02,480 to comment it out and this is our new section. 15 00:01:02,480 --> 00: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 16 00:01:10,640 --> 00:01:15,000 color that we had before, which is ff4c68. 17 00:01:15,110 --> 00:01:18,480 So let's hit save and check it out. 18 00:01:18,620 --> 00:01:18,850 All right. 19 00:01:18,860 --> 00:01:19,700 Looks good. 20 00:01:19,700 --> 00:01:26,810 Now we mentioned previously that whenever a background is colored we want the text to be white and not 21 00:01:26,810 --> 00:01:29,870 black because it doesn't look contrasty enough. 22 00:01:29,870 --> 00:01:34,820 So let's go ahead and add some text color and we're going to make it fff. 23 00:01:35,120 --> 00:01:38,390 And now we have white text instead of black text. 24 00:01:38,450 --> 00:01:47,090 Now currently our content of this section is pretty much stuck to the left and the top and the bottom 25 00:01:47,180 --> 00:01:49,570 and it's all too squished together. 26 00:01:49,640 --> 00:01:55,850 So let's give this section some padding like what we've done for all the previous sections. So we're 27 00:01:55,850 --> 00:02:03,110 going to use the same amount of padding as we had in, say, the carousel, or in the features section, which 28 00:02:03,290 --> 00:02:10,900 is 7 percent top and bottom and 15 percent left and right. 29 00:02:10,940 --> 00:02:14,420 So now we’ve got a little bit of padding. Looking nice, 30 00:02:14,420 --> 00:02:15,010 right? 31 00:02:15,020 --> 00:02:18,940 So the next thing that you might want to address is the heading. 32 00:02:19,070 --> 00:02:22,030 It's far too small for a call to action. 33 00:02:22,040 --> 00:02:25,420 I mean as a call to action you want to grab people's attention, right, 34 00:02:25,450 --> 00:02:27,150 not be like an afterthought. 35 00:02:27,260 --> 00:02:34,210 So let's go ahead and change the style of that heading. So we've got an h3 here. 36 00:02:34,430 --> 00: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 37 00:02:43,190 --> 00:02:43,640 this. 38 00:02:43,640 --> 00:02:45,030 So what do we do? 39 00:02:45,050 --> 00:02:47,700 Let's give it a custom class. 40 00:02:47,750 --> 00: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 41 00:02:54,650 --> 00:02:56,850 I can target it down here, 42 00:02:56,990 --> 00:03:03,860 cta-heading, and remember this is a class whereas this is an id. So I know I'm getting repetitive but 43 00:03:03,860 --> 00:03:06,470 it's really important you don't mess this up. 44 00:03:06,470 --> 00:03:13,220 All right so now we've got our cta-heading and we want to change our font-family to probably the 45 00:03:13,220 --> 00:03:18,040 heaviest Montserrat that we can find which is Montserrat-Black. 46 00:03:18,210 --> 00:03:25,580 And this is the same font as the one that we've got up here as our heading, 47 00:03:25,880 --> 00:03:32,280 so Montserrat-Black. And also we're going to change the font-size to maybe 3.5rem 48 00:03:32,330 --> 00:03:38,010 and the line-height to 1.5. 49 00:03:38,440 --> 00:03:41,200 So let's hit save, let's refresh. 50 00:03:41,290 --> 00:03:43,030 Massive call to action. 51 00:03:43,150 --> 00:03:44,190 Looks pretty good. 52 00:03:44,320 --> 00:03:48,470 So you'll notice that this looks very awkward being left aligned. 53 00:03:48,470 --> 00:03:55,990 So let's go ahead and fix that and go into the parent section and change text-align inside the parent 54 00:03:55,990 --> 00:03:58,470 container to be center. 55 00:03:58,480 --> 00:04:03,540 And now we have centered items and centered text. Next. 56 00:04:03,580 --> 00:04:04,890 What's the next thing that looks weird? 57 00:04:04,900 --> 00:04:07,650 Well the download buttons look pretty weird. 58 00:04:07,870 --> 00:04:10,600 So let's apply some Bootstrap styles. 59 00:04:10,600 --> 00: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 60 00:04:22,720 --> 00: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 61 00:04:31,510 --> 00:04:32,540 it here. 62 00:04:32,560 --> 00:04:37,910 And then again I'm going to copy the Google Play icon. 63 00:04:37,930 --> 00:04:41,900 Now of course you can go on to Font Awesome and get all of this fresh, 64 00:04:41,950 --> 00:04:46,560 but it's exactly the same so why not just reuse the code that we've already got? 65 00:04:46,780 --> 00:04:52,440 So now let's hit save and let's add a class to the second button. 66 00:04:52,510 --> 00:04:57,390 And this again is going to be btn, btn-lg, btn-light. 67 00:04:57,390 --> 00:04:59,400 So hit save and refresh. 68 00:04:59,450 --> 00:04:59,850 Nice. 69 00:04:59,860 --> 00:05:01,950 We've got some nice buttons now. 70 00:05:01,950 --> 00:05:06,880 They're a little bit too close to each other and too close to the heading. 71 00:05:07,030 --> 00:05:11,060 So we need to give it some custom CSS styles. 72 00:05:11,080 --> 00: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 73 00:05:16,510 --> 00:05:20,530 separation and a bit of margin away from anything else. 74 00:05:20,530 --> 00:05:28,720 So, what if we just borrowed the class that we used up here which was download-button, and we simply 75 00:05:28,720 --> 00:05:37,850 straight up just applied it over here as is? Now let’s hit save, refresh, and that looks pretty good. 76 00:05:37,870 --> 00:05:41,230 So now we're pretty much done with the CTA section. 77 00:05:41,290 --> 00:05:43,790 All we have is the footer that's left. 78 00:05:43,960 --> 00: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 79 00:05:49,090 --> 00:05:54,930 padding as we had before to give the content the same amount of separation from the edges. 80 00:05:54,940 --> 00: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 81 00:06:02,110 --> 00:06:02,700 here. 82 00:06:02,770 --> 00: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 83 00:06:11,990 --> 00:06:18,370 I'm going to give it a padding of, you got it, 7 percent and 15 percent. 84 00:06:18,380 --> 00:06:22,700 All right. So we now actually have a footer, which is pretty sweet. 85 00:06:22,790 --> 00:06:24,570 Again content needs to be centered. 86 00:06:24,590 --> 00:06:30,900 So let's add text-align center, centering our text. 87 00:06:31,130 --> 00:06:35,490 And finally we need to add some social icons from Font 88 00:06:35,510 --> 00:06:36,140 Awesome. 89 00:06:36,200 --> 00:06:37,640 So let's head over to Font 90 00:06:37,640 --> 00:06:38,230 Awesome 91 00:06:38,260 --> 00:06:39,950 / Icons, 92 00:06:40,100 --> 00:06:44,930 and we're going to grab Facebook, Twitter, 93 00:06:48,260 --> 00:06:53,730 Instagram and envelope. 94 00:06:53,770 --> 00:06:54,130 All right. 95 00:06:54,200 --> 00:06:54,810 Nice. 96 00:06:54,810 --> 00:07:08,470 So let's copy Facebook and put it in here into the footer. Then next one is Twitter. 97 00:07:08,680 --> 00:07:09,100 All right. 98 00:07:09,110 --> 00:07:14,020 Next one is Instagram. 99 00:07:14,150 --> 00:07:18,090 And finally our mailing option. 100 00:07:18,090 --> 00:07:18,860 All right. Cool. 101 00:07:18,870 --> 00:07:23,260 So now let's refresh our web site, and we now have icons. 102 00:07:23,480 --> 00:07:24,300 Pretty cool. 103 00:07:24,410 --> 00: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 104 00:07:30,890 --> 00:07:36,500 around each of them just to give it a bit of separation and not look so bunched up, 105 00:07:36,520 --> 00:07:39,430 and it’ll be difficult to click on individual ones at the moment. 106 00:07:39,500 --> 00: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 107 00:07:48,980 --> 00:07:50,420 like selection, 108 00:07:50,420 --> 00:07:53,500 and I'm going to call this social-icon. 109 00:07:53,500 --> 00:07:54,130 All right. 110 00:07:54,290 --> 00: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, 111 00:08:04,670 --> 00:08:08,950 20 pixels top and bottom, 10 pixels left and right. 112 00:08:09,050 --> 00:08:09,360 All right. 113 00:08:09,380 --> 00:08:12,230 Now let's hit refresh and sweet. 114 00:08:12,410 --> 00:08:14,040 We have a footer. 115 00:08:14,390 --> 00:08:20,560 Now, if you look through your web site, this is a beauty of a startup web site. 116 00:08:20,570 --> 00:08:27,220 You could probably launch TinDog right now and start using this beautiful web site. 117 00:08:27,260 --> 00:08:31,820 It does not look out of place compared to any of the other startup web sites 118 00:08:31,850 --> 00:08:33,020 that you see these days. 119 00:08:33,020 --> 00:08:35,210 So I think we did a pretty good job. 120 00:08:35,260 --> 00:08:42,560 Now just to finish off the last thing I want to enable is to make these navigation buttons work and 121 00:08:42,590 --> 00:08:47,380 I want to show you why it is that we gave each section an id. 122 00:08:47,480 --> 00: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 123 00:08:56,030 --> 00:08:57,380 it's an id. 124 00:08:57,400 --> 00:09:03,910 So because ids are unique, then what you can do here in the href for that button, 125 00:09:04,070 --> 00: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 126 00:09:12,110 --> 00:09:13,400 tag blank. 127 00:09:13,400 --> 00: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 128 00:09:18,980 --> 00:09:19,940 the pound sign. 129 00:09:20,270 --> 00:09:25,670 So you can see that for our footer section we've got an id that's unique, called footer. 130 00:09:25,700 --> 00: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 131 00:09:32,570 --> 00: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 132 00:09:37,550 --> 00:09:40,160 in the name of the id which is footer. 133 00:09:40,330 --> 00: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 134 00:09:47,990 --> 00:09:51,220 footer section where the user can contact me. 135 00:09:51,230 --> 00:09:55,410 So let's go ahead and put in the other ones for pricing. 136 00:09:55,430 --> 00:09:58,440 So pricing was called pricing. 137 00:09:58,550 --> 00:09:59,730 Okay that's easy. 138 00:09:59,750 --> 00: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 139 00:10:07,340 --> 00:10:09,800 the cta section, Call To Action. 140 00:10:09,800 --> 00:10:12,270 So let's hit save and refresh. 141 00:10:12,410 --> 00:10:19,410 Now if we click on Pricing, it goes to pricing, Download, it goes to download, and it's pretty cool. 142 00:10:19,430 --> 00:10:27,740 So this is one of the reasons why you would want to use ids sparingly, because they can be really useful 143 00:10:27,920 --> 00:10:30,800 when you're trying to set up the navigation of your web site. 144 00:10:31,010 --> 00:10:37,010 And if you take a look at GitHub, and if you scroll through the documentation, you can see that each 145 00:10:37,010 --> 00:10:40,060 of the headings have a id. 146 00:10:40,100 --> 00: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. 147 00:10:46,880 --> 00:10:50,660 So you can see that this is the URL of the web page, 148 00:10:50,810 --> 00:10:57,650 and if you put in that pound sign, which stands for, of course, go to this particular id, and then you 149 00:10:57,650 --> 00:11:01,940 put in the name on the heading, that it navigates you straight there. 150 00:11:01,940 --> 00:11:07,610 So this works in the URL level as well as in the href. 151 00:11:07,610 --> 00:11:14,140 So that's yet another reason for why sometimes you see people use ids across their web pages. 152 00:11:14,180 --> 00: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 153 00:11:21,260 --> 00:11:21,920 file. 154 00:11:21,920 --> 00:11:26,160 You might have noticed along the way that there's been a lot of code duplication, 155 00:11:26,180 --> 00:11:30,050 and, remember that, as a programmer, we're always trying to stay dry, 156 00:11:30,050 --> 00:11:30,520 right? 157 00:11:30,530 --> 00:11:32,230 Do not repeat yourself. 158 00:11:32,360 --> 00: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, 159 00:11:38,990 --> 00:11:41,390 and what is the best way of doing that 160 00:11:41,420 --> 00:11:45,640 in our case. So for all of that and more, I'll see you on the next lesson.