How did it go?
Were you successful?
Does your page somehow look like the final result?
Well, if it didn't work out
no worries, if it did work out, great.
No matter what happened, let's solve it together now.
So with that, let's go back to the initial state here.
And let's think about the first changes
we might want to implement here.
I want to get started with the HTML layout
that I mentioned in the last lecture.
Because in the body
we could actually say that our image
the H one element, and the paragraph
are part of the main section.
You remember this main element.
And down here, explore the full week
well, this would be a nice footer here for our page.
Let's implement this
by going back to our index HTML file
and here I'll first add the main element
and now take these elements and add these right here.
And as a second step
I'll create a footer element
a container again, basically
which then contains our paragraph.
Let's save and quickly format this.
And of course, nothing changed on our page
but we have more structure.
Besides these layout parts
I also mentioned that you have to use a new element in here
because Wednesday, August 4th.
So our date and the day should be highlighted.
And what we have in here is
we have an H one element
which contains text
and it should now be able to select parts of this text
and to apply a different style to it.
Now, I mentioned this span element
and that's exactly what we need in here.
It's a non semantic inline element
meaning it can be added to a block element here
inline basically
And with that, we are able to select specific parts
of the content of this H one element.
It's a non semantic element though
so you can use it on any purpose basically.
The purpose here would be to select the date
so we can add the span in here.
Now we take our date like this and add it back here.
And with that, if you go back
you'll see it, nothing changed.
It's an inline element
so the text isn't broken into two lines now
but in this year, as part of this project
we can then add a different color
or a different font weight to this span element.
Talking about non semantic elements
besides the non semantic inline element, the span
we also have a non semantic block element.
This is a so-called dif.
A dif is something you will see very often
in real world projects because these layout elements
our main and footer ends are on.
Unfortunately are not guidelines
every web developer follows
because in the end, main and footer are just block elements
which contain more content.
And, except of adding main here
you could just add a dif right here
and right there and do the same for the footer like this.
And then you could give this an ID, for example
stating well, main section
and then down here
an ID stating, footer, for example.
Doesn't change the look of the site.
Also doesn't change the
way we can interact with these elements.
Here, we just work with the ID's now
and not the main or the footer element.
However, the important thing is that such dif's
can be used if you don't have any semantic element
for your container, but generally we recommend to use the
semantic elements whenever possible.
That's while also undo these changes here
and go back to main and footer.
Important here just was that you saw
these non semantic inline and non semantic block elements.
So span and dif.
This is already the HTML part of this project.
So in the next lecture, we'll continue with our CSS styles.