Now we're getting really, really close to the end result now, and all we need to do is start getting
our skills section laid out in a way that looks a little bit better than this.
So the first thing to notice is that if I switch on Pesticide, you can see that we've got the skill
section,
and inside the skill section, there's two divs.
And if you look in the code, then you'll see exactly the same structure here.
So this div is the skills div which contains two further divs, which are the skill rows.
And if you prefer to visualize this a little bit easier by seeing which is the opening tag for the div
and which one is the closing one,
you can actually head into Atom and change your preferences in your editor section to show the indent guides.
So now you can see that you've got these lines that show you which div matches with which closing element.
Now, I actually prefer this off just because I find it to clustering.
But it all depends on how you wish to visualize it.
But the important thing is that we've got these two divs that represent two skill rows, and I want
you to make each skill row have only 50% the width of the screen.
So at the moment, it's 100%t because it's a block element,
but I want you to change that to make it only 50%.
So pause the video and complete the challenge.
All right, so this shouldn't be too hard. If we head into our styles.css and we go ahead and
add our skill row and just make sure that you check to see if you've got any typos between the way it's
named here in the class attribute and the way that you've targeted it over here.
So we want to change the width to 50% and we can hit save and refresh.
And you can see that even though our width for the div is now 50% because it's no longer 100
percent, it's no longer centered in the middle of our website.
So how can we fix this?
We've seen this before
and as a challenge, I want you to restore this skill row to the center of the web page.
So pause the video and see if you can figure out how to do that.
So as we've seen before, the way that we achieve this is by setting the margin to be auto on the left
and on the right.
So let's go ahead and do that. So we can set the margin for this skill row to be auto
and that just means auto on all four sides, which will center it if we refresh our web page.
Now, at the moment, that div is a little bit too close to the top heading and to the next div.
So how can you change the margin property so that we end up with 100px margin at the top and 100px
margin at the bottom
but keeping this margin auto on the left and right? Pause the video and see if you can complete this
challenge.
All right, so this goes back to the circle shorthand, so if we start from the top, as we always do,
we're going to add 100px margin at the top.
Next, we come clockwise to the right, which we want to keep as auto.
Next, we go down to the bottom, which we said again, we want 100px margin.
And finally, we have the left which we are going to set as auto.
So the left and the right are auto,
the top and the bottom are 100px.
Let's hit save and let's refresh, and we can see that margin now in action.
Now the next thing I want you to do is I want this text both the part for the design and development,
as well as the description text to be left-aligned.
So can you figure out which property you need to change and where in order to make that happen?
So pause the video and complete the challenge.
All right.
So all we need to do is to go into the skill row and change the text-alight property.
Remember, we changed this previously to make the text center-aligned for most of the body, and that
in itself aligned the images to be centered as well as all of our text.
But in the skill row here, we want the tax to be left-aligned so we can change that value to the left.
And that will override the center text-align in the body.
So now if we hit refresh, you can see that our text inside the skill section is now left-aligned
but outside of it, it's still center-aligned.
Now, the next thing I want to do is to make the paragraphs, the text in here, a little bit more spaced
apart by changing the line height.
So can you double the line height by changing the line-height property? So pause the video and complete
the challenge?
All right, so in this case, we're again going to be inside the skill row and we're changing the line-
height property to 2, and remember, in this case, we don't actually have any units and we're simply
specifying a scale.
Let's hit refresh and you can see that our text is now a lot more spaced out and much easier to read.
Now, the last thing I want to do before we look into the positioning of our skill row is we need this
image to be a lot smaller.
So go ahead and change the width of the image to 25%.
All right, so in order to target the image, we need to specify their class names.
So one is called code-img and one is called chilli-img.
Now this is just the classes that I've added for my own images.
You might have name these classes differently because you might have different images.
Just check what you have as your class name before you start implementing this and make sure that it
works.
So I'm going to cluster that with the other images, and the first one is called code-img, and I
want to change the width to 25% of its parent.
And the next one is the chilli-img
and this, again, is going to have a width of 25%.
Let's hit save and let's refresh.
And you can see that they are now the same size, even though they weren't before because they're
now scaled down based on the width of their parent, which in this case is actually the skill row.
So it's now a quarter the width of the skill route, which itself is only 50% the width of the
entire page.
So now comes the really interesting thing.
How can I make my text wrap around my image?
So I want this skill row to be a lot stouter, 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 image and wrapping
around the image as necessary.
Well, this is where the topic of this lesson comes in, and that is, of course, floating.
So we can make the image float to the left of the text and make the text wrap around it by simply changing
one property.
And that is the float property.
So if we go into our code image and we change the float property to float: left and we hit save, once
we refresh, you'll see that our image is now on the left of our skill row and our text is now wrapping
around the image in order to display both of these on the same line.
Now it looks a little bit odd having the text right up next to the image.
So can you figure out a way of having 30px of space between this text and this image?
So pause the video and see if you can complete the challenge.
Now, there's a couple of ways that you can do this.
You can think about padding or margin. In this case in order to apply a margin to the text
it would be kind of difficult because they're completely separate at the moment.
We've got an h3 and we've got a paragraph.
Now you could add a div to wrap them together and add a left margin to that div.
But what's much easier is to simply add a margin-right to our image.
So let's head into our code and change the code-img margin-right property to 30px.
And once we refresh, you'll see that our image now has a bit of space between it and the text, and the
text because it's wrapping around
and now it has less width to be displayed
it's actually taking up the full width of that div, and this looks a lot better than previously.
Now, as a challenge, I want you to use the same principles of floating to make this image appear on
the right over here and for the text to wrap around that image and to have the same amounts of 30px
space between the image and the text.
So pause the video now and see if you can complete this challenge.
All right, so pretty much the same principles here, but in this case, we're not floating left anymore
because we want it to be on the right of the text.
So in that case, we have to change the float property to right instead of left.
And that will mean that the text will wrap around the image on the left.
And then we just have to add in that margin-left of 30px on the image in order to get it to have
the same amount of space as we had up here.
So this is looking pretty sweet and we're getting very, very close to our end result that we're looking
for.
Now, sometimes when you float an element, you might not want all of the text to be wrapped around
it.
So, for example, say, if we only wanted that title to wrap around this image and to be on the right
of the image, then we can actually use another property to make sure that this text does not wrap and
end up at the bottom over here below the image, and that property is called clear.
So if I target the paragraph here, let's give it a class.
Let's call it maybe code-skill-description, and I'm just going to copy and paste it down here.
And if I use the clear property to clear its left side, then that prevents it from wrapping anything
on the left.
So let's go ahead and try that clear: left, hit save, refresh.
You can see that that paragraph is now pushed to below the image, which is floating. But that heading,
that H3, is still wrapping around the image that's floated to the left.
If you think about clear as almost like the anti-float, then that starts to make a little bit more
sense.
So we're saying that float this image to the left and all text will wrap around it on the right.
But for this paragraph, we said to clear its left, which means make sure that that left margin is
clear and not wrapped around anything, then that basically prevents it from carrying out the default
behavior.
Now, as a challenge, can you make this paragraph appear below this image rather than wrapped around
it?
Pause the video and see if you can complete this challenge.
All right, so it's exactly the same concept here.
Now let's go ahead and just give that paragraph a class.
Let's call this chilli-skill-description.
And again, I'm going to copy it,
save the file and paste it down here.
And of course, remember that dot in front because it's a class.
And in this case, I still need to use clear, but I have to clear its right side in order to make sure
it doesn't wrap around the image.
Because you can see that if I tried the same thing and I cleared its left side, nothing changes because
it's not wrapping anything on its left.
But if I change this to right, then you'll see that it now appears below the image and it's prevented
from wrapping the image that's floated to the right.
Now I'm actually going to go ahead and clear both of these CSS rules because I actually prefer
the look that we had previously, and I'm going to get rid of these classes as well.
And this is the final result that we want to keep. Now, as they say, with great power comes great responsibility.
Float is one of the most commonly used and abused CSS properties.
The thing to remember is that it has a whole bunch of corner cases.
And I recommend to only use float when really, really necessary and only use it for what it's meant,
which is wrapping text around a certain element and don't use it for positioning.
Instead, use what we learned about positioning like relative or absolute positioning or using the margin and
the padding for the layout and the positioning of your website, and to leave the float property only
for the cases of wrapping text.
Then you will surely get into less trouble and less problems than if you try to use float just as
a sort of free-for-all layout property, which you see a lot of people mistakenly do. Now
looking through the Q&As, one of the issues that students often have is that their design is not being
laid out correctly
like what you see onscreen and one of the most common reasons is because they're using different text.
More specifically, a different length of text.
So here you can see there's quite a lot of text, and based on that, our CSS styling is making it
appear like this.
But if you had only one sentence or only a few words, then you might see the images being slightly
out of place.
Further, if you display this on a larger screen size, or if you actually just grab the corner of your
browser and you toggle it around, you'll see that as you shrink or expand the browser, your design
is going to break and it's not going to look like it should, as you see here.
Now, the reason for this is because our website is not yet responsive.
And I'm saying not yet, because in the coming lessons when we learn about Bootstrap,
when we learn about more advanced CSS, then we're going to be able to fix this problem and make our
designs look the way we want it to in all screen sizes and in all dimensions.
So don't worry too much about that if you're having trouble fixing the layout.
Just try to make sure that you're using the same content for your index.html as we have here in
the lessons, and try to make sure that you've got your CSS code matching and it should look right
on most screen sizes, only to toggle it a little bit.
So we are really, really close to the end of this module, and in the next section, I've got a challenge
for you to look at a specification of how we want the website to be finally laid out.
And instead of me guiding you step by step through all the little properties that you need to change,
I want you to figure out what you need to change in order to achieve the layout that I've specified.
So in the next lesson, you'll see text instructions for you to complete the final big challenge and
get this website looking beautiful.
So for all of that, I will see you on the next lesson.