How did it go? Were you successful?
Well, let's have a look at my solution now
and let's create the HTML code of this website together.
A short note before we start though,
in this and the next lectures,
we just repeat already learned concepts.
I will, of course explain
what and why we are doing things in a certain way,
but I'll not dive as deep into all these concepts
as we did it in previous modules.
So these are just repetition lectures,
not really deep dive lectures.
In case any fundamental concepts here are totally unclear,
make sure to go back to earlier modules
to dive deeper here and to revise certain concepts.
With this out of the way,
let's get started with the most important file.
And this is our index HTML file, which we'll add right here.
And we'll again, use our convenience feature,
in VS code, by adding the exclamation mark
and pressing the tab key to get the HTML skeleton.
You know the majority of these elements in here,
what we deleted so far in this course was the metadata.
We will keep these now in this module
as these will become important a bit later.
But for the moment, we'll just keep the elements
without diving deeper into these.
Let's also add a title here for our website,
which could be web food right here.
And now let's directly dive into the body.
If you remember back,
the logic we had in the previous lecture,
then you know that we need two main elements on our website.
We need the header section right here and below our header,
we had our main section.
Inside our header we had two separate parts.
One part was the page logo.
And as I said, the logo could again be a link
which redirects us to this landing page if we click onto it.
To create the link we use our anchor tag,
again, with the auto-completion.
And this reference should lead us to the index HTML file
if we click onto it.
The content off the anchor tag itself
should just be the name of our website, which is web food.
And I think we could write it with a capital F here.
I think this looks better.
Besides this, we have our navigation items.
For navigation items we have a dedicated element,
and this is the nav element.
And inside our nav, we have two elements
which could redirect us to different pages of our website.
Typically when creating such a navigation bar,
we use a list therefore.
Because again, we have related content links
redirecting us to different parts of the website.
Therefore, a list is definitely not a wrong choice here.
The order doesn't matter.
Therefore we go for an unordered list
which holds, well, two list items.
First one, and the second one.
Our list items will be links to other pages, as I mentioned.
And for links, we again use the anchor tag.
Therefore we'll add an A.
We'll keep the reference empty here for the moment
as we don't create separate HTML pages here
for this project and simply give it a name, therefore,
which could be browse meals for this first anchor tag.
And we then select it and copy it into the second list item
and rename it to my orders, for example.
As I said, these are just dummy links in the end.
It's more about the responsive design in this module.
The header looks good already.
We could add some attributes still,
as you also learned it throughout this course.
For example, here to our header element
we could add an ID and we could call this main header.
I'm doing this already because later
when we add the mobile design, we might have another header.
So little spoiler here, therefore,
we should be very explicit about this default header we have
when creating it right here.
It's not a must to do it like this,
but it definitely doesn't hurt.
And the same thing is true for our anchor tag right here
with the website logo.
Here, we could also make it clear
by adding an id stating that this is what,
well, our logo like this.
So this is the header.
This means we can now go down to our main element.
And in here, things are quite straightforward.
We'll first add an h1 element with our main header
of this website.
And here we'll just use the text,
browse our delicious meals.
And besides this, we now have to create the logic
for our two cards holding the actual meals.
As I said, these cards now hold the core content
of this website inside our main element.
Therefore, what we could add here is a section element
because in the section we now have this main content,
this core content of this website.
And inside the section, we have these two cards,
which are again related content,
therefore, same logic as the navigation bar.
We use an unordered list, which then holds two list items.
So item one and item two, both will be these separate cards.
Now what does such a card look like?
Well, the card contains an image and the meal description
and this button, we could add it to the cart.
Although the logic for this will not be implemented
in this module.
Now to be even more precise from a structural,
from a semantical perspective,
we could also add another element right here.
This element is the article element
also used throughout this course already.
And the article then, well basically is
the individual content that we have
inside the individual cards.
What is the content?
Well the content first is an image.
And what is missing here is the image of course.
We'll add the images in a few seconds.
And besides this, we have an h2 element
with the description of the meal.
Here we have risotto with tiger prawns.
And in addition to that, we have this button,
the add to cart button,
which will be created with an anchor tag.
You learned more about this in the forms module already.
Therefore, I won't dive too deep in here,
but also leave the reference empty for the moment
and just add the class of button to it.
And of course, add to cart as content.
As we have two different types of content here,
the image and then the description and the button.
It also won't hurt if we use another div here maybe
to wrap the h2 element and the anchor tag into this div,
which will make the styling for us a bit easier.
So let's take these two elements now
and paste these into the div,
and let's maybe format this quickly like this.
And with that, we have the structure
of the first list item completed.
Again, we could add some attributes here
to be really explicit about what the individual section
and the individual list items contain.
So for example, here, for our section, we could use an ID
with the name of maybe latest products.
So let's say we could have more products on our website
and here on the landing page,
we only feature these latest products.
And also for the list items, we could add a class,
maybe of food item, of food item here.
With that, we have a differentiation
three list items up here, up here,
which don't have any attributes here.
We are explicit about that.
We here, we cannot individually style our list items,
which contain the food items here.
To be in line with this logic,
we can also add an attribute, a class attribute
to our div because the div then holds
the actual food item content, for example.
So this brings a lot of structure into our main element.
We have this main element in here,
which holds the h1 element.
Then a section which contains the latest products
on our website with an unordered list.
Which then holds what?
Well, our food items.
So each list item is a food item,
and the food item itself contains an article
which holds the image of the meal and the div
with the actual food item content
with the description of the meal in the end.
This means we now only have to take the article in here,
copy it and add it to the second list item.
And also copy the class up here from the list element
and edit down there.
And now rename, by the way, this is wrong,
it should be risotto, not risto, now it's correct.
And rename our second meal's h2 element
to cheeseburgers here.
And with this, our HTML code looks all right.
Actually, what is missing though, are our images.
You can find the images attached to this lecture.
So as always, download these images and unzip it,
and then you should see this risotto,
then this cheeseburgers image.
And we could now create a new folder named images,
and then we take the first image and drag it into the folder
and do the same thing with the cheeseburgers here.
So we should have these two images now.
With this, we can go back to our HTML code
and now add the link to the risotto, images folder
and here select the risotto JPEG, and also add the alt text,
which could be delicious risotto with tiger prawns.
And then go down to the second list item here
to our image element and refer to images
and here select the cheeseburgers JPEG,
and also add an alt text, classic cheeseburgers with fries.
Okay.
So let's now see what this looks like.
So we'll again, start our live server extension here.
And if we check the page now, yeah, it doesn't look good,
but from a structural perspective, I think it's all right.
We have the logo on style, we have our nav elements,
the h1 element, an image and the content
of this food item,
and the same thing for the second card element.
So this looks nice.
This means the HTML part is finished already.
At least at this stage of the course,
therefore in the next lecture,
we'll now add some styling to this website.