0 1 00:00:00,600 --> 00:00:06,470 So, the first thing I want to do is, I want to structure our code so that we keep all of our HTML 1 2 00:00:06,570 --> 00:00:08,600 element selectors together. 2 3 00:00:08,610 --> 00:00:11,890 So we've got the body up here and we've got a row of red. 3 4 00:00:11,940 --> 00:00:15,430 This is just something I like to do because it's so much easier to navigate. 4 5 00:00:15,450 --> 00:00:20,130 And when you're trying to find things it can be such a pain when you've got things dotted all over the 5 6 00:00:20,130 --> 00:00:22,000 place, especially in your CSS. 6 7 00:00:22,260 --> 00:00:29,010 So, now that we've got all of these HTML elements up here, you'll realize that some of these are actually 7 8 00:00:29,010 --> 00:00:30,620 doing very specific things. 8 9 00:00:30,630 --> 00:00:36,900 For example, this section of code, even though it’s targeting all of the h1s, it's actually only really 9 10 00:00:36,900 --> 00:00:41,460 applying the style specifically for this title here. 10 11 00:00:41,490 --> 00:00:45,490 So these styles should not really be applied to the h1. 11 12 00:00:45,510 --> 00:00:51,540 Instead it should be applied more specifically to a type of heading. The kind of styles that you want to 12 13 00:00:51,540 --> 00:00:59,850 place across all of the h1, h2 and h3 are very very broad, things like, you know, font-family maybe, or 13 14 00:00:59,880 --> 00:01:01,090 a particular color 14 15 00:01:01,110 --> 00:01:07,320 if you have a color scheme. You don't want specific things like, you know, a font size or a line height, because 15 16 00:01:07,320 --> 00:01:13,000 that's something that should really occur more specifically to a particular class. 16 17 00:01:13,020 --> 00:01:16,450 So let's go ahead and change this. Instead of targeting the h1, 17 18 00:01:16,470 --> 00:01:21,860 I'm going to add a class to the h1 and I'm going to call it big-heading. 18 19 00:01:21,900 --> 00:01:27,960 So this is the biggest heading that we have basically and I'm going to place that class somewhere down 19 20 00:01:27,960 --> 00:01:35,490 here and I'm going to have a section that's dedicated to headings and this one is the big-heading. 20 21 00:01:35,610 --> 00:01:40,980 So the big-heading is basically going to be all of this code, so I'm going to cut it and then I'm going 21 22 00:01:40,980 --> 00:01:42,840 to paste it in here. 22 23 00:01:43,110 --> 00:01:47,370 So now what should we use the h1, h2, h3 selectors for? 23 24 00:01:47,380 --> 00:01:54,030 Well, you might notice that a lot of these elements already have the font-family Montserrat-Bold inside 24 25 00:01:54,030 --> 00:01:54,540 them. 25 26 00:01:54,540 --> 00:02:01,740 So it's worth actually targeting all of the heading elements, so h1 through to h6, and giving it the 26 27 00:02:01,740 --> 00:02:05,700 same font-family that you would want for a heading. 27 28 00:02:06,000 --> 00:02:14,690 And we can do that quite easily by simply saying h1, h2, h3, h4, h5, h6. 28 29 00:02:14,970 --> 00:02:21,990 And what this does is it applies the CSS rules inside these curly brackets to all of these heading 29 30 00:02:21,990 --> 00:02:22,540 types. 30 31 00:02:22,710 --> 00:02:29,470 And it's the equivalent of basically saying h1, font-family is Montserrat-Bold, 31 32 00:02:29,500 --> 00:02:38,430 h2, font-family is Montserrat-Bold, h3, and instead all we need to do is just to put it inside here. 32 33 00:02:38,490 --> 00:02:43,480 And that applies that font-family to all of the headings that we have. 33 34 00:02:43,500 --> 00:02:50,100 And this makes a lot of sense because if all of our headings have the default font of Montserrat-Bold and 34 35 00:02:50,130 --> 00:02:56,910 all of our bodies for the rest of the text has the font-family Montserrat, then it's very easy to customize 35 36 00:02:57,690 --> 00:03:00,870 the appearance of individual headings from there on out. 36 37 00:03:01,020 --> 00:03:06,860 So now we can delete all of this and this and this. 37 38 00:03:06,870 --> 00:03:08,390 So less repetition, 38 39 00:03:08,430 --> 00:03:13,390 much better structure, and more modular code. 39 40 00:03:13,500 --> 00:03:16,280 So those are the things that we are aiming for. 40 41 00:03:16,410 --> 00:03:23,520 Now if we go ahead and hit save and refresh our web site, now we're not expecting to see any changes. 41 42 00:03:23,520 --> 00:03:25,320 We're refactoring the code. 42 43 00:03:25,320 --> 00:03:26,910 We're not trying to change the style. 43 44 00:03:26,910 --> 00:03:30,000 In fact, if it does change then we might have broken something, 44 45 00:03:30,000 --> 00:03:36,610 and we have to check regularly to make sure that our refactoring is not breaking our web site. 45 46 00:03:37,200 --> 00:03:43,160 So let's head back and let's look at the next thing we've got here which is the h2. 46 47 00:03:43,170 --> 00:03:45,500 Now let's take a look at where they occur. 47 48 00:03:45,510 --> 00:03:49,280 So we've got some of these which are the testimonials. 48 49 00:03:49,440 --> 00:03:54,910 And then we've got other ones which are the section headings. 49 50 00:03:55,080 --> 00:03:59,970 We've got another one which is the price in our pricing table. 50 51 00:03:59,970 --> 00:04:08,580 So, instead of having an h2 where we add all of these styles, I would recommend to actually give each 51 52 00:04:08,580 --> 00:04:12,050 of these h2s a specific class. 52 53 00:04:12,060 --> 00:04:20,820 So, in this case, this class might be called price-text and we can add the same class to all three of 53 54 00:04:20,880 --> 00:04:23,010 the price text h2s. 54 55 00:04:25,950 --> 00:04:33,600 And then we can go into our styles.css, find the pricing section, and then target the price-text and 55 56 00:04:33,660 --> 00:04:42,880 change its font-size to 3rem and line-height to 1.5. 56 57 00:04:43,770 --> 00:04:50,520 And let's go back over here and refresh and just make sure that we haven't broken anything, looks exactly 57 58 00:04:50,520 --> 00:04:51,050 the same, 58 59 00:04:51,060 --> 00:04:58,200 so that's all good, and then we can head back and we look for the next place where we used an h2. 59 60 00:04:59,680 --> 00:05:03,750 So the other place are these testimonial titles. 60 61 00:05:03,810 --> 00:05:11,160 So let's go ahead and add a class here, and we'll just call it testimonial-text, and I'm going to add 61 62 00:05:11,160 --> 00:05:15,520 that class to the other testimonial also, which is here. 62 63 00:05:15,990 --> 00:05:22,040 And then we're going to hit save and we're going to go and find the testimonial section and we're going 63 64 00:05:22,120 --> 00:05:32,370 to add the class selector testimonial-text, and we're going to say that the font-size is 3rem and the 64 65 00:05:32,370 --> 00:05:39,040 line-height is 1.5. And the last place where we've got an h2 is this section heading. 65 66 00:05:39,090 --> 00:05:45,600 So I'm just going to give it the class of section-heading, and this means that if we decide at a later 66 67 00:05:45,600 --> 00:05:51,900 date to give our web site more sections, sections that require section headings, then we can apply the 67 68 00:05:51,900 --> 00:05:58,130 same style by simply adding this class to whatever new section we need to create. 68 69 00:05:58,380 --> 00:06:00,000 So now let's go in here, 69 70 00:06:00,000 --> 00:06:05,340 and, in the headings section we've got up here, we've got a big-heading and we're now going to add our 70 71 00:06:05,340 --> 00:06:14,840 section-heading, which is going to have a font-size of 3rem and a line-height of 1.5 rem. 71 72 00:06:14,850 --> 00:06:18,410 So now we're able to delete this h2. 72 73 00:06:18,570 --> 00:06:25,470 And you might be wondering why I'm going to all this trouble of essentially, you know, kind of going back 73 74 00:06:25,470 --> 00:06:26,930 on what I said earlier, right? 74 75 00:06:26,940 --> 00:06:28,780 We said, ‘Don't repeat yourself’, 75 76 00:06:28,830 --> 00:06:32,810 and that's important when you're trying to refactor your code. 76 77 00:06:33,000 --> 00:06:38,850 But, at the same time, say if you're looking at your web site and you realize, wait a minute, there's something 77 78 00:06:38,850 --> 00:06:42,720 a little bit wrong with, you know, this part of the text. 78 79 00:06:42,750 --> 00:06:50,520 Well, then it's as easy as going to Inspect and finding the class that we've got here which is testimonial- 79 80 00:06:50,520 --> 00:06:51,370 text, 80 81 00:06:51,380 --> 00:06:58,740 then scrolling to the right section, and we know exactly which part of our code affects the style of 81 82 00:06:58,830 --> 00:06:59,820 that section. 82 83 00:06:59,910 --> 00:07:06,790 And it's very unlikely that on your web site that’s the same at the h1 and h2 level. 83 84 00:07:06,840 --> 00:07:13,500 So this is what we mean about modularity, so it allows you to drill down on a specific section very very 84 85 00:07:13,500 --> 00:07:20,220 easily and figure out what the problems are or change the style of one particular section without affecting 85 86 00:07:20,250 --> 00:07:22,290 the rest of the web site. 86 87 00:07:22,290 --> 00:07:27,540 Now the last heading element that we've got here is an h3. 87 88 00:07:27,630 --> 00:07:32,000 And in our case we're setting the font size to 1.5 rem. 88 89 00:07:32,130 --> 00:07:39,720 So let's check the h3s that we've got on our page. And we've got some of these h3s for our card-header. 89 90 00:07:40,020 --> 00:07:49,080 And then we've got some h3s for our CTA heading, which is actually overwritten with the cta-heading 90 91 00:07:49,620 --> 00:07:51,850 class over here. 91 92 00:07:52,350 --> 00:07:57,150 And we've got one more h3 which are the feature titles. 92 93 00:07:57,150 --> 00:08:06,060 So it might be a good idea to add a class here and we call it feature-title, and we can 93 94 00:08:06,060 --> 00:08:11,100 apply this class to all three of these feature titles. 94 95 00:08:13,210 --> 00:08:21,010 And now, if we go into our features section, we can target the feature-title and we can update its style to 95 96 00:08:21,010 --> 00:08:32,210 have the font-size 1.5rem, and we can now delete this rather specific h3 styling. 96 97 00:08:32,400 --> 00:08:40,170 So now all of our HTML elements are pretty much doing very very broad stroke across the web site 97 98 00:08:40,200 --> 00:08:43,830 type of styling, and there's nothing specific in here. 98 99 00:08:43,830 --> 00:08:50,730 Whenever you're trying to apply some specific styles you probably want to ask yourself if you want to 99 100 00:08:50,730 --> 00:08:52,190 use a class. 100 101 00:08:52,410 --> 00:08:58,340 Now, in our case, I've been a little bit lazy about adding classes as we're going along with our coding, 101 102 00:08:58,560 --> 00:09:04,350 all because I wanted to save up all of this juicy goodness for our refactoring lesson, 102 103 00:09:04,350 --> 00:09:10,830 but normally what you would do is, as you go along, as you're writing the code and as you realize opportunities 103 104 00:09:10,830 --> 00:09:16,440 for refactoring, you would do it there and then, rather than waiting for some large refactoring session 104 105 00:09:16,440 --> 00:09:20,340 that's probably always going to be procrastinated on and it's never going to happen. 105 106 00:09:20,340 --> 00:09:20,600 All right. 106 107 00:09:20,610 --> 00:09:26,730 So the other thing that we noticed while we were scrolling through our HTML code was that if we look 107 108 00:09:26,730 --> 00:09:31,250 at the CTA heading here, it's got a class of cta-heading, 108 109 00:09:31,260 --> 00:09:37,050 but actually, if you look at it, it's basically the same as our big-heading. 109 110 00:09:37,050 --> 00:09:43,590 So in this case this kind of repetition is not really necessary because we can simply give it the rather 110 111 00:09:43,590 --> 00:09:53,700 specific class of big-heading. And you'll see that nothing changes here because the same CSS style is 111 112 00:09:53,790 --> 00:10:00,990 specified inside the cta-heading and also inside the big-heading. And this is almost like, you know how 112 113 00:10:00,990 --> 00:10:07,230 we're using Bootstrap classes which have defined specific styles for different types of headings or 113 114 00:10:07,290 --> 00:10:11,000 buttons and all we need to do is just add the class, 114 115 00:10:11,100 --> 00:10:13,200 well, we're kind of doing this for ourselves. 115 116 00:10:13,290 --> 00:10:15,700 We want our big headings to look a particular way, 116 117 00:10:15,720 --> 00:10:21,670 our section headings to look another way, and we can reuse these classes across our web site. 117 118 00:10:21,720 --> 00:10:27,840 Now the next thing that will be a bit of an eyesore that you might have noticed while you're scrolling 118 119 00:10:27,840 --> 00:10:34,770 through the web site is that you see text-align center. Let’s just control or command find that, and you 119 120 00:10:34,770 --> 00:10:42,450 can see that there's seven instances where we had to declare text-align center, text-align center, all 120 121 00:10:42,450 --> 00:10:43,240 over the place. 121 122 00:10:43,260 --> 00:10:49,410 So if it's occurring this commonly, and it's pretty much in every single section that we've had 122 123 00:10:49,410 --> 00:10:57,150 to add text-align center, then it makes sense to simply add this web site wide. So we can make the entire 123 124 00:10:57,150 --> 00:11:00,200 body of our web site text-align, 124 125 00:11:00,360 --> 00:11:04,140 and that way we can delete all of these other instances. 125 126 00:11:09,630 --> 00:11:15,210 But remember to keep the one inside your media query, because that's a different use case, that's for 126 127 00:11:15,240 --> 00:11:17,870 when our title goes into the mobile mode. 127 128 00:11:17,880 --> 00:11:20,500 We still want to change it to text-align center. 128 129 00:11:20,700 --> 00:11:27,280 So let's hit save and refresh and you'll see that not much has happened, which is good, 129 130 00:11:27,420 --> 00:11:34,710 apart from the fact that our title section is now text-align centered and no longer text-align left, 130 131 00:11:35,040 --> 00:11:39,080 which looks kind of weird. But that's no problem. 131 132 00:11:39,090 --> 00:11:45,440 It's much easier to write text-align left once, rather than write text-align center seven times, 132 133 00:11:45,450 --> 00:11:45,990 right? 133 134 00:11:46,260 --> 00:11:54,750 So inside our title section we're going to set the text-align to left, and now everything is good as 134 135 00:11:54,760 --> 00:11:55,620 gold. 135 136 00:11:55,620 --> 00:12:07,790 The other thing that we see repeated pretty much across our CSS is this padding 7 percent 15 percent. 136 137 00:12:08,370 --> 00:12:16,650 And if I hit find then you see we've actually specified it in four places and we’ve repeated our code sort 137 138 00:12:16,650 --> 00:12:18,900 of needlessly like this. 138 139 00:12:18,900 --> 00:12:28,140 So this kind of padding is usually the container's job, but in our case the container-fluid has kind 139 140 00:12:28,140 --> 00:12:32,820 of been adapted specifically for our title section. 140 141 00:12:32,850 --> 00:12:40,140 This is the only place in our HTML where we've used container-fluid so far, because we've made the 141 142 00:12:40,140 --> 00:12:47,160 style too specific for this section, whereas it's meant to be something that you should really reuse. 142 143 00:12:47,160 --> 00:12:55,950 So let's change container-fluid to 7 percent top and bottom and 15 percent left and right, and then let's 143 144 00:12:55,980 --> 00:13:04,350 put some container-fluids around all of the areas where we had this particular padding style specified. 144 145 00:13:04,350 --> 00:13:06,630 So the first one is inside features. 145 146 00:13:06,780 --> 00:13:17,500 So let's scroll to the features section and let's add a div that is a container-fluid and move the closing div 146 147 00:13:17,890 --> 00:13:19,530 down to the bottom. 147 148 00:13:19,560 --> 00:13:23,110 All right. And then let's go on to the next one. 148 149 00:13:23,140 --> 00:13:25,280 Next one is the carousel-item. 149 150 00:13:25,330 --> 00:13:27,970 So let's find the carousel. 150 151 00:13:27,970 --> 00:13:31,080 It should be inside the testimonial section. 151 152 00:13:31,120 --> 00:13:33,540 So here's our carousel-item. 152 153 00:13:33,610 --> 00:13:40,060 And instead of applying the style of 7 percent top and bottom 15 percent left and right to the carousel- 153 154 00:13:40,060 --> 00:13:49,690 item, all we need to do is just add container-fluid to the list of classes for this div. And we're going 154 155 00:13:49,690 --> 00:13:57,980 to do it over here as well so that both carousel-item divs also have this container-fluid. 155 156 00:13:58,060 --> 00:14:01,350 Make sure that you don't have any typos like I just did just there. 156 157 00:14:01,510 --> 00:14:07,290 So let's go to the next place where we've got our padding 7 and 15, so that's the cta and the footer, 157 158 00:14:07,300 --> 00:14:09,160 and I think that's the last of it. 158 159 00:14:09,190 --> 00:14:16,480 So let's go to our cta section and add a div that is going to be container-fluid, 159 160 00:14:18,840 --> 00:14:21,360 and the same in our footer. 160 161 00:14:25,800 --> 00:14:31,560 And I'm just going to beautify our code so that it's a little bit easier to see. 161 162 00:14:31,710 --> 00:14:38,430 So now that we've narrowed down all of our padding 7 and 15 percent so all the places where this occurs 162 163 00:14:38,790 --> 00:14:42,740 then it's a good time to delete it because we no longer need it. 163 164 00:14:42,810 --> 00:14:47,360 It's now covered by the container-fluid. 164 165 00:14:47,610 --> 00:14:52,840 And in fact if you do keep it you end up with two sets of paddings which is not what you want. 165 166 00:14:55,660 --> 00:14:59,570 So now there's just one found and that's for the container-fluid. 166 167 00:14:59,680 --> 00:15:01,030 So that's perfect. 167 168 00:15:01,030 --> 00:15:06,100 So now if we hit save and refresh our web site still looks OK. 168 169 00:15:06,370 --> 00:15:14,080 Now the only one that doesn't look the same is our title. Because the container-fluid has 7 percent top 169 170 00:15:14,430 --> 00:15:22,770 and bottom padding, then it pushes down our nav bar by quite a bit at the top, which is not what we want. 170 171 00:15:22,840 --> 00:15:24,510 So how can we change this? 171 172 00:15:24,550 --> 00:15:32,380 Well, let's inspect using our Chrome Developer Tools, and you can see that we've got this container-fluid 172 173 00:15:32,380 --> 00:15:40,160 here that has all of that padding at the top, 100 at the top, 100 at the bottom, which is roughly the 7 percent. 173 174 00:15:40,450 --> 00:15:45,770 So all we need to do is to change this to a value that's a lot lower. 174 175 00:15:45,880 --> 00:15:50,090 So let's say, I don't know, say 3 percent, right? 175 176 00:15:50,120 --> 00:15:52,920 And we restore it to the previous look. 176 177 00:15:52,970 --> 00:15:55,910 So how can we implement this in our code? 177 178 00:15:55,970 --> 00:16:02,480 Well, one way of doing it would be, let's say that we decided, oh, you know what, I'm going to abandon this 178 179 00:16:02,480 --> 00:16:04,040 class, container-fluid. 179 180 00:16:04,130 --> 00:16:09,530 I'm going to give it a custom class like title-container or something else like that. 180 181 00:16:09,530 --> 00:16:15,200 But remember container-fluid is actually a Bootstrap class, which is quite helpful when we're keeping 181 182 00:16:15,200 --> 00:16:17,540 our web site responsive and all of that. 182 183 00:16:17,570 --> 00:16:23,440 So we do want to keep it and we don't want to just, you know, give up and give it a custom class. 183 184 00:16:23,450 --> 00:16:25,580 So how else can we do this? 184 185 00:16:25,640 --> 00:16:33,550 Well, what if we changed the padding for title? What if we targeted this specific id instead of the container- 185 186 00:16:33,550 --> 00:16:34,480 fluid? 186 187 00:16:34,700 --> 00:16:36,800 Well that doesn't really work. 187 188 00:16:36,800 --> 00:16:37,900 Let me show you why. 188 189 00:16:37,910 --> 00:16:44,120 So, at the moment we've got the container-fluid selected, but now I'm going to select the title section 189 190 00:16:44,600 --> 00:16:52,760 and, if I change the padding up here to 3 percent, you'll see that it'll actually add more padding on top 190 191 00:16:52,820 --> 00:16:55,050 of the padding that we've got for the container. 191 192 00:16:55,190 --> 00:17:02,090 So now the container-fluid has some padding and the the title section has some padding, so that doesn't 192 193 00:17:02,090 --> 00:17:02,820 work either. 193 194 00:17:02,820 --> 00:17:08,410 We're not overriding this by adding a padding to another HTML element. 194 195 00:17:08,420 --> 00:17:11,330 So what can we do? 195 196 00:17:11,330 --> 00:17:16,930 Well, we can combine some selectors in order to say that, 196 197 00:17:17,090 --> 00:17:17,420 all right, 197 198 00:17:17,420 --> 00:17:21,210 so the general container-fluid should have this padding, 198 199 00:17:21,650 --> 00:17:25,280 but in the title section, 199 200 00:17:25,280 --> 00:17:33,340 so let's make sure that we actually have a title section that's commented out and let's move our container- 200 201 00:17:33,340 --> 00:17:38,320 fluid up here because it's no longer just belonging in the title section, right? 201 202 00:17:38,360 --> 00:17:47,210 And we'll call this Containers, and I'm going to move the title section to below the navigation bar, say 202 203 00:17:47,300 --> 00:17:54,140 around here, so that it's together with the title image and the download buttons. 203 204 00:17:54,140 --> 00:17:59,870 All right. So instead of adding the padding to our title section, what we're going to do is that we're 204 205 00:17:59,870 --> 00:18:06,320 going to select the container-fluid, but we're going to say that we only want to change the style of 205 206 00:18:06,320 --> 00:18:13,850 the container-fluid, and we're going to set it to have a different padding of say 3 percent at the top, 206 207 00:18:14,150 --> 00:18:18,050 15 percent left and right and 7 percent at the bottom. 207 208 00:18:18,050 --> 00:18:23,780 But this is going to apply this padding to all of the container-fluids, and that will conflict with 208 209 00:18:23,780 --> 00:18:26,080 our previous container-fluid selector. 209 210 00:18:26,240 --> 00:18:34,940 But what we can do is we can say that for the container-fluid class that is contained inside the title 210 211 00:18:34,940 --> 00:18:39,380 section then apply this specific padding. 211 212 00:18:39,680 --> 00:18:46,640 And because this rule is more specific than the one that only targets the container-fluid class, then 212 213 00:18:46,670 --> 00:18:49,430 this will override the previous one. 213 214 00:18:49,430 --> 00:18:51,330 So now let's hit save. 214 215 00:18:51,440 --> 00:18:57,320 And if you refresh, then you can see that we've gotten back our previous layout for our top container- 215 216 00:18:57,320 --> 00:18:57,870 fluid. 216 217 00:18:58,010 --> 00:19:03,770 And if you inspect, and you click on the container-fluid in this top section, you can see that the previous 217 218 00:19:03,770 --> 00:19:08,520 padding was overridden by the more specific one that we created just now. 218 219 00:19:08,630 --> 00:19:14,920 And I'm just going to pause here for a moment because I want to explain to you how you would combine 219 220 00:19:14,930 --> 00:19:18,800 selectors in CSS. So, to learn about that and more, 220 221 00:19:18,850 --> 00:19:19,910 I’ll see you on the next lesson.