I'm back in the index.html file
of our landing page, so to say,
and let me maybe close this folder here.
And there, we need to go down a bit
and work on our second section,
the section with the ID highlights that we created.
In this section, we will now add the HTML code we need.
And then in the next lectures,
we'll style it with our CSS code.
Enough of the words, let's get started.
As you saw, this section needs
to have a specific background color.
We need a highlights headline, so to say,
and we need three different images
with the corresponding country and city names.
This brings us again to the concept we learned about
when it comes to containers.
So nesting elements into each other
because basically, our entire section here
could be the container,
well for this entire content obviously,
and therefore we could apply our background color
to this section here
and then work on the styling of the content of the section.
What I mean by that is that inside the section,
we only need two different adjacent elements, so to say.
First, we need the headline.
This highlights headline I was referring to.
So we could use an h2 element here
because h1 is typically used only once on a webpage
and we have it already here in our hero content,
therefore h2 for, well, second priority headlines
or headlines of other sections of the website, so to say,
could here be our highlights text this one here.
And besides that,
the next adjacent element I was referring to could be what?
Well, an unordered list again, why?
Because we have the free images
with the corresponding information about the image,
and this is basically grouped information again, right?
All these three images kind of belong together
to a specific type of information.
Therefore, an unordered list is a good option here,
an ordered list not
because the order of these images doesn't matter,
but this is nothing new to you.
Therefore, I will add an unordered list here
and insight this list, we will have three list items.
One,
two,
and three.
And each list item will then contain, well,
the image and the corresponding text to this image,
I mentioned already.
Let's add some more attributes still
to keep our information structured.
The unordered list, for example,
is basically the container of all our destinations, right?
We will have three different destinations.
So again, Miami, Munich, and Germany.
So the list holds all these destinations,
therefore, a fitting attribute here, a fitting ID, actually,
because it's a unique element here
would be maybe destinations, right?
So if you want to style our container of the destinations,
then this would be our unordered list.
Each list item though.
So these three items here could also have a specific
attribute because each list item contains what?
Well, a single destination.
For this case,
we have three different items which contain destinations.
Therefore using an ID will not be the right approach here.
An ID is a unique attribute, only used once,
but instead of using the ID,
we can refer to, well, equal elements
or elements containing the same content,
in the end, with classes.
All the attributes we learned about
in earlier lectures of this course,
therefore we can add the class here
and we will give this class a name of destination.
As I said, each list item holds a single destination.
Therefore we can take this,
copy the class or the attribute and the name of the class
and paste it in the second,
and the first list item.
With that, we added more structure to our HTML code already.
What's missing now
is of course the content of each list item.
Let's get started with the first one here.
Then, as you saw the content consists of an image
and some text,
therefore let's get started with the image element here.
Our source will be what?
It will be the images folder,
then into the places folder,
and then, we'll refer to a specific image here.
We are again using relative paths.
So starting from the index HTML file,
and we can either refer to an image now
by adding the images folder name here, and then a slash,
then we see we can select icons or places
with the up and lower arrow keys.
Or as I did it up here, for example,
you can also refer to these paths with a slash
and then you get immediately the option
of all the current folders and files you have
starting from your current path,
both is valid code, so you can choose whatever you prefer.
Personally, I prefer this approach
as you immediately can navigate through the entire folder
and file structure, in my case images then places.
And then we'll get started with the Miami JPEG here.
I'm always selecting these folders and files
with the tab key, by the way.
We also will add the old attribute
for visually impaired people
or in case the image can't be loaded properly
for some of our users.
The text here
should be descriptive of what can be seen on the image.
So in our case,
the Miami image here holds, well,
the streets of Miami on a sunny day,
which would also be a great description off this image.
So let's add this text.
So Miami streets on, oops, on sunny day.
So this was the first image.
And besides that,
we also need the description of the country and the city.
For this, we'll just use a paragraph.
And here, this should be Miami, USA.
However, here, if you, again, check our page,
you'll see that the country here has a bigger font weight
when comparing it to the city here.
And the code of course do this with CSS,
but there also is a built in HTML element,
which allows us to exactly do that to, well,
make the font weight a bit bolder.
Typically we use CSS for such things,
but in this case it will be great example,
but we can also achieve this goal via HTML.
Therefore, we can simply add the strong element here.
Strong is again, an inland element,
just, well, enhancing the width of texts, so to say.
So with this like that.
So with this, we also finished the text part already.
What do we have to do now is, well,
we have to do the same thing for our two other list items.
I'll speed things up a bit here now,
as we know how it works.
So we'll add the image attribute,
refer to the images places and here to the Munich JPEG file.
We'll add an alternative text in here.
We can see to Munich football stadium in winter.
So let's add this text,
Munich football stadium in winter.
We can simply copy and paste the paragraph,
including the strong element here,
and pasting it right there.
So this should be Munich, Germany now.
And then one less time we'll again add the image element,
refer to images, places, and here now to Barcelona JPEG,
the text here
could be, well,
maybe Palm Beach in Barcelona,
Palm Beach in Barcelona.
And then we, again paste our city, Barcelona here
written like this,
and this is Spain.
And one thing that would ultimately help here would be,
if we now take our image and paragraph
and put it into the list element,
otherwise this will not work.
Let's quickly format the code to see what it looks like.
Yep. I think we have a nice structure now.
So we have our section, the h2 element,
the unordered list with our destinations,
and then three different single destinations as list items.
Let's save this now.
And let's have a look at our HTML page.
And if we scroll down, we see, we have the highlights.
We have some very big images.
We have the text below,
another image, texts below,
another image, text below.
Basically it worked.
What is missing here
is a space between the city and the country.
This can be easily fixed by adding the space here
after the city name.
So right here, right there and right there.
Save this.
Yeah, now this looks better.
And if we zoom in a bit here, I'll do this for you.
You'll see that strong alt has an impact.
Here we have the slightly thinner font weight.
Here we have a bigger font weight.
So this is sufficient to emphasize our country name here.
So this was step one.
The HTML part.
What's missing off course is the styling.
This is what we will work on next.