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