Instructor: 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's 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 all grid
and we will have three columns just as we see here.
Okay, 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.
Okay, 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.
Okay, 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 yeah, 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, right?
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.
All right, 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 this 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 this 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.
Okay, so remember the first thing that we want
in this card is the image, right?
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.
Okay, 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,
well, 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, right?
And so let's actually use an unordered list
to mark up 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.
All right.
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, okay?
And now I'm again duplicating this line,
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, right?
And so here I'm actually going to add,
I like a tag before this meal title here with vegetarian.
And 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, right?
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, okay?
And so with that we have these two done.
Next we have this thing, which is the NutriScore.
And here they 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.
Okay, 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, okay?
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, okay?
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.
Okay, 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 or a 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 there.
So that's the meal title.
Let's give it a font size of two REM to start with.
We also want the same dark color that we have been using
for these kind of headings.
Then a front 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 in your 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 flex box 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 flex box
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, right?
And so that's because of course by default
the flex direction is set to row, right?
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 these 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 two rem,
and that looks just fine.
And just to make this crystal clear
because it is actually a very important part of Flexbox
I am 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, okay?
And so the main axis now rotated 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, okay?
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 the 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.
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 our 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 yeah, 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 ion icons.
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 script will do is it will give us access
to a special element called ion icon, right?
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 post a video now for a minute
and type out this piece of coat.
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.
Okay, give it a save.
And then right next to this element here
which, 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, okay?
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 a spin element
simply for that right here,
just like this.
And so this then makes it easier for us to, for example,
align these two using flex box 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 if our script is here.
Yep, it is right here.
But let's see, on 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
or just a version that I actually used previously.
So if we give it a safe 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, all right?
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 this 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 it 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, right?
And again, if those errors didn't occur in your case
then you can just 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 coat.
And if we inspect this element, we can actually see that.
So you see that this iron icon is now here.
And then in there we have this strange thing
which is the shadow route.
And then this is where the SVG lives.
And so you see this looks a little bit similar
to the SVG that we manually copied before, right?
But anyway, let's not 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.
Well, 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.
Okay.
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 copy 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 build a 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.