Original subtitles

Hello there, and welcome

to the next Omnifood section,

which is the section on the sample meals.

And once more,

I did a sketch for this section

before actually building it,

and designing it as well.

And so, I want this section

to look a little bit like this.

So first, we are gonna have two card components here.

And one for each of the meals

that was provided to us in the initial content.

So, these meal cards

are gonna be a bit inspired

by these two examples that are here on the right side.

So, basically having a photo or an image at the top.

Then the name of the meal.

And then below that,

there is going to be the data about the meal.

And so, for each of the data points,

I also want to include an icon there.

So, this is gonna be the first time

we will use some icons in this project.

And so that's gonna be fun as well.

And yeah, so we have here these two cards,

as I just mentioned.

And then besides that,

we're gonna include the list of diets

that are compatible with the Omnifood application.

So here again, we're going to use our grid

and we will have three columns,

just as we see here.

So, does that sound good?

Well, then let's get started building this.

And as always,

let's start by adding a new section

right after the previous one.

So, a new section element,

and this one I'm gonna call it the section meals.

And then just like before,

we also want that same subheading

and also the heading itself.

So basically, just this here.

So, we can just copy this entire,

let's call it a component,

and then paste that here.

And I think that in our content,

we actually already have the title

for this meal section.

And so that's this one.

So, let's just copy that

and put that here.

And this section here could be called a sample meals.

But actually I prefer to simply call it meals.

So, quick and short.

That makes it very easy to understand

what this section is all about.

So, that was easy.

But now, let's create basically our next container here.

Because of course, we also want the next piece of content

to be centered.

And as I just mentioned during the sketch,

we also want this to be a grid with three columns.

And so, we use our reusable grid here

and we use that grid class,

which has the three columns.

So, which we also set up in one of the previous lectures

where we created this reusable grid, remember that?

And so here,

let's now create the two meal cards

and then that list.

So, meal and let's copy this,

again using the Option or Alt + Shift down shortcut.

And actually once again,

so that here

we just have to replace this with a list, let's say.

So, this is going to be the list of diets.

So, I'm just writing this here right now,

just so we can see it

in the website, the webpage.

Okay, so let's see.

And indeed, there we go.

So, we have our three columns here,

side-by-side already.

And so, now let's start by filling them up.

So, basically just designing and building

here the very first card,

so that we can then copy it here

into the second column.

But first of all,

let's actually add some padding to the section

so that we can actually see what's going on.

So, I'm gonna copy all of this,

even that CSS code there.

So, meals section,

and then the section meals.

Because the padding might be exactly the same as before,

so that we maintain the same consistency.

And so, now we have some good spacing

between these sections,

and can now start building

our very first card component right here.

So, remember the first thing that we want in this card,

is the image.

So, image source,

and then as always,

it is inside of our image folder, then slash,

and then down here,

you see we have a folder with meals.

And so, first let's use meal one.

So, let's call it the meal image

and we also need to give it some alt text.

So, let's actually check out

what this first recipe is all about.

So, this one is called Japanese Gyozas,

or something like that.

So, let's actually just use this as the alt text here.

So, that's the image.

And then we want the meal name.

So, for that, I'm gonna use a paragraph,

and again, not a heading element

because while this is not really a new subsection

of this section, I would say.

So, just the generic paragraph is more than enough here.

So, calling this one meal title

could have been meal name as well.

And so again, using Japanese Gyozas,

or something like that here.

And then now we want to basically put these pieces of data.

So, let me copy all of it here

so we have it handy.

And so, this kind of looks like a list.

And so, let's actually use an unordered list

to markup this content.

So, meal, let's say attributes

and then as you already know,

a list item for each of them.

Now, when we have some pieces of data

like this here to display,

it looks kind of, well, let's say bad

to just display it like this.

So, like writing what it is,

and then like a colon

and then the actual value.

So, it's always better

to try to put this content

into some kind of short sentence,

for example, saying 650 calories,

instead of saying number of calories,

and then colon 650.

So, this is a lot better like this.

Now, as I said also before,

here we are actually going to want some icon,

but let's leave that for a bit later

and first put our actual data here.

Now, here actually let's give it a class as well.

So, let's call it meal attribute.

So, here we have the attributes, which is the list.

And then each of them is a single attribute.

And now, I'm again duplicating this line

a couple of times.

So, we have 650 calories.

Then here, we have this category of vegetarian.

And remember how I mentioned way back

in the component gallery lecture,

that categories are many times a good fit for using tags.

And so here,

I'm actually going to add like a tag

before this meal title here, with vegetarian.

Now, that's gonna be even better here in the next one,

because here we actually have two categories.

And so then, we can add two tags

with Vegan and Paleo.

And that will then make it visually

very easy to understand

exactly what category this recipe is in.

And it's also visually a bit more interesting

than having a huge list.

So, actually let's immediately do that,

put that right here.

So for that, let me use a span element,

because we might want to have multiple of them side by side.

And also it's just like a single word.

And so, I think a generic span element is just fine.

So, let me actually call it just tag,

because we might want to reuse it

at some other point in the page.

So, it is vegetarian.

And so with that, we have these two done.

Next, we have this thing

which is the NutriScore.

And here to tell us it is registered.

And so, we need to add a small r symbol.

So, I think you know what I mean?

So, that's the registered symbol.

And for that, there is yet another HTML entity,

which is the reg.

And if we hover over it,

yeah, there you can see it up there.

So, the NutriScore, and this is something that I made up.

But let's just say that it's 74 here.

And then we have the average rating.

But there's no need to tell the user

that this is an average,

this is kind of obvious.

And so, let's say 4.9 rating.

And then it's quite common

to simply add the number of reviews or ratings

between parenthesis here.

So, no need to add a fourth row with that data.

So, these are kind of related.

And so, we're putting them all in the same row there.

So, this is our first draft of this card component.

And if we need to add some more stuff,

we can do that later.

But as for the content

it's already all here.

So, let's quickly check it out here on the page.

And as always,

the first thing that we need to fix immediately,

is this huge image.

Because it actually makes our column here

way bigger than it should actually be.

So, let's do that here.

And it is called meal image.

And so as always,

we want a width of 100%.

And so, immediately that is a lot better.

And now let's just quickly format this text content error.

So, that's the meal title.

Let's give it a font-size of 2 rem to start with.

We also want the same dark color

that we have been using for these kind of headings.

Then a font-weight of 600 also.

And for now that looks good.

I think at least.

And now let's style here the meal attribute.

So, not yet the, well, actually we can style both.

So, the meal attributes, which is the list,

so that we can get rid of the bullet points,

which is to say list style, none.

And then the individual ones

let's give them a font-size of 1.8 rem.

So, probably these two here are not gonna be enough,

but let's just check that out.

Yeah, this could be a little bit bigger

and of course we want some spacing after it as well.

So, the next step should be 2.4.

And margin to the bottom of 3.2 rem.

Which again, you could of course experiment

with a little bit before arriving at that value.

So, that looks huge right now,

but it will look okay

once we also start adding some space

between these lines here.

And so, let's actually do that.

And in fact,

I will do that again using flexbox and the gap property.

So, instead of using margin to the bottom,

and then having to remove it in the last element,

I will use flexbox

and changing the flex direction to column.

So, do you remember that?

So, I will just write it here now.

And then just in case you don't remember

what flex direction does,

I will show you that slide again,

maybe in case you skipped that lecture previously.

So again, I will set the parent container

of all these list elements

between which I want some space,

to a flex container.

So, flex, right.

But now they will be side by side by default.

And so, that's because of course by default,

the flex direction is set to row.

But we can change that.

So, we can set it to column.

And so now, it is, well, the other way around.

So, you see here now that flex item

are one after another.

And so now, when we apply the gap property,

the gap will also no longer be applied

horizontally, but vertically.

And so, let's do that.

Let's say 2 rem ,

and that then looks just fine.

And just to make this crystal clear,

because it is actually a very important part of flexbox,

I'm again showing you that animation

where we switch from the beginning,

which is what we have right here

to adding flex direction column.

And so, this again is the default,

which is flex direction set to row.

But then once we set it to column,

it will look like this.

And so, the main axis now rotated to 90 degrees.

And the same thing for the cross axis.

And so, in this situation,

the align items property

will now align the items horizontally and not vertically.

And also justify content

does now align the items vertically.

And finally, the gap property

now acts a bit like the margin-bottom property,

and no longer like the margin-right.

So, basically it applies to spacing now vertically

and not horizontally.

And now just to finish this first part,

let's quickly add the icons here.

So, we want an icon for the calories,

for the NutriScore,

and also for the rating.

Now, we already used some icons before

in the previous section,

and those were the hero icons.

Right, remember that?

And with those icons what we did,

was to simply copy the SVG code

right into our HTML code.

Now, the problem with that approach

is that it clutters up all HTML code a lot.

And especially if we use a lot of icons.

So, at some point

it starts making our code a lot harder to understand

than it should be.

And so, now we're actually going to use

another type of icon.

And so, let me show that to you.

So, remember we used to use the hero icons.

So, just in case

you didn't watch the previous lectures, maybe.

So, here we would then simply copy the SVG and paste it.

But now, we're gonna use an icon pack called Ionicons.

So, these are the icons.

So, what they look like.

And they are really nice and round.

and I really really like this icon pack

for the way it looks like,

and how it integrates

with many different design personalities.

Now, up here we have this usage link

where we can basically read

how we can use these icons.

And what we want to do is this very basic usage.

So, for this usage,

we need to copy this script here.

So, this is basically some JavaScript

that we will integrate into our own page.

And what this grip will do

is it will give us access

to a special element called ion-icon.

And then there we simply can use the name

with the icon that we want to use.

And so, that will then basically automatically inject

the SVG into our page.

And that probably sounds too complicated

than it needs to be.

But I just wanted to explain you

how it works behind the scenes.

So, hopefully you copied that as well,

and then just pasting it here

right before disclosing body tag.

Now, if for some reason,

this page here looks very different

by the time you're watching this video.

And somehow you cannot find this script.

And so this line of code here.

You can simply pause the video now for a minute

and type out this piece of code.

So, type it and paste it there at the end of the HTML

exactly where I put it.

And then we can simply come here to the icons,

and then we can choose one that we like,

let's say this one.

And then all we have to do is to copy this code

and paste it into our own code.

So, the first icon that we want is for calories.

So, that's some kind of energy.

So, I think like fire makes sense there,

or a flame maybe.

So, I like this one here better.

And so here we could actually also download the SVG,

but again, we are actually interested in this.

So, we just need to click here,

then it will automatically copy it.

And then I just paste it right here.

Give it a save.

And then right next to this element here,

so this ion-icon element here,

is of course not a standard HTML element.

It is simply as I just said before,

basically created by this script

that we passed into our page here.

And so, this then creates this custom HTML element,

which will hold our icon.

Now, when we have an element containing something,

then usually I like to have a text that is besides it,

also wrapped in some other element.

So, let's use the span element simply for that right here,

just like this.

And so, this then makes it easier for us

to for example, align these to using flexbox a bit later.

So, let's see how it looks like in our code.

And to do this,

I think we will have to manually reload now.

Well, that didn't really work, somehow.

Let's see for a script is here.

Yap, it is right here,

but let's see here one our console.

Oh, we see that there was some kind of error here

for some reason.

So, let's maybe try to quit this here.

So, the live server and then try it again.

So, go live again,

and then let me reload that page here.

And we still got the same error here.

But actually off-camera,

I discovered that we need to use another version here.

So, basically we right now are using 5.5.1,

but we want to use 5.4.0.

Which is the version that I actually used previously.

So, if we give it a save now,

then you see that the icon is actually here.

And so, even if it did work in your case,

please make sure to also use version 5.4.0.

Now, here we get this warning,

which says that we should actually also use

this script here.

So, if you also got this warning,

then just go ahead and copy this,

and paste that right below this first one.

But if you didn't get this warning, then nevermind,

this is not something really important.

Oh, and actually I didn't do as they tell us to do here.

So, instead we should actually put us in the head.

So, let's grab these two here, copy them.

Remove this from here

and put it right in the head.

So, put that here after the CSS.

So, you see that working with some third party libraries

like this actually is,

can sometimes take a little bit of time

and be a bit difficult,

but in the end we can manage to do it.

And again, if those errors didn't occur in your case,

then you can just pause the video

and write exactly what I have here.

And just make sure to use these same version numbers.

And so now everything is working.

This script is doing its magic.

And it is injecting basically this flame icon into our code.

And if we inspect this element,

we can actually see that.

So, you see that this Ironicon is now here.

And then in there

we have this strange thing,

which is the shadow root.

And then this is where the SVG lives.

And so, you see it, this looks a little bit similar

to the SVG that we manually copied before.

But anyway, let's now just quickly take

our remaining two icons

so that we can then start styling this card.

So, here let's use like a fork,

or something while maybe it's called cutlery,

or maybe it's called food or eating.

So, sometimes we need to try a little bit,

until we find what we're looking for.

So, in this case,

it's actually a restaurant.

Or if we don't want to search,

we can of course also just manually go through these icons,

which is actually what I did before this lecture.

So, to make it a bit faster to find it now.

And again, let's then wrap the rest of the content here

into a small span element.

And then finally the rating

is usually associated with stars.

And so let's use this one here.

Just copied it,

place that right there.

Then it's annoying that it immediately creates

the closing one,

that we don't want right there.

But yeah, so with this,

we should be good to go.

We can close this one,

but let's leave the rest of these tools here open

as we keep needing them as we built our project.

So, we have our very basic card here.

It still doesn't have a lot of formatting.

And so, let's take care of that in the next lecture.