Voiceover: Hi, there.
This is Part Two of Building the how-it-works section
and this is what we're gonna format in this lecture.
So let's start with these two step boxes
and of course make this image here smaller.
Okay, so right back to the CSS file.
Let me grab a copy of this.
And how it works.
So, I'll start with the steps box
cause as you remember
those are
the two boxes
the left one and the right one.
Okay?
So let's first put a margin between them
and the h2 title
somewhere at the top of let's say 30 pixels.
And now we need to select each of the boxes individually
and in order to do that I will show you a new
very, very useful selector
and it's this one.
It's actually a zero class
and it's this one.
First-child.
So this will select the first of
these step boxes.
Which is, in our case, the left one.
And there's also a similar one
which is the last-child.
So these are two very useful zero classes
and actually in the course e-book you can find
a link to an article which has, I think,
30 very useful selectors such as this one.
Alright, so in the first box we want the text
align to be to the right side.
Now you may ask, "We don't have any text there."
And that's actually right.
But the text align property doesn't work only for text
it actually does work for all in line, or
in line block elements and the image is one of
those inline block elements.
And so, it will then be aligned to the
right side of this box.
And I also want to add a heading to the right side
of three percent.
And now you maybe feel a little confused
why I'm adding this heading with a percentage
instead of adding pixels, and there's a simple reason
for that and it has to do with responsive web design
where we want our layout to be fluid,
and as I explained to you before,
fluid means that we have all our layout properties
defined in percentages instead of ridged pixels.
So let's do the same thing with the other box
and here we will say that we want a padding
to the left side of three percent as well.
And now let's take
what else we have, so the image,
I want the image.
And it's called app-screen, so we already have a
class name here.
So let's say app-screen
and let's say width
let's say 40 percent.
And again on defining the width
with a percentage of the box.
So let's see what it looks like now.
Alright, this looks quite good, right?
So we have a nice distance between the image and the text
and I think the image size is okay now.
So the next thing is we want to format
those numbers here.
As you remember, we want this to be a circle
with a number inside of the circle,
and we also want some distance, some space,
of course, between each of these work steps elements.
So let's start doing this.
Works-step.
And margin to the bottom, I would say 50 pixels.
And again, let's take our HTML file
so we want to select the div element
inside of a work-steps,
because that will be our number.
So,
works-step div.
And what are we gonna do?
First let's set its color to orange.
And we already know where that is.
It's
up here.
Then we also want a border
and I will use two pixels here
such as in other elements on the website,
so it'll keep some consistency here.
And here with the same color as well.
And I want to display it as an in-line box, so
this very much used property display,
and I want the inline-blocks because that way
we can ensure that the element doesn't force a line break
and so the number can be side by side with the text.
So let's just check that out.
Okay, great.
So we have some distance here now and
so now let's
continue formatting this.
It's now a square and we want it to be a circle.
And you probably remember how to do it.
That's border-radius 50 percent.
And we can now define the height
of that element, let's say 50 pixel.
And the width.
Of course, if we want it to be a circle
it has to be as high as it's wide.
And inside of this box,
the number should be centered.
So, text-align center.
So let's check this out.
Alright, it's already circular.
We will now increase the font size of this
and give it some padding.
So, you see this is now really
designing in the browser.
One thing that is also left to do is
to make this text
appear here on the side,
and in order to do that we need to define
a float property for that element.
So some padding, as I said,
I would say like five pixels
and then let's make it float to the left.
So you see we have a whole lot of properties here
for this little element.
The other thing is the font-size.
Let's say 150 percent.
Alright.
Okay this looks already quite good, right?
Now what I would do now is to
define some margin to the right here
and maybe increase the size of those circles.
So, a margin to the left
of 25 pixels.
It then increases here to let's say
54.
Or 55 actually.
It really doesn't matter for one pixel.
Okay, this is obviously margin to the right
not to the left.
Okay.
So, this looks cool.
Now we probably should add some more space
between this and here at the h2 element
because it doesn't look quite aligned right now.
We want the phone to be more aligned
with this text here.
And so let's increase the margin for
this box on the right side.
So we already defined that there is a margin-top 30
but we actually want this
second box to have a larger margin.
So let's say maybe 70 pixels.
And so we can cut this and put it here.
So the first one will have 30 and
the second will have 70 pixels.
And so I don't need this one anymore.
And, alright.
Great.
And now one thing left to do is to format
these buttons here.
You want them of course to be the same size
and this one is way too big.
So let's do that as well.
We can just say,
well I better check the HTML because
I don't remember exactly.
Okay, so we have the button-app
and now we want to style the image inside
of the button-app class.
So buttom-app img.
And we want to set height for them.
Let's say 50 pixels so that they
look the same.
So the width is then defined automatically, of course.
And let's set a margin between them.
So set a margin to the right side
of ten pixels.
And let's check it out.
Great, now they look quite similar.
Now it's time to add some margin here.
So that these two are not so close to the text.
We want them to be more like here at the
bottom of the phone.
So in order to do that I ill actually show you
a new selector
cause what I want to do here is to add
a space to the left work-steps.
So I'll do that here, and I'll say
works-step
and then I'll say, last-of-type.
This is quite similar to last-child but so
in order that you get to know last-of-type
as well I'll show you this too.
So now I say that I want a larger margin here to the bottom.
And in this case I will say 80 pixels
instead of those 50.
So the work-steps all have 50 pixels, but now
I stated the last one will have 80 pixels.
Okay, right.
For now this looks very good.
Don't you think so?
But there is however a problem now,
which is this.
You see, that even though we defined
that a section should have 80 percent padding
there seems to be no padding here between this
section and this one, right?
And there's actually a good reason for that
and I will use the Chrome developer tools to
show you that.
So let's start by inspecting this element.
It's right here.
So the section steps which is the selected one
is the blue one, and we will see that the section
starts right here.
So the steps section starts where the meal section
should start
and you actually see the green area
is those 80 pixels padding
and it starts at a weird place, right?
But there is actually a good reason for that
and it has to do with clearing the floats.
Maybe you remember that from the introductory lectures?
Where I told you that, when you define some floats
you then later have to clear those floats
and we didn't do any of those here.
So the section meals actually has
as you can see up there, zero pixels height.
That's because we didn't clear the floats.
So we need to take care of that right now.
And so we go back here.
And yeah.
The LivePreview was canceled because, as I told you before
when you open the Google Chrome developer tools
in this live window then the connection gets lost.
Now clearing those floats,
I will now show you a new class
which is very used in web design.
In web development.
And it's called a clearfix class.
And I will define it now
but don't worry about understanding
exactly what I'm gonna do here.
We just use this class to clear the floats.
And the actual clearing happens right here.
So let me just complete this.
So again, don't worry so much about
understanding this.
Visibility is hidden.
Okay, what this class will do,
it will clear the float after an element.
So we will actually add this class
here in the ul.
And I will explain to you why.
This is because the child elements of this class
which are the li elements, are the one who have
the float property, and so we say that the parent
has this clearfix class and then that float
will be cleared right after the ul element.
And we do that here and we do that here.
And now the problem should be solved.
So let's open up the connection again.
And close the old one.
And here we are.
So this works, now we have our space here
such as we want to.
We can confirm this.
This section meals.
And now the section meals no longer has zero pixels height
but it has its actual 546 pixels height.
And everything works just right.
So one other thing to do that I
told you at the beginning of this lecture,
is to create a good way to
separate between different sections.
And what I want to do here
is to add a very, very subtle background color
to this section.
So it's section-steps.
And background-color.
And I will start with white.
And so as I said, I want a very subtle effect here.
So such as this one.
And you will not notice it right now.
The live connection was lost again,
I don't know why.
So this one is white,
and this has a very subtle grey color.
And you will not notice it so much now,
but you will notice the difference once we design
out next section and it will have a greyed effect.
So now we have four sections designed,
and it's already starting to look very promising I think.
And so in the next lecture we're starting with
our city section.
So, feel free to review this lecture or
to even ask some questions in the course forums
if you have some and then after that
see you in the next lecture.