1 00:00:00,420 --> 00:00:06,930 Now we're getting really, really close to the end result now, and all we need to do is start getting 2 00:00:06,930 --> 00:00:12,870 our skills section laid out in a way that looks a little bit better than this. 3 00:00:13,260 --> 00:00:18,420 So the first thing to notice is that if I switch on Pesticide, you can see that we've got the skill 4 00:00:18,420 --> 00:00:18,930 section, 5 00:00:19,260 --> 00:00:22,320 and inside the skill section, there's two divs. 6 00:00:22,590 --> 00:00:26,880 And if you look in the code, then you'll see exactly the same structure here. 7 00:00:27,150 --> 00:00:34,800 So this div is the skills div which contains two further divs, which are the skill rows. 8 00:00:35,100 --> 00:00:42,720 And if you prefer to visualize this a little bit easier by seeing which is the opening tag for the div 9 00:00:42,720 --> 00:00:44,250 and which one is the closing one, 10 00:00:44,580 --> 00:00:53,280 you can actually head into Atom and change your preferences in your editor section to show the indent guides. 11 00:00:53,640 --> 00:01:00,600 So now you can see that you've got these lines that show you which div matches with which closing element. 12 00:01:00,990 --> 00:01:05,700 Now, I actually prefer this off just because I find it to clustering. 13 00:01:05,940 --> 00:01:08,910 But it all depends on how you wish to visualize it. 14 00:01:09,420 --> 00:01:15,450 But the important thing is that we've got these two divs that represent two skill rows, and I want 15 00:01:15,450 --> 00:01:23,160 you to make each skill row have only 50% the width of the screen. 16 00:01:23,430 --> 00:01:28,200 So at the moment, it's 100%t because it's a block element, 17 00:01:28,650 --> 00:01:31,910 but I want you to change that to make it only 50%. 18 00:01:31,920 --> 00:01:34,800 So pause the video and complete the challenge. 19 00:01:37,190 --> 00:01:42,950 All right, so this shouldn't be too hard. If we head into our styles.css and we go ahead and 20 00:01:42,950 --> 00:01:50,210 add our skill row and just make sure that you check to see if you've got any typos between the way it's 21 00:01:50,210 --> 00:01:55,460 named here in the class attribute and the way that you've targeted it over here. 22 00:01:55,880 --> 00:02:03,440 So we want to change the width to 50% and we can hit save and refresh. 23 00:02:03,770 --> 00:02:10,670 And you can see that even though our width for the div is now 50% because it's no longer 100 24 00:02:10,670 --> 00:02:15,320 percent, it's no longer centered in the middle of our website. 25 00:02:15,740 --> 00:02:17,440 So how can we fix this? 26 00:02:17,450 --> 00:02:18,600 We've seen this before 27 00:02:18,620 --> 00:02:26,960 and as a challenge, I want you to restore this skill row to the center of the web page. 28 00:02:27,140 --> 00:02:29,990 So pause the video and see if you can figure out how to do that. 29 00:02:32,180 --> 00:02:38,840 So as we've seen before, the way that we achieve this is by setting the margin to be auto on the left 30 00:02:38,840 --> 00:02:40,010 and on the right. 31 00:02:40,490 --> 00:02:47,660 So let's go ahead and do that. So we can set the margin for this skill row to be auto 32 00:02:47,830 --> 00:02:54,800 and that just means auto on all four sides, which will center it if we refresh our web page. 33 00:02:55,040 --> 00:03:02,120 Now, at the moment, that div is a little bit too close to the top heading and to the next div. 34 00:03:02,450 --> 00:03:10,040 So how can you change the margin property so that we end up with 100px margin at the top and 100px 35 00:03:10,040 --> 00:03:11,450 margin at the bottom 36 00:03:11,810 --> 00:03:18,620 but keeping this margin auto on the left and right? Pause the video and see if you can complete this 37 00:03:18,620 --> 00:03:19,160 challenge. 38 00:03:21,020 --> 00:03:27,650 All right, so this goes back to the circle shorthand, so if we start from the top, as we always do, 39 00:03:27,920 --> 00:03:30,650 we're going to add 100px margin at the top. 40 00:03:31,190 --> 00:03:35,450 Next, we come clockwise to the right, which we want to keep as auto. 41 00:03:36,050 --> 00:03:41,580 Next, we go down to the bottom, which we said again, we want 100px margin. 42 00:03:41,600 --> 00:03:45,590 And finally, we have the left which we are going to set as auto. 43 00:03:45,890 --> 00:03:47,930 So the left and the right are auto, 44 00:03:47,930 --> 00:03:50,090 the top and the bottom are 100px. 45 00:03:50,540 --> 00:03:56,390 Let's hit save and let's refresh, and we can see that margin now in action. 46 00:03:56,780 --> 00:04:02,810 Now the next thing I want you to do is I want this text both the part for the design and development, 47 00:04:03,140 --> 00:04:07,230 as well as the description text to be left-aligned. 48 00:04:07,550 --> 00:04:13,580 So can you figure out which property you need to change and where in order to make that happen? 49 00:04:14,150 --> 00:04:16,490 So pause the video and complete the challenge. 50 00:04:19,170 --> 00:04:19,630 All right. 51 00:04:19,680 --> 00:04:25,710 So all we need to do is to go into the skill row and change the text-alight property. 52 00:04:26,160 --> 00:04:32,820 Remember, we changed this previously to make the text center-aligned for most of the body, and that 53 00:04:32,820 --> 00:04:37,620 in itself aligned the images to be centered as well as all of our text. 54 00:04:38,070 --> 00:04:44,440 But in the skill row here, we want the tax to be left-aligned so we can change that value to the left. 55 00:04:44,760 --> 00:04:48,840 And that will override the center text-align in the body. 56 00:04:49,410 --> 00:04:55,440 So now if we hit refresh, you can see that our text inside the skill section is now left-aligned 57 00:04:55,710 --> 00:04:58,650 but outside of it, it's still center-aligned. 58 00:04:58,980 --> 00:05:05,010 Now, the next thing I want to do is to make the paragraphs, the text in here, a little bit more spaced 59 00:05:05,020 --> 00:05:07,680 apart by changing the line height. 60 00:05:08,130 --> 00:05:14,880 So can you double the line height by changing the line-height property? So pause the video and complete 61 00:05:14,880 --> 00:05:15,510 the challenge? 62 00:05:18,120 --> 00:05:23,370 All right, so in this case, we're again going to be inside the skill row and we're changing the line- 63 00:05:23,370 --> 00:05:30,030 height property to 2, and remember, in this case, we don't actually have any units and we're simply 64 00:05:30,030 --> 00:05:31,440 specifying a scale. 65 00:05:32,670 --> 00:05:38,430 Let's hit refresh and you can see that our text is now a lot more spaced out and much easier to read. 66 00:05:38,700 --> 00:05:44,970 Now, the last thing I want to do before we look into the positioning of our skill row is we need this 67 00:05:44,970 --> 00:05:46,740 image to be a lot smaller. 68 00:05:46,890 --> 00:05:52,230 So go ahead and change the width of the image to 25%. 69 00:05:57,360 --> 00:06:01,770 All right, so in order to target the image, we need to specify their class names. 70 00:06:01,800 --> 00:06:05,700 So one is called code-img and one is called chilli-img. 71 00:06:05,730 --> 00:06:10,470 Now this is just the classes that I've added for my own images. 72 00:06:10,710 --> 00:06:14,760 You might have name these classes differently because you might have different images. 73 00:06:15,150 --> 00:06:20,490 Just check what you have as your class name before you start implementing this and make sure that it 74 00:06:20,490 --> 00:06:20,910 works. 75 00:06:21,270 --> 00:06:27,780 So I'm going to cluster that with the other images, and the first one is called code-img, and I 76 00:06:27,780 --> 00:06:31,230 want to change the width to 25% of its parent. 77 00:06:31,830 --> 00:06:35,290 And the next one is the chilli-img 78 00:06:35,790 --> 00:06:40,230 and this, again, is going to have a width of 25%. 79 00:06:40,650 --> 00:06:42,960 Let's hit save and let's refresh. 80 00:06:42,990 --> 00:06:48,510 And you can see that they are now the same size, even though they weren't before because they're 81 00:06:48,510 --> 00:06:54,990 now scaled down based on the width of their parent, which in this case is actually the skill row. 82 00:06:55,290 --> 00:07:02,220 So it's now a quarter the width of the skill route, which itself is only 50% the width of the 83 00:07:02,220 --> 00:07:03,000 entire page. 84 00:07:03,270 --> 00:07:06,030 So now comes the really interesting thing. 85 00:07:06,270 --> 00:07:10,590 How can I make my text wrap around my image? 86 00:07:10,950 --> 00:07:16,560 So I want this skill row to be a lot stouter, so less in height, 87 00:07:16,710 --> 00:07:23,430 and I want this image to be on the left, but I want my text to be on the right of the image and wrapping 88 00:07:23,430 --> 00:07:25,560 around the image as necessary. 89 00:07:26,010 --> 00:07:32,220 Well, this is where the topic of this lesson comes in, and that is, of course, floating. 90 00:07:33,540 --> 00:07:42,000 So we can make the image float to the left of the text and make the text wrap around it by simply changing 91 00:07:42,000 --> 00:07:43,020 one property. 92 00:07:43,380 --> 00:07:45,420 And that is the float property. 93 00:07:45,660 --> 00:07:54,930 So if we go into our code image and we change the float property to float: left and we hit save, once 94 00:07:54,930 --> 00:08:03,330 we refresh, you'll see that our image is now on the left of our skill row and our text is now wrapping 95 00:08:03,330 --> 00:08:09,960 around the image in order to display both of these on the same line. 96 00:08:10,110 --> 00:08:14,340 Now it looks a little bit odd having the text right up next to the image. 97 00:08:14,760 --> 00:08:21,930 So can you figure out a way of having 30px of space between this text and this image? 98 00:08:22,380 --> 00:08:25,620 So pause the video and see if you can complete the challenge. 99 00:08:27,540 --> 00:08:29,770 Now, there's a couple of ways that you can do this. 100 00:08:29,790 --> 00:08:36,720 You can think about padding or margin. In this case in order to apply a margin to the text 101 00:08:36,750 --> 00:08:40,980 it would be kind of difficult because they're completely separate at the moment. 102 00:08:40,980 --> 00:08:43,230 We've got an h3 and we've got a paragraph. 103 00:08:43,620 --> 00:08:49,500 Now you could add a div to wrap them together and add a left margin to that div. 104 00:08:49,920 --> 00:08:54,750 But what's much easier is to simply add a margin-right to our image. 105 00:08:55,380 --> 00:09:05,130 So let's head into our code and change the code-img margin-right property to 30px. 106 00:09:06,300 --> 00:09:13,320 And once we refresh, you'll see that our image now has a bit of space between it and the text, and the 107 00:09:13,320 --> 00:09:15,450 text because it's wrapping around 108 00:09:15,750 --> 00:09:18,870 and now it has less width to be displayed 109 00:09:18,870 --> 00:09:26,220 it's actually taking up the full width of that div, and this looks a lot better than previously. 110 00:09:26,820 --> 00:09:34,410 Now, as a challenge, I want you to use the same principles of floating to make this image appear on 111 00:09:34,410 --> 00:09:42,110 the right over here and for the text to wrap around that image and to have the same amounts of 30px 112 00:09:42,130 --> 00:09:44,670 space between the image and the text. 113 00:09:44,970 --> 00:09:48,960 So pause the video now and see if you can complete this challenge. 114 00:09:50,190 --> 00:09:56,430 All right, so pretty much the same principles here, but in this case, we're not floating left anymore 115 00:09:56,460 --> 00:09:59,490 because we want it to be on the right of the text. 116 00:09:59,670 --> 00:10:05,320 So in that case, we have to change the float property to right instead of left. 117 00:10:05,760 --> 00:10:09,570 And that will mean that the text will wrap around the image on the left. 118 00:10:10,140 --> 00:10:18,090 And then we just have to add in that margin-left of 30px on the image in order to get it to have 119 00:10:18,090 --> 00:10:20,700 the same amount of space as we had up here. 120 00:10:21,450 --> 00:10:29,490 So this is looking pretty sweet and we're getting very, very close to our end result that we're looking 121 00:10:29,490 --> 00:10:29,790 for. 122 00:10:30,030 --> 00:10:35,910 Now, sometimes when you float an element, you might not want all of the text to be wrapped around 123 00:10:35,910 --> 00:10:36,090 it. 124 00:10:36,480 --> 00:10:44,400 So, for example, say, if we only wanted that title to wrap around this image and to be on the right 125 00:10:44,400 --> 00:10:51,900 of the image, then we can actually use another property to make sure that this text does not wrap and 126 00:10:51,900 --> 00:10:57,570 end up at the bottom over here below the image, and that property is called clear. 127 00:10:58,020 --> 00:11:02,130 So if I target the paragraph here, let's give it a class. 128 00:11:02,130 --> 00:11:11,730 Let's call it maybe code-skill-description, and I'm just going to copy and paste it down here. 129 00:11:12,950 --> 00:11:21,350 And if I use the clear property to clear its left side, then that prevents it from wrapping anything 130 00:11:21,350 --> 00:11:22,220 on the left. 131 00:11:22,880 --> 00:11:28,600 So let's go ahead and try that clear: left, hit save, refresh. 132 00:11:28,910 --> 00:11:35,510 You can see that that paragraph is now pushed to below the image, which is floating. But that heading, 133 00:11:35,510 --> 00:11:40,130 that H3, is still wrapping around the image that's floated to the left. 134 00:11:40,520 --> 00:11:46,370 If you think about clear as almost like the anti-float, then that starts to make a little bit more 135 00:11:46,370 --> 00:11:46,700 sense. 136 00:11:47,120 --> 00:11:52,970 So we're saying that float this image to the left and all text will wrap around it on the right. 137 00:11:53,360 --> 00:12:00,530 But for this paragraph, we said to clear its left, which means make sure that that left margin is 138 00:12:00,530 --> 00:12:07,610 clear and not wrapped around anything, then that basically prevents it from carrying out the default 139 00:12:07,610 --> 00:12:08,180 behavior. 140 00:12:08,420 --> 00:12:15,890 Now, as a challenge, can you make this paragraph appear below this image rather than wrapped around 141 00:12:15,890 --> 00:12:16,040 it? 142 00:12:16,580 --> 00:12:19,970 Pause the video and see if you can complete this challenge. 143 00:12:21,630 --> 00:12:24,390 All right, so it's exactly the same concept here. 144 00:12:24,480 --> 00:12:28,350 Now let's go ahead and just give that paragraph a class. 145 00:12:28,710 --> 00:12:33,300 Let's call this chilli-skill-description. 146 00:12:33,630 --> 00:12:35,950 And again, I'm going to copy it, 147 00:12:36,150 --> 00:12:39,690 save the file and paste it down here. 148 00:12:40,800 --> 00:12:45,240 And of course, remember that dot in front because it's a class. 149 00:12:45,690 --> 00:12:51,840 And in this case, I still need to use clear, but I have to clear its right side in order to make sure 150 00:12:51,840 --> 00:12:53,490 it doesn't wrap around the image. 151 00:12:53,790 --> 00:12:59,550 Because you can see that if I tried the same thing and I cleared its left side, nothing changes because 152 00:12:59,550 --> 00:13:01,650 it's not wrapping anything on its left. 153 00:13:02,100 --> 00:13:10,140 But if I change this to right, then you'll see that it now appears below the image and it's prevented 154 00:13:10,260 --> 00:13:13,920 from wrapping the image that's floated to the right. 155 00:13:14,460 --> 00:13:22,950 Now I'm actually going to go ahead and clear both of these CSS rules because I actually prefer 156 00:13:22,950 --> 00:13:27,900 the look that we had previously, and I'm going to get rid of these classes as well. 157 00:13:29,450 --> 00:13:37,580 And this is the final result that we want to keep. Now, as they say, with great power comes great responsibility. 158 00:13:38,060 --> 00:13:42,890 Float is one of the most commonly used and abused CSS properties. 159 00:13:43,280 --> 00:13:47,060 The thing to remember is that it has a whole bunch of corner cases. 160 00:13:47,480 --> 00:13:57,530 And I recommend to only use float when really, really necessary and only use it for what it's meant, 161 00:13:57,650 --> 00:14:03,620 which is wrapping text around a certain element and don't use it for positioning. 162 00:14:03,950 --> 00:14:10,730 Instead, use what we learned about positioning like relative or absolute positioning or using the margin and 163 00:14:10,760 --> 00:14:16,640 the padding for the layout and the positioning of your website, and to leave the float property only 164 00:14:16,640 --> 00:14:18,650 for the cases of wrapping text. 165 00:14:18,920 --> 00:14:26,180 Then you will surely get into less trouble and less problems than if you try to use float just as 166 00:14:26,180 --> 00:14:33,470 a sort of free-for-all layout property, which you see a lot of people mistakenly do. Now 167 00:14:33,470 --> 00:14:39,290 looking through the Q&As, one of the issues that students often have is that their design is not being 168 00:14:39,290 --> 00:14:40,310 laid out correctly 169 00:14:40,580 --> 00:14:46,460 like what you see onscreen and one of the most common reasons is because they're using different text. 170 00:14:46,820 --> 00:14:49,970 More specifically, a different length of text. 171 00:14:49,970 --> 00:14:56,330 So here you can see there's quite a lot of text, and based on that, our CSS styling is making it 172 00:14:56,330 --> 00:14:57,230 appear like this. 173 00:14:57,500 --> 00:15:03,110 But if you had only one sentence or only a few words, then you might see the images being slightly 174 00:15:03,110 --> 00:15:03,800 out of place. 175 00:15:04,340 --> 00:15:09,740 Further, if you display this on a larger screen size, or if you actually just grab the corner of your 176 00:15:09,740 --> 00:15:15,500 browser and you toggle it around, you'll see that as you shrink or expand the browser, your design 177 00:15:15,500 --> 00:15:20,150 is going to break and it's not going to look like it should, as you see here. 178 00:15:20,810 --> 00:15:25,220 Now, the reason for this is because our website is not yet responsive. 179 00:15:25,670 --> 00:15:30,500 And I'm saying not yet, because in the coming lessons when we learn about Bootstrap, 180 00:15:30,980 --> 00:15:35,840 when we learn about more advanced CSS, then we're going to be able to fix this problem and make our 181 00:15:35,840 --> 00:15:41,630 designs look the way we want it to in all screen sizes and in all dimensions. 182 00:15:41,900 --> 00:15:46,010 So don't worry too much about that if you're having trouble fixing the layout. 183 00:15:46,280 --> 00:15:53,210 Just try to make sure that you're using the same content for your index.html as we have here in 184 00:15:53,210 --> 00:15:58,820 the lessons, and try to make sure that you've got your CSS code matching and it should look right 185 00:15:58,820 --> 00:16:02,330 on most screen sizes, only to toggle it a little bit. 186 00:16:02,900 --> 00:16:11,390 So we are really, really close to the end of this module, and in the next section, I've got a challenge 187 00:16:11,420 --> 00:16:18,530 for you to look at a specification of how we want the website to be finally laid out. 188 00:16:18,920 --> 00:16:23,840 And instead of me guiding you step by step through all the little properties that you need to change, 189 00:16:24,140 --> 00:16:30,410 I want you to figure out what you need to change in order to achieve the layout that I've specified. 190 00:16:30,710 --> 00:16:37,550 So in the next lesson, you'll see text instructions for you to complete the final big challenge and 191 00:16:37,550 --> 00:16:39,680 get this website looking beautiful. 192 00:16:40,040 --> 00:16:43,100 So for all of that, I will see you on the next lesson.