Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,430 --> 00:00:03,610
Hello there, and welcome
2
00:00:03,610 --> 00:00:06,020
to the next Omnifood section,
3
00:00:06,020 --> 00:00:09,440
which is the section on the sample meals.
4
00:00:09,440 --> 00:00:10,360
And once more,
5
00:00:10,360 --> 00:00:13,150
I did a sketch for this section
6
00:00:13,150 --> 00:00:15,000
before actually building it,
7
00:00:15,000 --> 00:00:17,140
and designing it as well.
8
00:00:17,140 --> 00:00:18,690
And so, I want this section
9
00:00:18,690 --> 00:00:21,470
to look a little bit like this.
10
00:00:21,470 --> 00:00:25,170
So first, we are gonna have two card components here.
11
00:00:25,170 --> 00:00:27,340
And one for each of the meals
12
00:00:27,340 --> 00:00:31,730
that was provided to us in the initial content.
13
00:00:31,730 --> 00:00:33,250
So, these meal cards
14
00:00:33,250 --> 00:00:34,940
are gonna be a bit inspired
15
00:00:34,940 --> 00:00:38,520
by these two examples that are here on the right side.
16
00:00:38,520 --> 00:00:42,710
So, basically having a photo or an image at the top.
17
00:00:42,710 --> 00:00:45,130
Then the name of the meal.
18
00:00:45,130 --> 00:00:45,963
And then below that,
19
00:00:45,963 --> 00:00:49,520
there is going to be the data about the meal.
20
00:00:49,520 --> 00:00:51,420
And so, for each of the data points,
21
00:00:51,420 --> 00:00:54,650
I also want to include an icon there.
22
00:00:54,650 --> 00:00:56,650
So, this is gonna be the first time
23
00:00:56,650 --> 00:00:59,750
we will use some icons in this project.
24
00:00:59,750 --> 00:01:02,870
And so that's gonna be fun as well.
25
00:01:02,870 --> 00:01:07,010
And yeah, so we have here these two cards,
26
00:01:07,010 --> 00:01:08,200
as I just mentioned.
27
00:01:08,200 --> 00:01:10,010
And then besides that,
28
00:01:10,010 --> 00:01:12,650
we're gonna include the list of diets
29
00:01:12,650 --> 00:01:16,600
that are compatible with the Omnifood application.
30
00:01:16,600 --> 00:01:19,370
So here again, we're going to use our grid
31
00:01:19,370 --> 00:01:21,410
and we will have three columns,
32
00:01:21,410 --> 00:01:22,863
just as we see here.
33
00:01:24,350 --> 00:01:26,390
So, does that sound good?
34
00:01:26,390 --> 00:01:29,283
Well, then let's get started building this.
35
00:01:31,150 --> 00:01:32,880
And as always,
36
00:01:32,880 --> 00:01:35,130
let's start by adding a new section
37
00:01:35,130 --> 00:01:37,073
right after the previous one.
38
00:01:38,720 --> 00:01:40,800
So, a new section element,
39
00:01:40,800 --> 00:01:45,623
and this one I'm gonna call it the section meals.
40
00:01:48,040 --> 00:01:50,200
And then just like before,
41
00:01:50,200 --> 00:01:53,590
we also want that same subheading
42
00:01:53,590 --> 00:01:56,330
and also the heading itself.
43
00:01:56,330 --> 00:01:59,593
So basically, just this here.
44
00:02:00,610 --> 00:02:03,130
So, we can just copy this entire,
45
00:02:03,130 --> 00:02:04,893
let's call it a component,
46
00:02:05,910 --> 00:02:07,763
and then paste that here.
47
00:02:10,720 --> 00:02:12,990
And I think that in our content,
48
00:02:12,990 --> 00:02:15,250
we actually already have the title
49
00:02:15,250 --> 00:02:17,030
for this meal section.
50
00:02:17,030 --> 00:02:18,180
And so that's this one.
51
00:02:19,930 --> 00:02:21,160
So, let's just copy that
52
00:02:23,800 --> 00:02:26,983
and put that here.
53
00:02:28,210 --> 00:02:31,603
And this section here could be called a sample meals.
54
00:02:33,690 --> 00:02:36,543
But actually I prefer to simply call it meals.
55
00:02:37,490 --> 00:02:39,300
So, quick and short.
56
00:02:39,300 --> 00:02:41,500
That makes it very easy to understand
57
00:02:41,500 --> 00:02:43,483
what this section is all about.
58
00:02:46,610 --> 00:02:48,550
So, that was easy.
59
00:02:48,550 --> 00:02:53,203
But now, let's create basically our next container here.
60
00:02:56,000 --> 00:02:59,420
Because of course, we also want the next piece of content
61
00:02:59,420 --> 00:03:00,690
to be centered.
62
00:03:00,690 --> 00:03:04,450
And as I just mentioned during the sketch,
63
00:03:04,450 --> 00:03:07,573
we also want this to be a grid with three columns.
64
00:03:09,380 --> 00:03:12,140
And so, we use our reusable grid here
65
00:03:12,140 --> 00:03:14,663
and we use that grid class,
66
00:03:15,710 --> 00:03:18,370
which has the three columns.
67
00:03:18,370 --> 00:03:21,860
So, which we also set up in one of the previous lectures
68
00:03:21,860 --> 00:03:25,653
where we created this reusable grid, remember that?
69
00:03:26,560 --> 00:03:27,393
And so here,
70
00:03:27,393 --> 00:03:31,000
let's now create the two meal cards
71
00:03:31,000 --> 00:03:33,330
and then that list.
72
00:03:33,330 --> 00:03:35,920
So, meal and let's copy this,
73
00:03:35,920 --> 00:03:40,920
again using the Option or Alt + Shift down shortcut.
74
00:03:42,840 --> 00:03:44,660
And actually once again,
75
00:03:44,660 --> 00:03:45,493
so that here
76
00:03:45,493 --> 00:03:49,940
we just have to replace this with a list, let's say.
77
00:03:49,940 --> 00:03:53,623
So, this is going to be the list of diets.
78
00:03:54,530 --> 00:03:57,320
So, I'm just writing this here right now,
79
00:03:57,320 --> 00:03:58,570
just so we can see it
80
00:03:59,880 --> 00:04:02,323
in the website, the webpage.
81
00:04:03,770 --> 00:04:05,933
Okay, so let's see.
82
00:04:07,800 --> 00:04:10,360
And indeed, there we go.
83
00:04:10,360 --> 00:04:11,890
So, we have our three columns here,
84
00:04:11,890 --> 00:04:13,700
side-by-side already.
85
00:04:13,700 --> 00:04:16,823
And so, now let's start by filling them up.
86
00:04:18,980 --> 00:04:21,400
So, basically just designing and building
87
00:04:21,400 --> 00:04:23,310
here the very first card,
88
00:04:23,310 --> 00:04:25,000
so that we can then copy it here
89
00:04:25,000 --> 00:04:27,150
into the second column.
90
00:04:27,150 --> 00:04:28,350
But first of all,
91
00:04:28,350 --> 00:04:31,220
let's actually add some padding to the section
92
00:04:31,220 --> 00:04:34,153
so that we can actually see what's going on.
93
00:04:35,300 --> 00:04:37,203
So, I'm gonna copy all of this,
94
00:04:38,780 --> 00:04:40,873
even that CSS code there.
95
00:04:43,320 --> 00:04:45,040
So, meals section,
96
00:04:45,040 --> 00:04:48,160
and then the section meals.
97
00:04:48,160 --> 00:04:52,420
Because the padding might be exactly the same as before,
98
00:04:52,420 --> 00:04:54,693
so that we maintain the same consistency.
99
00:04:56,810 --> 00:04:58,450
And so, now we have some good spacing
100
00:04:58,450 --> 00:05:00,150
between these sections,
101
00:05:00,150 --> 00:05:02,520
and can now start building
102
00:05:02,520 --> 00:05:04,963
our very first card component right here.
103
00:05:09,330 --> 00:05:12,890
So, remember the first thing that we want in this card,
104
00:05:12,890 --> 00:05:14,613
is the image.
105
00:05:17,100 --> 00:05:19,260
So, image source,
106
00:05:19,260 --> 00:05:20,680
and then as always,
107
00:05:20,680 --> 00:05:24,390
it is inside of our image folder, then slash,
108
00:05:24,390 --> 00:05:25,223
and then down here,
109
00:05:25,223 --> 00:05:28,670
you see we have a folder with meals.
110
00:05:28,670 --> 00:05:31,023
And so, first let's use meal one.
111
00:05:34,800 --> 00:05:37,520
So, let's call it the meal image
112
00:05:38,640 --> 00:05:42,210
and we also need to give it some alt text.
113
00:05:42,210 --> 00:05:44,540
So, let's actually check out
114
00:05:44,540 --> 00:05:46,903
what this first recipe is all about.
115
00:05:48,020 --> 00:05:52,180
So, this one is called Japanese Gyozas,
116
00:05:52,180 --> 00:05:53,860
or something like that.
117
00:05:53,860 --> 00:05:57,433
So, let's actually just use this as the alt text here.
118
00:06:01,940 --> 00:06:03,500
So, that's the image.
119
00:06:03,500 --> 00:06:05,623
And then we want the meal name.
120
00:06:06,780 --> 00:06:09,170
So, for that, I'm gonna use a paragraph,
121
00:06:09,170 --> 00:06:11,730
and again, not a heading element
122
00:06:11,730 --> 00:06:15,970
because while this is not really a new subsection
123
00:06:15,970 --> 00:06:17,693
of this section, I would say.
124
00:06:18,630 --> 00:06:22,733
So, just the generic paragraph is more than enough here.
125
00:06:25,480 --> 00:06:27,670
So, calling this one meal title
126
00:06:27,670 --> 00:06:30,050
could have been meal name as well.
127
00:06:30,050 --> 00:06:33,250
And so again, using Japanese Gyozas,
128
00:06:33,250 --> 00:06:34,893
or something like that here.
129
00:06:36,130 --> 00:06:41,130
And then now we want to basically put these pieces of data.
130
00:06:42,410 --> 00:06:44,030
So, let me copy all of it here
131
00:06:44,030 --> 00:06:45,423
so we have it handy.
132
00:06:47,423 --> 00:06:50,423
And so, this kind of looks like a list.
133
00:06:51,880 --> 00:06:55,240
And so, let's actually use an unordered list
134
00:06:55,240 --> 00:06:56,933
to markup this content.
135
00:06:58,890 --> 00:07:01,610
So, meal, let's say attributes
136
00:07:05,900 --> 00:07:07,350
and then as you already know,
137
00:07:07,350 --> 00:07:10,460
a list item for each of them.
138
00:07:10,460 --> 00:07:12,980
Now, when we have some pieces of data
139
00:07:12,980 --> 00:07:15,210
like this here to display,
140
00:07:15,210 --> 00:07:18,370
it looks kind of, well, let's say bad
141
00:07:18,370 --> 00:07:20,850
to just display it like this.
142
00:07:20,850 --> 00:07:22,990
So, like writing what it is,
143
00:07:22,990 --> 00:07:24,290
and then like a colon
144
00:07:24,290 --> 00:07:26,470
and then the actual value.
145
00:07:26,470 --> 00:07:27,720
So, it's always better
146
00:07:27,720 --> 00:07:29,800
to try to put this content
147
00:07:29,800 --> 00:07:32,650
into some kind of short sentence,
148
00:07:32,650 --> 00:07:36,623
for example, saying 650 calories,
149
00:07:38,860 --> 00:07:41,090
instead of saying number of calories,
150
00:07:41,090 --> 00:07:43,013
and then colon 650.
151
00:07:44,590 --> 00:07:46,883
So, this is a lot better like this.
152
00:07:48,090 --> 00:07:49,840
Now, as I said also before,
153
00:07:49,840 --> 00:07:53,270
here we are actually going to want some icon,
154
00:07:53,270 --> 00:07:55,410
but let's leave that for a bit later
155
00:07:55,410 --> 00:07:58,283
and first put our actual data here.
156
00:08:00,456 --> 00:08:03,253
Now, here actually let's give it a class as well.
157
00:08:04,660 --> 00:08:06,413
So, let's call it meal attribute.
158
00:08:08,450 --> 00:08:11,370
So, here we have the attributes, which is the list.
159
00:08:11,370 --> 00:08:13,973
And then each of them is a single attribute.
160
00:08:15,460 --> 00:08:17,550
And now, I'm again duplicating this line
161
00:08:19,537 --> 00:08:21,180
a couple of times.
162
00:08:21,180 --> 00:08:24,130
So, we have 650 calories.
163
00:08:24,130 --> 00:08:27,860
Then here, we have this category of vegetarian.
164
00:08:27,860 --> 00:08:30,680
And remember how I mentioned way back
165
00:08:30,680 --> 00:08:32,890
in the component gallery lecture,
166
00:08:32,890 --> 00:08:37,233
that categories are many times a good fit for using tags.
167
00:08:38,600 --> 00:08:39,433
And so here,
168
00:08:39,433 --> 00:08:41,890
I'm actually going to add like a tag
169
00:08:41,890 --> 00:08:45,653
before this meal title here, with vegetarian.
170
00:08:46,700 --> 00:08:49,680
Now, that's gonna be even better here in the next one,
171
00:08:49,680 --> 00:08:52,640
because here we actually have two categories.
172
00:08:52,640 --> 00:08:54,630
And so then, we can add two tags
173
00:08:54,630 --> 00:08:56,610
with Vegan and Paleo.
174
00:08:56,610 --> 00:08:58,870
And that will then make it visually
175
00:08:58,870 --> 00:09:00,210
very easy to understand
176
00:09:00,210 --> 00:09:04,240
exactly what category this recipe is in.
177
00:09:04,240 --> 00:09:06,900
And it's also visually a bit more interesting
178
00:09:06,900 --> 00:09:08,473
than having a huge list.
179
00:09:11,130 --> 00:09:13,650
So, actually let's immediately do that,
180
00:09:13,650 --> 00:09:14,993
put that right here.
181
00:09:16,670 --> 00:09:19,840
So for that, let me use a span element,
182
00:09:19,840 --> 00:09:24,050
because we might want to have multiple of them side by side.
183
00:09:24,050 --> 00:09:26,830
And also it's just like a single word.
184
00:09:26,830 --> 00:09:30,863
And so, I think a generic span element is just fine.
185
00:09:32,880 --> 00:09:35,420
So, let me actually call it just tag,
186
00:09:35,420 --> 00:09:37,220
because we might want to reuse it
187
00:09:37,220 --> 00:09:39,890
at some other point in the page.
188
00:09:39,890 --> 00:09:42,713
So, it is vegetarian.
189
00:09:45,960 --> 00:09:48,963
And so with that, we have these two done.
190
00:09:51,680 --> 00:09:52,950
Next, we have this thing
191
00:09:52,950 --> 00:09:54,850
which is the NutriScore.
192
00:09:54,850 --> 00:09:57,170
And here to tell us it is registered.
193
00:09:57,170 --> 00:09:59,963
And so, we need to add a small r symbol.
194
00:10:01,240 --> 00:10:04,450
So, I think you know what I mean?
195
00:10:04,450 --> 00:10:06,510
So, that's the registered symbol.
196
00:10:06,510 --> 00:10:09,550
And for that, there is yet another HTML entity,
197
00:10:09,550 --> 00:10:11,927
which is the reg.
198
00:10:13,590 --> 00:10:15,670
And if we hover over it,
199
00:10:15,670 --> 00:10:17,673
yeah, there you can see it up there.
200
00:10:20,516 --> 00:10:24,215
So, the NutriScore, and this is something that I made up.
201
00:10:24,215 --> 00:10:28,613
But let's just say that it's 74 here.
202
00:10:29,807 --> 00:10:31,873
And then we have the average rating.
203
00:10:35,220 --> 00:10:37,470
But there's no need to tell the user
204
00:10:37,470 --> 00:10:38,900
that this is an average,
205
00:10:38,900 --> 00:10:40,410
this is kind of obvious.
206
00:10:40,410 --> 00:10:43,763
And so, let's say 4.9 rating.
207
00:10:45,150 --> 00:10:47,000
And then it's quite common
208
00:10:47,000 --> 00:10:50,080
to simply add the number of reviews or ratings
209
00:10:50,080 --> 00:10:51,403
between parenthesis here.
210
00:10:52,520 --> 00:10:56,293
So, no need to add a fourth row with that data.
211
00:10:57,310 --> 00:10:59,150
So, these are kind of related.
212
00:10:59,150 --> 00:11:01,800
And so, we're putting them all in the same row there.
213
00:11:03,700 --> 00:11:08,180
So, this is our first draft of this card component.
214
00:11:08,180 --> 00:11:10,440
And if we need to add some more stuff,
215
00:11:10,440 --> 00:11:11,900
we can do that later.
216
00:11:11,900 --> 00:11:13,460
But as for the content
217
00:11:13,460 --> 00:11:14,823
it's already all here.
218
00:11:15,770 --> 00:11:20,220
So, let's quickly check it out here on the page.
219
00:11:20,220 --> 00:11:21,620
And as always,
220
00:11:21,620 --> 00:11:24,080
the first thing that we need to fix immediately,
221
00:11:24,080 --> 00:11:25,730
is this huge image.
222
00:11:25,730 --> 00:11:29,020
Because it actually makes our column here
223
00:11:29,020 --> 00:11:31,163
way bigger than it should actually be.
224
00:11:33,160 --> 00:11:35,870
So, let's do that here.
225
00:11:35,870 --> 00:11:39,433
And it is called meal image.
226
00:11:43,760 --> 00:11:45,960
And so as always,
227
00:11:45,960 --> 00:11:48,843
we want a width of 100%.
228
00:11:49,840 --> 00:11:53,113
And so, immediately that is a lot better.
229
00:11:55,210 --> 00:11:58,773
And now let's just quickly format this text content error.
230
00:12:01,190 --> 00:12:04,313
So, that's the meal title.
231
00:12:07,720 --> 00:12:11,733
Let's give it a font-size of 2 rem to start with.
232
00:12:12,700 --> 00:12:14,950
We also want the same dark color
233
00:12:14,950 --> 00:12:18,853
that we have been using for these kind of headings.
234
00:12:20,460 --> 00:12:25,440
Then a font-weight of 600 also.
235
00:12:26,900 --> 00:12:29,380
And for now that looks good.
236
00:12:29,380 --> 00:12:31,240
I think at least.
237
00:12:31,240 --> 00:12:35,030
And now let's style here the meal attribute.
238
00:12:35,030 --> 00:12:38,873
So, not yet the, well, actually we can style both.
239
00:12:40,000 --> 00:12:45,000
So, the meal attributes, which is the list,
240
00:12:46,280 --> 00:12:49,630
so that we can get rid of the bullet points,
241
00:12:49,630 --> 00:12:52,343
which is to say list style, none.
242
00:12:53,810 --> 00:12:55,510
And then the individual ones
243
00:12:57,790 --> 00:13:01,823
let's give them a font-size of 1.8 rem.
244
00:13:02,710 --> 00:13:05,950
So, probably these two here are not gonna be enough,
245
00:13:05,950 --> 00:13:07,523
but let's just check that out.
246
00:13:09,330 --> 00:13:11,450
Yeah, this could be a little bit bigger
247
00:13:11,450 --> 00:13:14,403
and of course we want some spacing after it as well.
248
00:13:15,580 --> 00:13:17,633
So, the next step should be 2.4.
249
00:13:21,290 --> 00:13:24,283
And margin to the bottom of 3.2 rem.
250
00:13:25,130 --> 00:13:28,000
Which again, you could of course experiment
251
00:13:28,000 --> 00:13:30,973
with a little bit before arriving at that value.
252
00:13:31,890 --> 00:13:34,110
So, that looks huge right now,
253
00:13:34,110 --> 00:13:35,360
but it will look okay
254
00:13:35,360 --> 00:13:37,660
once we also start adding some space
255
00:13:37,660 --> 00:13:39,640
between these lines here.
256
00:13:39,640 --> 00:13:41,790
And so, let's actually do that.
257
00:13:41,790 --> 00:13:43,290
And in fact,
258
00:13:43,290 --> 00:13:47,703
I will do that again using flexbox and the gap property.
259
00:13:49,240 --> 00:13:51,890
So, instead of using margin to the bottom,
260
00:13:51,890 --> 00:13:54,920
and then having to remove it in the last element,
261
00:13:54,920 --> 00:13:56,470
I will use flexbox
262
00:13:56,470 --> 00:13:59,850
and changing the flex direction to column.
263
00:13:59,850 --> 00:14:01,563
So, do you remember that?
264
00:14:02,430 --> 00:14:05,400
So, I will just write it here now.
265
00:14:05,400 --> 00:14:07,460
And then just in case you don't remember
266
00:14:07,460 --> 00:14:09,440
what flex direction does,
267
00:14:09,440 --> 00:14:11,340
I will show you that slide again,
268
00:14:11,340 --> 00:14:14,253
maybe in case you skipped that lecture previously.
269
00:14:15,650 --> 00:14:19,000
So again, I will set the parent container
270
00:14:19,000 --> 00:14:20,560
of all these list elements
271
00:14:20,560 --> 00:14:23,010
between which I want some space,
272
00:14:23,010 --> 00:14:24,443
to a flex container.
273
00:14:25,500 --> 00:14:27,500
So, flex, right.
274
00:14:27,500 --> 00:14:30,343
But now they will be side by side by default.
275
00:14:31,743 --> 00:14:34,790
And so, that's because of course by default,
276
00:14:34,790 --> 00:14:37,263
the flex direction is set to row.
277
00:14:40,030 --> 00:14:41,180
But we can change that.
278
00:14:43,850 --> 00:14:45,760
So, we can set it to column.
279
00:14:45,760 --> 00:14:49,980
And so now, it is, well, the other way around.
280
00:14:49,980 --> 00:14:52,200
So, you see here now that flex item
281
00:14:52,200 --> 00:14:54,090
are one after another.
282
00:14:54,090 --> 00:14:56,700
And so now, when we apply the gap property,
283
00:14:56,700 --> 00:14:58,990
the gap will also no longer be applied
284
00:14:58,990 --> 00:15:01,453
horizontally, but vertically.
285
00:15:02,580 --> 00:15:03,823
And so, let's do that.
286
00:15:06,270 --> 00:15:07,897
Let's say 2 rem ,
287
00:15:09,365 --> 00:15:10,883
and that then looks just fine.
288
00:15:13,980 --> 00:15:16,290
And just to make this crystal clear,
289
00:15:16,290 --> 00:15:20,740
because it is actually a very important part of flexbox,
290
00:15:20,740 --> 00:15:22,790
I'm again showing you that animation
291
00:15:22,790 --> 00:15:25,550
where we switch from the beginning,
292
00:15:25,550 --> 00:15:27,640
which is what we have right here
293
00:15:27,640 --> 00:15:30,370
to adding flex direction column.
294
00:15:30,370 --> 00:15:32,630
And so, this again is the default,
295
00:15:32,630 --> 00:15:35,160
which is flex direction set to row.
296
00:15:35,160 --> 00:15:37,520
But then once we set it to column,
297
00:15:37,520 --> 00:15:39,453
it will look like this.
298
00:15:41,110 --> 00:15:44,830
And so, the main axis now rotated to 90 degrees.
299
00:15:44,830 --> 00:15:47,860
And the same thing for the cross axis.
300
00:15:47,860 --> 00:15:49,520
And so, in this situation,
301
00:15:49,520 --> 00:15:51,190
the align items property
302
00:15:51,190 --> 00:15:55,570
will now align the items horizontally and not vertically.
303
00:15:55,570 --> 00:15:57,800
And also justify content
304
00:15:57,800 --> 00:16:00,123
does now align the items vertically.
305
00:16:01,720 --> 00:16:03,750
And finally, the gap property
306
00:16:03,750 --> 00:16:07,410
now acts a bit like the margin-bottom property,
307
00:16:07,410 --> 00:16:10,180
and no longer like the margin-right.
308
00:16:10,180 --> 00:16:13,470
So, basically it applies to spacing now vertically
309
00:16:13,470 --> 00:16:14,883
and not horizontally.
310
00:16:16,650 --> 00:16:20,020
And now just to finish this first part,
311
00:16:20,020 --> 00:16:22,930
let's quickly add the icons here.
312
00:16:22,930 --> 00:16:25,500
So, we want an icon for the calories,
313
00:16:25,500 --> 00:16:27,180
for the NutriScore,
314
00:16:27,180 --> 00:16:29,280
and also for the rating.
315
00:16:29,280 --> 00:16:31,720
Now, we already used some icons before
316
00:16:31,720 --> 00:16:33,550
in the previous section,
317
00:16:33,550 --> 00:16:36,670
and those were the hero icons.
318
00:16:36,670 --> 00:16:38,870
Right, remember that?
319
00:16:38,870 --> 00:16:41,030
And with those icons what we did,
320
00:16:41,030 --> 00:16:43,680
was to simply copy the SVG code
321
00:16:43,680 --> 00:16:45,673
right into our HTML code.
322
00:16:47,140 --> 00:16:49,010
Now, the problem with that approach
323
00:16:49,010 --> 00:16:52,640
is that it clutters up all HTML code a lot.
324
00:16:52,640 --> 00:16:55,870
And especially if we use a lot of icons.
325
00:16:55,870 --> 00:16:57,100
So, at some point
326
00:16:57,100 --> 00:17:00,630
it starts making our code a lot harder to understand
327
00:17:00,630 --> 00:17:02,030
than it should be.
328
00:17:02,030 --> 00:17:03,900
And so, now we're actually going to use
329
00:17:03,900 --> 00:17:05,980
another type of icon.
330
00:17:05,980 --> 00:17:07,907
And so, let me show that to you.
331
00:17:12,290 --> 00:17:16,433
So, remember we used to use the hero icons.
332
00:17:18,180 --> 00:17:19,130
So, just in case
333
00:17:19,130 --> 00:17:21,950
you didn't watch the previous lectures, maybe.
334
00:17:21,950 --> 00:17:26,010
So, here we would then simply copy the SVG and paste it.
335
00:17:26,010 --> 00:17:29,513
But now, we're gonna use an icon pack called Ionicons.
336
00:17:34,480 --> 00:17:37,830
So, these are the icons.
337
00:17:37,830 --> 00:17:39,330
So, what they look like.
338
00:17:39,330 --> 00:17:41,820
And they are really nice and round.
339
00:17:41,820 --> 00:17:44,510
and I really really like this icon pack
340
00:17:44,510 --> 00:17:46,220
for the way it looks like,
341
00:17:46,220 --> 00:17:47,230
and how it integrates
342
00:17:47,230 --> 00:17:49,853
with many different design personalities.
343
00:17:51,170 --> 00:17:55,370
Now, up here we have this usage link
344
00:17:55,370 --> 00:17:57,190
where we can basically read
345
00:17:57,190 --> 00:17:59,003
how we can use these icons.
346
00:18:00,030 --> 00:18:04,600
And what we want to do is this very basic usage.
347
00:18:04,600 --> 00:18:06,000
So, for this usage,
348
00:18:06,000 --> 00:18:09,530
we need to copy this script here.
349
00:18:09,530 --> 00:18:11,926
So, this is basically some JavaScript
350
00:18:11,926 --> 00:18:15,010
that we will integrate into our own page.
351
00:18:15,010 --> 00:18:17,010
And what this grip will do
352
00:18:17,010 --> 00:18:18,570
is it will give us access
353
00:18:18,570 --> 00:18:22,213
to a special element called ion-icon.
354
00:18:23,889 --> 00:18:26,760
And then there we simply can use the name
355
00:18:26,760 --> 00:18:29,160
with the icon that we want to use.
356
00:18:29,160 --> 00:18:32,100
And so, that will then basically automatically inject
357
00:18:32,100 --> 00:18:35,000
the SVG into our page.
358
00:18:35,000 --> 00:18:38,500
And that probably sounds too complicated
359
00:18:38,500 --> 00:18:39,663
than it needs to be.
360
00:18:40,630 --> 00:18:42,940
But I just wanted to explain you
361
00:18:42,940 --> 00:18:44,513
how it works behind the scenes.
362
00:18:46,000 --> 00:18:49,270
So, hopefully you copied that as well,
363
00:18:49,270 --> 00:18:51,115
and then just pasting it here
364
00:18:51,115 --> 00:18:54,343
right before disclosing body tag.
365
00:18:57,080 --> 00:18:58,590
Now, if for some reason,
366
00:18:58,590 --> 00:19:00,840
this page here looks very different
367
00:19:00,840 --> 00:19:02,950
by the time you're watching this video.
368
00:19:02,950 --> 00:19:06,090
And somehow you cannot find this script.
369
00:19:06,090 --> 00:19:08,340
And so this line of code here.
370
00:19:08,340 --> 00:19:10,840
You can simply pause the video now for a minute
371
00:19:10,840 --> 00:19:13,493
and type out this piece of code.
372
00:19:15,210 --> 00:19:18,727
So, type it and paste it there at the end of the HTML
373
00:19:18,727 --> 00:19:20,473
exactly where I put it.
374
00:19:22,200 --> 00:19:25,690
And then we can simply come here to the icons,
375
00:19:25,690 --> 00:19:29,950
and then we can choose one that we like,
376
00:19:29,950 --> 00:19:30,940
let's say this one.
377
00:19:30,940 --> 00:19:34,220
And then all we have to do is to copy this code
378
00:19:34,220 --> 00:19:36,893
and paste it into our own code.
379
00:19:39,900 --> 00:19:43,970
So, the first icon that we want is for calories.
380
00:19:43,970 --> 00:19:45,950
So, that's some kind of energy.
381
00:19:45,950 --> 00:19:48,933
So, I think like fire makes sense there,
382
00:19:50,050 --> 00:19:52,350
or a flame maybe.
383
00:19:52,350 --> 00:19:55,530
So, I like this one here better.
384
00:19:55,530 --> 00:19:59,610
And so here we could actually also download the SVG,
385
00:19:59,610 --> 00:20:01,910
but again, we are actually interested in this.
386
00:20:03,220 --> 00:20:05,250
So, we just need to click here,
387
00:20:05,250 --> 00:20:07,000
then it will automatically copy it.
388
00:20:08,150 --> 00:20:12,763
And then I just paste it right here.
389
00:20:15,530 --> 00:20:16,810
Give it a save.
390
00:20:16,810 --> 00:20:19,233
And then right next to this element here,
391
00:20:21,440 --> 00:20:23,490
so this ion-icon element here,
392
00:20:23,490 --> 00:20:26,880
is of course not a standard HTML element.
393
00:20:26,880 --> 00:20:29,990
It is simply as I just said before,
394
00:20:29,990 --> 00:20:32,460
basically created by this script
395
00:20:32,460 --> 00:20:35,493
that we passed into our page here.
396
00:20:37,080 --> 00:20:40,410
And so, this then creates this custom HTML element,
397
00:20:40,410 --> 00:20:42,403
which will hold our icon.
398
00:20:43,467 --> 00:20:46,400
Now, when we have an element containing something,
399
00:20:46,400 --> 00:20:50,310
then usually I like to have a text that is besides it,
400
00:20:50,310 --> 00:20:52,403
also wrapped in some other element.
401
00:20:53,270 --> 00:20:57,163
So, let's use the span element simply for that right here,
402
00:20:59,700 --> 00:21:01,330
just like this.
403
00:21:01,330 --> 00:21:03,690
And so, this then makes it easier for us
404
00:21:03,690 --> 00:21:07,413
to for example, align these to using flexbox a bit later.
405
00:21:10,040 --> 00:21:12,423
So, let's see how it looks like in our code.
406
00:21:14,400 --> 00:21:15,500
And to do this,
407
00:21:15,500 --> 00:21:17,927
I think we will have to manually reload now.
408
00:21:20,240 --> 00:21:25,240
Well, that didn't really work, somehow.
409
00:21:25,870 --> 00:21:27,703
Let's see for a script is here.
410
00:21:31,780 --> 00:21:34,400
Yap, it is right here,
411
00:21:34,400 --> 00:21:37,243
but let's see here one our console.
412
00:21:38,170 --> 00:21:40,840
Oh, we see that there was some kind of error here
413
00:21:40,840 --> 00:21:42,750
for some reason.
414
00:21:42,750 --> 00:21:47,750
So, let's maybe try to quit this here.
415
00:21:48,390 --> 00:21:51,350
So, the live server and then try it again.
416
00:21:51,350 --> 00:21:52,863
So, go live again,
417
00:21:55,350 --> 00:21:58,570
and then let me reload that page here.
418
00:21:58,570 --> 00:22:01,180
And we still got the same error here.
419
00:22:01,180 --> 00:22:03,010
But actually off-camera,
420
00:22:03,010 --> 00:22:06,223
I discovered that we need to use another version here.
421
00:22:07,770 --> 00:22:12,400
So, basically we right now are using 5.5.1,
422
00:22:13,240 --> 00:22:16,770
but we want to use 5.4.0.
423
00:22:16,770 --> 00:22:19,420
Which is the version that I actually used previously.
424
00:22:21,870 --> 00:22:24,280
So, if we give it a save now,
425
00:22:24,280 --> 00:22:27,560
then you see that the icon is actually here.
426
00:22:27,560 --> 00:22:30,260
And so, even if it did work in your case,
427
00:22:30,260 --> 00:22:34,573
please make sure to also use version 5.4.0.
428
00:22:36,390 --> 00:22:39,080
Now, here we get this warning,
429
00:22:39,080 --> 00:22:41,921
which says that we should actually also use
430
00:22:41,921 --> 00:22:43,403
this script here.
431
00:22:44,720 --> 00:22:47,930
So, if you also got this warning,
432
00:22:47,930 --> 00:22:50,730
then just go ahead and copy this,
433
00:22:50,730 --> 00:22:53,663
and paste that right below this first one.
434
00:22:56,660 --> 00:23:00,530
But if you didn't get this warning, then nevermind,
435
00:23:00,530 --> 00:23:03,023
this is not something really important.
436
00:23:03,870 --> 00:23:08,870
Oh, and actually I didn't do as they tell us to do here.
437
00:23:09,140 --> 00:23:12,073
So, instead we should actually put us in the head.
438
00:23:13,310 --> 00:23:16,943
So, let's grab these two here, copy them.
439
00:23:20,300 --> 00:23:21,830
Remove this from here
440
00:23:24,480 --> 00:23:27,483
and put it right in the head.
441
00:23:29,280 --> 00:23:32,473
So, put that here after the CSS.
442
00:23:33,990 --> 00:23:37,390
So, you see that working with some third party libraries
443
00:23:37,390 --> 00:23:39,210
like this actually is,
444
00:23:39,210 --> 00:23:42,090
can sometimes take a little bit of time
445
00:23:42,090 --> 00:23:43,890
and be a bit difficult,
446
00:23:43,890 --> 00:23:46,793
but in the end we can manage to do it.
447
00:23:48,800 --> 00:23:53,560
And again, if those errors didn't occur in your case,
448
00:23:53,560 --> 00:23:56,030
then you can just pause the video
449
00:23:56,030 --> 00:23:58,520
and write exactly what I have here.
450
00:23:58,520 --> 00:24:01,773
And just make sure to use these same version numbers.
451
00:24:03,360 --> 00:24:05,270
And so now everything is working.
452
00:24:05,270 --> 00:24:07,810
This script is doing its magic.
453
00:24:07,810 --> 00:24:12,810
And it is injecting basically this flame icon into our code.
454
00:24:15,290 --> 00:24:17,920
And if we inspect this element,
455
00:24:17,920 --> 00:24:19,233
we can actually see that.
456
00:24:20,510 --> 00:24:23,470
So, you see that this Ironicon is now here.
457
00:24:23,470 --> 00:24:24,303
And then in there
458
00:24:24,303 --> 00:24:25,920
we have this strange thing,
459
00:24:25,920 --> 00:24:27,860
which is the shadow root.
460
00:24:27,860 --> 00:24:31,100
And then this is where the SVG lives.
461
00:24:31,100 --> 00:24:34,290
And so, you see it, this looks a little bit similar
462
00:24:34,290 --> 00:24:37,193
to the SVG that we manually copied before.
463
00:24:39,630 --> 00:24:42,360
But anyway, let's now just quickly take
464
00:24:42,360 --> 00:24:44,110
our remaining two icons
465
00:24:44,110 --> 00:24:47,363
so that we can then start styling this card.
466
00:24:50,480 --> 00:24:54,160
So, here let's use like a fork,
467
00:24:54,160 --> 00:24:57,883
or something while maybe it's called cutlery,
468
00:24:59,160 --> 00:25:03,253
or maybe it's called food or eating.
469
00:25:04,260 --> 00:25:06,470
So, sometimes we need to try a little bit,
470
00:25:06,470 --> 00:25:08,933
until we find what we're looking for.
471
00:25:10,340 --> 00:25:11,173
So, in this case,
472
00:25:11,173 --> 00:25:13,200
it's actually a restaurant.
473
00:25:13,200 --> 00:25:15,140
Or if we don't want to search,
474
00:25:15,140 --> 00:25:19,380
we can of course also just manually go through these icons,
475
00:25:19,380 --> 00:25:22,653
which is actually what I did before this lecture.
476
00:25:23,755 --> 00:25:26,003
So, to make it a bit faster to find it now.
477
00:25:37,120 --> 00:25:40,180
And again, let's then wrap the rest of the content here
478
00:25:40,180 --> 00:25:43,930
into a small span element.
479
00:25:43,930 --> 00:25:45,830
And then finally the rating
480
00:25:45,830 --> 00:25:48,483
is usually associated with stars.
481
00:25:51,390 --> 00:25:54,660
And so let's use this one here.
482
00:25:54,660 --> 00:25:55,853
Just copied it,
483
00:25:57,900 --> 00:25:59,363
place that right there.
484
00:26:01,530 --> 00:26:04,380
Then it's annoying that it immediately creates
485
00:26:04,380 --> 00:26:05,515
the closing one,
486
00:26:05,515 --> 00:26:07,543
that we don't want right there.
487
00:26:08,650 --> 00:26:11,250
But yeah, so with this,
488
00:26:11,250 --> 00:26:13,553
we should be good to go.
489
00:26:14,790 --> 00:26:16,500
We can close this one,
490
00:26:16,500 --> 00:26:19,830
but let's leave the rest of these tools here open
491
00:26:19,830 --> 00:26:22,523
as we keep needing them as we built our project.
492
00:26:24,930 --> 00:26:27,660
So, we have our very basic card here.
493
00:26:27,660 --> 00:26:29,960
It still doesn't have a lot of formatting.
494
00:26:29,960 --> 00:26:32,683
And so, let's take care of that in the next lecture.
34658
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.