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