Voiceover: I hope you're excited for yet another lecture
on our killer website project.
In this lecture, we'll build a section
where the user can see in which cities OmniFoot works.
And here is a simple way of showing exactly that.
Just an image of each city with some details below them,
beautifully side by side.
And in this lecture, we'll practice some of our new skills.
We'll also learn how to use small icons
aligned with some text.
This is a little trickier than the big icons we used before.
And finally, we'll learn how to best style generic links.
Which are the normal text links you usually see
on all kind of websites.
So let's start this, right now.
Okay, back in brackets.
Now, as you are already used to,
we will start in your section and name it.
This one is called section
cities,
because we're showing our cities here.
And now we do the exact same thing
as we did here.
So I can actually copy it, to save us some time.
So that's the title, with some text in it.
And again, we will get our text from the text document.
Copy all of it,
and
paste it down here with comments.
So, copy this
and
paste it here.
Of course we don't need this,
so the title is already here.
And now, as you remember we have those four
columns with the photos and the details below.
The photos.
So, what are we gonna do?
Maybe I will give you some time to practice this,
because I hope you already know how to do this by now.
So just pause this,
and
continue to code by yourself.
Alright, so I hope that you managed to
write some code here
and now I will show you how I would do it.
So of course, we need a new row.
A new row
and then
some columns inside of it.
So class column, col,
and then, since we have four image
span one of
four.
Alright,
now we need our text in here.
So let me see what we got here.
So we have the number of happy eaters.
We have the number of chefs,
and we have the Twitter username
of OmniFoot in this city.
So what I will do here,
is to use an icon for each of those,
and then write the text.
So an icon for the eaters, one icon for the top chefs,
and one icon for the Twitter username.
So let's get those icons from ionicons,
such as we did before.
And open their website, ionicons.
It's already here.
So for the first one,
I will chose a user.
And again I'm going down here to the part of the iOS like
icons.
And I want to choose a user.
Let me see if I can find one, 'kay this looks great to me.
So I'm going to copy this.
And let's go back,
and just
insert
an icon, right here.
So the class,
paste it, I hope you remember that,
and that's it.
And now I can just,
copy the text here.
1000
happy eaters.
Okay, but before moving on...
Oh! Actually add
the image here,
to this column and
the title.
So it is
an IMG
and the source is inside of our resource and images.
Well by now you will
already know exactly how we should do that, right?
So this is the image for Lisbon, which is our first city.
And the alt can just be Lisbon.
And then again we use our H3 element,
such as we did in the other box,
up here, do you remember?
So we had
these four boxes,
it actually had the class box,
and then an H3
title.
And I will now, also reuse this class down here.
So that those boxes looks quite of similar.
So I want this column here to be a box as well.
So right now you start to see
that we're starting to reuse some of the classes
on our website
and that's really nice,
because that saves us time formatting
and at the same time it allows us to have some consistency
throughout our webpage.
So now we have the image here and we have the title.
And I guess the best idea is to put each of these icons
together with the text
inside
a
container, so a div element.
And we can call them...
city
future.
Don't need this here.
Great.
So we have the image, the title, and now we will have
one little container
for each of the three details.
So we have the eaters,
then we have the
the top chefs
and we have the Twitter username.
And now let's just choose an icon for the top chefs
and for
the Twitter name.
So back in the ionicons library here,
let's choose a cool icon for the top chefs.
Maybe a star would be a good idea.
So let's see if we can find something like that.
There's really a huge amount of
icons here.
Okay, let me copy this
and then paste it right here.
So staring now for the Twitter username,
we have a couple of social icons down here,
like all kinds of icons that you can imagine:
Twitter, Facebook, Googleplus,
Dribbble,
Instagram,
Snapchat, really everything you can imagine.
And we will actually use them later,
but for now we just need this Twitter icon.
Alright,
let me just check how this looks like on our website.
Okay.
So of course the image is way too big now
and that's because we didn't format it yet,
but our H3 title already looks good
and this H2 title, of course,
is also good looking already
and the icons are showing up here.
So let's continue
adding the other three columns.
And instead of rewriting all of it,
I will just copy it one,
two, and three.
And, so the second one is,
San Francisco.
So,
Lisbon,
San Francisco.
Let me look for the image.
Lisbon...
San Francisco, oh, the last one.
Now it's just a matter of
changing all the stuff.
So, instead of...
we have
3700
and 160, and here it's SF.
San Francisco, so...
Here we have 160
in SF.
Yeah, that's right.
So the next city is Berlin.
San Francisco and, here we go, Berlin.
And Berlin.
Do we have here?
Alright, it's Berlin.
And here we have,
1300 and
110.
And
Berlin.
And the last on is London.
And here it is.
So,
1200
50
and
London.
Alright, great.
Don't need this.
I'll actually leave the comments there.
So, right.
I think the mark up is here, let's check it.
Great, so it's not formatted,
as you can see,
but the content is here
and all we need to do next is to format it.
Actually,
I want to show you this.
Remember in the last section,
we defined this gray color here
and as I had told you it is a great way of separating
sections from one another.
Now we can see that.
So you come down here and it's beautifully separated
just by this color and by this white space of course.
So we have lots of white space,
which gives our website
visual hierarchy
and it actually looks designed,
but all this white space here and here
and between the images and the title,
I think it really looks great so far.
And, yeah, see you in the next lecture
where we will then use
CSS to format the thing here.
Okay, see you there.