To create the HTML code
and to understand how we should create this code,
it's important to have another look at
the final result right here.
Because right here,
we have a logic that we saw multiple times
throughout this course already.
We again have related content, so to say,
so we always have specific cities,
we have an image, we have the name, a description,
and then this link down here
and we have this multiple times, of course.
And then we have a certain structure
inside each of these so-called cards.
Now, when I talk about related content,
the concept of grouping that content
in 'lists' as list items,
hopefully comes to your mind.
And that's exactly the approach
I would like to follow right here.
Our main element will basically be an unordered list.
Because again,
the order of our cities is up to us in the end.
And this unordered list
will then have to list items
their each single card.
So each single city, is a list item.
And inside this list item, which will then of course,
act as a container for the entire content
of each single city's cards.
Inside of this list items,
we will have another container like structure,
well, we will have the image of course.
But the city here,
so the name and the description
will be a separate container containing this information.
And then we'll have a third container
with this 'explore' part here.
So basically we have an unordered list.
We have lists items,
which contain the entire content of the city.
We have an image,
one container for the city name and the city description.
Here of course, just some dummy text
and another container for this explore link here.
That's the theoretical background.
Let's now go back to our code
and recreate the structure in HTML.
For this, I'm in the 'places' HTML file.
And here, we'll now go into our main element.
As I said, we will again use an unordered list.
So let's create this one and we'll have multiple list items.
I'll just start with a single list item here,
because once the structure for this list item is finished,
we can of course, duplicate this logic.
As I said,
the unordered list is the container of the list items.
And each single list item will be
the container of the content of this card.
And the first content type we have in these cards
will be the image of the city.
For this, we can again use our image element
and what is missing now is a link to our source files.
Here again, we need images.
Now, the great thing is, for this first list item,
we have the image already
because I want to get started with our Barcelona image.
So this one right here.
For other cities, which we'll add in a few minutes,
you can of course find these images
attached to this lecture.
We'll do this together though, in a few minutes, as I said.
For the first image,
we'll refer to our Barcelona image, as I said.
So let's go to images, places,
and here select barcelona.jpg.
I'm selecting these with tab, I mentioned this already.
And our alt text here will be, well,
"City of Barcelona".
So that's the first thing, this is the image.
And now I said,
that I would like to have two containers.
The first container holding
the city name and the description,
and the second container holding the link to the city,
to the Wikipedia page.
This means these containers well are just containers,
but these are non-semantic containers in the end.
Therefore, I'll go for a non-semantic block element.
And this is our good old friend, the div.
Inside this div,
we'll have two elements.
The first one will be our h2 element.
We don't have an h1 element on this page of our website.
Still we'll stick to h1 elements
for the real headlines of our website, so to say.
And here h2 is just a headline for each single city.
And also typically,
you tend to have the h1 element
only once on each webpage.
Well and if we have these cities multiple times,
then this won't work.
Here, we can now add the city name,
so 'Barcelona' in this case.
And afterwards I'll add a paragraph with the description.
Here, I'll go with some dummy text, as I said.
And if you enter 'lorem' here in little studio code,
you get the Emmet helper,
which adds this text automatically.
So by pressing tab,
you get this, a little bit too long texts,
so let's scroll to the left
and maybe stop this right here
and add some dots.
Simply with that,
I think this should be sufficient.
So this is the description of the city.
What's missing for our div though here
is maybe a way to select it later easily.
Keep in mind that we will have this div
in each single list item.
Therefore, we will not use an ID here,
but a 'class' once again, with that,
we can apply the same styles to all our containers
for the city description and the name.
And here we'll simply call this 'item-content'.
And besides the item content,
so after this div, we'll have a second div
with a class of "actions" here,
because these actions will be what?
Well, these actions will be an anchor tag.
So a link to the corresponding
Wikipedia page of that city,
and here we'll go for
"https://en.wikipedia.org/wiki/Barcelona"
written like this maybe would be the better approach.
So let's save this and format it.
And let's now add,
the content of this link,
which could simply be 'Explore' here.
With this on our page,
yeah we have a very big image, so to say.
Scroll down though,
we have the content, name, the description and the link.
And if we click onto the link,
we are redirected to the right page.
So this worked perfectly,
we still have a problem with the styling here though.
So this is what we will tackle in the next lecture.