Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,330 --> 00:00:04,210
So let's now learn how to use icons in
2
00:00:04,210 --> 00:00:07,773
our design using HTML and CSS.
3
00:00:08,840 --> 00:00:10,700
So as we just learned,
4
00:00:10,700 --> 00:00:13,920
the first thing we need to do when we want to work with
5
00:00:13,920 --> 00:00:17,700
icons is to actually choose an icon pack.
6
00:00:17,700 --> 00:00:19,750
Now, as I said, there are many,
7
00:00:19,750 --> 00:00:23,830
many free icon packs available, and in this project,
8
00:00:23,830 --> 00:00:26,610
we are going to use these ones here.
9
00:00:26,610 --> 00:00:28,190
So called Heroicons,
10
00:00:28,190 --> 00:00:33,190
which are available heroicons.com and the link as always
11
00:00:33,250 --> 00:00:36,650
can also be found on my resources page.
12
00:00:36,650 --> 00:00:41,310
Now, as it says here, this is a pack of SVG icons.
13
00:00:41,310 --> 00:00:44,540
So just as I mentioned, also in the last lecture,
14
00:00:44,540 --> 00:00:48,260
SVG is a format that can scale indefinitely.
15
00:00:48,260 --> 00:00:52,260
And so SVG icons are always a good choice.
16
00:00:52,260 --> 00:00:57,260
So you see that this pack consists of 230 icons,
17
00:00:57,970 --> 00:01:01,900
and it contains both icons with the outline style and then
18
00:01:01,900 --> 00:01:05,230
also the same icons, but in a solid style.
19
00:01:05,230 --> 00:01:06,630
So for example, here,
20
00:01:06,630 --> 00:01:09,550
this annotation icon here is what
21
00:01:09,550 --> 00:01:11,450
it looks like just with lines.
22
00:01:11,450 --> 00:01:16,450
And here is the solid version and that's even easier to see
23
00:01:17,080 --> 00:01:20,650
with these ones here, so if you compare them,
24
00:01:20,650 --> 00:01:22,800
it's very apparent that the solid one
25
00:01:22,800 --> 00:01:26,650
looks quite different than the outline one and different
26
00:01:26,650 --> 00:01:30,150
styles have different places in different designs.
27
00:01:30,150 --> 00:01:34,020
So just as we learned also in the last lecture, now,
28
00:01:34,020 --> 00:01:35,800
if we analyze these icons,
29
00:01:35,800 --> 00:01:38,660
we see that they are actually quite round.
30
00:01:38,660 --> 00:01:42,320
So while the typography that we have here on our page is
31
00:01:42,320 --> 00:01:45,380
actually a bit boxy or squared.
32
00:01:45,380 --> 00:01:47,133
So it's not really rounded,
33
00:01:48,170 --> 00:01:51,420
but these icons are quite simple to use.
34
00:01:51,420 --> 00:01:54,070
And so that's the main reason why I'm using them now for
35
00:01:54,070 --> 00:01:57,920
this project, so it's mainly for demonstration purposes,
36
00:01:57,920 --> 00:02:01,640
even though these icons might not be the perfect fit in
37
00:02:01,640 --> 00:02:03,220
terms of design,
38
00:02:03,220 --> 00:02:05,210
but actually as you will see,
39
00:02:05,210 --> 00:02:08,060
they actually still look quite good.
40
00:02:08,060 --> 00:02:10,690
All right, now in practice,
41
00:02:10,690 --> 00:02:15,510
there are multiple ways of using SVG icons in HTML.
42
00:02:15,510 --> 00:02:19,440
One of them is to download actual SVG files and then
43
00:02:19,440 --> 00:02:24,360
incorporate them into the HTML, just like regular images,
44
00:02:24,360 --> 00:02:27,000
however, that has a couple of limitations.
45
00:02:27,000 --> 00:02:31,710
And so the easiest way is to actually just copy the SVG code
46
00:02:31,710 --> 00:02:36,710
and that works because SVG is actually just code.
47
00:02:37,090 --> 00:02:40,930
So it's actually a similar specification to HTML,
48
00:02:40,930 --> 00:02:44,210
but basically to describe designs.
49
00:02:44,210 --> 00:02:47,660
So I'm not going to go into what SVG actually is.
50
00:02:47,660 --> 00:02:49,960
We just wanted to use it here.
51
00:02:49,960 --> 00:02:53,130
And so the first thing that we want to do now is to create
52
00:02:53,130 --> 00:02:55,210
some feature blocks here.
53
00:02:55,210 --> 00:02:56,610
So right here.
54
00:02:56,610 --> 00:03:00,470
So remember how I said that probably the common use case for
55
00:03:00,470 --> 00:03:03,490
icons is to create feature blocks.
56
00:03:03,490 --> 00:03:08,120
So where we have an icon like here at the top,
57
00:03:08,120 --> 00:03:10,920
then some heading and then some description.
58
00:03:10,920 --> 00:03:13,843
And so that's exactly what we will do now.
59
00:03:14,910 --> 00:03:18,050
So this first one here is about science.
60
00:03:18,050 --> 00:03:22,650
So let's look for an icon that basically describes science.
61
00:03:22,650 --> 00:03:25,740
And here on this site, we can actually search science.
62
00:03:28,470 --> 00:03:31,420
And so this one actually looks quite nice.
63
00:03:31,420 --> 00:03:36,420
So let's click here on copy SVG, all right.
64
00:03:36,860 --> 00:03:41,860
Then in our HTML and now the window is very narrow,
65
00:03:42,430 --> 00:03:45,263
but we can still see it I think.
66
00:03:46,660 --> 00:03:50,110
So here we have this container,
67
00:03:50,110 --> 00:03:54,090
which is the grid-3-cols, which has all of this here.
68
00:03:54,090 --> 00:03:57,130
And then we have three divs, and each of them is now a
69
00:03:57,130 --> 00:03:59,620
feature, right?
70
00:03:59,620 --> 00:04:02,690
So here we have this title and then in there,
71
00:04:02,690 --> 00:04:04,400
we have the actual text.
72
00:04:04,400 --> 00:04:07,550
And so let's put the icon first before this title right
73
00:04:07,550 --> 00:04:10,270
here, paste it.
74
00:04:10,270 --> 00:04:14,660
And so this is what the SVG code looks like for that
75
00:04:14,660 --> 00:04:19,660
particular icon, give it a save and there it is.
76
00:04:21,590 --> 00:04:24,190
And of course that's completely oversized.
77
00:04:24,190 --> 00:04:25,643
And so we can actually now,
78
00:04:26,550 --> 00:04:29,933
go ahead and format this SVG I can using CSS.
79
00:04:31,720 --> 00:04:34,490
So let's give it a nice class.
80
00:04:34,490 --> 00:04:37,853
It comes with this default here, which is not really useful.
81
00:04:39,190 --> 00:04:42,830
So let's call it feature icon.
82
00:04:42,830 --> 00:04:43,663
Okay.
83
00:04:43,663 --> 00:04:46,030
And this class needs to be right here inside
84
00:04:46,030 --> 00:04:47,753
of the SVG element.
85
00:04:48,700 --> 00:04:50,830
So again, as I mentioned,
86
00:04:50,830 --> 00:04:54,720
SVG is basically just a way of describing graphical
87
00:04:54,720 --> 00:04:57,963
elements, such like this icon here.
88
00:04:58,830 --> 00:05:03,830
So SVG is still an element in HTML and it has an opening tag
89
00:05:04,500 --> 00:05:06,120
and a closing tag.
90
00:05:06,120 --> 00:05:09,960
And inside of it in this case is a path element,
91
00:05:09,960 --> 00:05:12,870
which has like all of these coordinates,
92
00:05:12,870 --> 00:05:16,203
which describe exactly what this icon should look like.
93
00:05:17,520 --> 00:05:20,660
All right. Of course we never write this by hand.
94
00:05:20,660 --> 00:05:24,193
So we just copied this icon from our icon pack.
95
00:05:25,350 --> 00:05:26,810
Great, but anyway,
96
00:05:26,810 --> 00:05:31,420
let's now use this class that we added to this SVG element,
97
00:05:31,420 --> 00:05:35,070
just like any other element, right.
98
00:05:35,070 --> 00:05:38,243
And so now let's go here to our CSS.
99
00:05:43,030 --> 00:05:44,750
Yeah, you're close to the features.
100
00:05:44,750 --> 00:05:48,400
Oh, and actually I already had the selector here,
101
00:05:48,400 --> 00:05:50,260
so that's helpful.
102
00:05:50,260 --> 00:05:53,193
And so now let's start by defining the color.
103
00:05:54,090 --> 00:05:56,843
And for that, we use the stroke property,
104
00:05:58,620 --> 00:06:03,543
and then our color, and that's it, give it a save and that,
105
00:06:04,380 --> 00:06:06,410
didn't change a thing.
106
00:06:06,410 --> 00:06:09,380
So let's see what's wrong, so features icon,
107
00:06:09,380 --> 00:06:11,750
maybe I wrote that wrong.
108
00:06:11,750 --> 00:06:14,070
Oh yeah, here I have feature,
109
00:06:14,070 --> 00:06:16,580
but I want it to be called features icon.
110
00:06:16,580 --> 00:06:18,693
And now, now it is green.
111
00:06:20,580 --> 00:06:23,503
Nice. But of course, it's way too big.
112
00:06:24,650 --> 00:06:28,200
Now here actually in the description of these icons,
113
00:06:28,200 --> 00:06:32,090
it tells us right away that this is designed to be rendered
114
00:06:32,090 --> 00:06:36,363
at 24 by 24 pixels, right?
115
00:06:37,350 --> 00:06:40,770
So as I mentioned, by the end of the last lecture,
116
00:06:40,770 --> 00:06:44,830
some icons are designed to be used in a small setting and
117
00:06:44,830 --> 00:06:47,343
these icons are one of those.
118
00:06:48,260 --> 00:06:52,730
So let's start by using 24 by 24, and we simply do that,
119
00:06:52,730 --> 00:06:54,453
just like any other element.
120
00:06:55,490 --> 00:07:00,223
So width, 24 pixels and height,
121
00:07:01,170 --> 00:07:05,530
also 24 pixels, all right,
122
00:07:05,530 --> 00:07:08,503
now this looks actually really, really small.
123
00:07:09,360 --> 00:07:12,380
And so maybe we can push that a little bit
124
00:07:12,380 --> 00:07:14,873
to like 32 pixels.
125
00:07:16,390 --> 00:07:19,780
And so I think that this still looks nice.
126
00:07:19,780 --> 00:07:22,900
It doesn't look like the example I showed you
127
00:07:22,900 --> 00:07:24,720
in the last lecture.
128
00:07:24,720 --> 00:07:28,080
Now, if we were to use something like 50 pixels,
129
00:07:28,080 --> 00:07:31,660
then we would see that effect where the line suddenly
130
00:07:31,660 --> 00:07:33,960
becomes way too thick.
131
00:07:33,960 --> 00:07:37,870
Right. So now it does no longer look good here.
132
00:07:37,870 --> 00:07:42,470
So we definitely need to make it smaller, but 32,
133
00:07:42,470 --> 00:07:44,550
I think still looks fine.
134
00:07:44,550 --> 00:07:47,640
We also need to use some common sense and compare it for
135
00:07:47,640 --> 00:07:51,450
example here with the width of these characters.
136
00:07:51,450 --> 00:07:53,440
And so, yep.
137
00:07:53,440 --> 00:07:55,083
That looks acceptable to me.
138
00:07:56,410 --> 00:07:59,453
Let's just also add some margin bottom here.
139
00:08:00,940 --> 00:08:03,750
Let's say 16 pixels.
140
00:08:03,750 --> 00:08:05,400
So that's okay for now,
141
00:08:05,400 --> 00:08:08,920
but we will talk about visual hierarchy a little bit later,
142
00:08:08,920 --> 00:08:11,410
and then we will adjust all the margins.
143
00:08:11,410 --> 00:08:14,390
So all the spacing all over the page.
144
00:08:14,390 --> 00:08:17,610
Now we could also have used that technique where we would
145
00:08:17,610 --> 00:08:21,590
enclose this icon into some kind of circle with a green
146
00:08:21,590 --> 00:08:23,040
background color.
147
00:08:23,040 --> 00:08:25,710
But since this is a very simple design,
148
00:08:25,710 --> 00:08:28,900
I think that that would actually add a little bit too much
149
00:08:28,900 --> 00:08:31,630
visual clutter to this design.
150
00:08:31,630 --> 00:08:33,260
So let's not do that.
151
00:08:33,260 --> 00:08:37,260
And instead do it in our next big project.
152
00:08:37,260 --> 00:08:38,093
All right.
153
00:08:38,950 --> 00:08:39,783
But anyway,
154
00:08:39,783 --> 00:08:41,790
let's now find an icon for this one
155
00:08:41,790 --> 00:08:44,120
and for this one here as well.
156
00:08:44,120 --> 00:08:48,170
And well, as I mentioned also by the end of last lecture,
157
00:08:48,170 --> 00:08:50,560
this is not always very easy.
158
00:08:50,560 --> 00:08:52,950
So an icon pack like this with only
159
00:08:52,950 --> 00:08:55,100
230 icons is of course,
160
00:08:55,100 --> 00:08:58,870
a little bit limited and cannot have icons for every single
161
00:08:58,870 --> 00:09:00,840
situation that we want.
162
00:09:00,840 --> 00:09:04,030
So I've searched in this icon pack here a lot
163
00:09:06,790 --> 00:09:10,350
and I will not spend a ton of time now discussing the
164
00:09:10,350 --> 00:09:11,700
different options.
165
00:09:11,700 --> 00:09:14,650
I will just use here for comfort,
166
00:09:14,650 --> 00:09:16,823
an icon that is called Happy.
167
00:09:18,140 --> 00:09:21,710
So this one, all right, so this one,
168
00:09:21,710 --> 00:09:26,420
I think still kind of conveys the message of comfort.
169
00:09:26,420 --> 00:09:28,403
And so let's just use that.
170
00:09:30,860 --> 00:09:33,283
So let's go here to our next one.
171
00:09:35,640 --> 00:09:37,633
Right here.
172
00:09:39,493 --> 00:09:41,040
And then the class should be
173
00:09:45,890 --> 00:09:50,890
features well, not cion or whatever that was.
174
00:09:52,920 --> 00:09:54,050
Yeah.
175
00:09:54,050 --> 00:09:57,830
Nice. And now this one here, ethical and sustainable.
176
00:09:57,830 --> 00:10:00,070
So that's like use a heart,
177
00:10:00,070 --> 00:10:02,650
which is something that many pages
178
00:10:02,650 --> 00:10:04,823
use for this kind of messaging.
179
00:10:05,800 --> 00:10:09,670
And over time with experience, you will, of course,
180
00:10:09,670 --> 00:10:13,520
then start to get a feeling of what icon is right
181
00:10:13,520 --> 00:10:14,853
for what situation.
182
00:10:16,170 --> 00:10:17,690
So just like everything else,
183
00:10:17,690 --> 00:10:20,513
this is really also a matter of experience.
184
00:10:23,030 --> 00:10:25,493
So this should be our heart.
185
00:10:26,430 --> 00:10:31,430
And so features icon and beautiful.
186
00:10:31,650 --> 00:10:33,450
That looks really nice.
187
00:10:33,450 --> 00:10:34,750
So these icons here,
188
00:10:34,750 --> 00:10:37,380
they make a lot of difference if you ask me,
189
00:10:37,380 --> 00:10:39,250
it's a really nice touch.
190
00:10:39,250 --> 00:10:42,510
And so now once the user reaches this section here,
191
00:10:42,510 --> 00:10:44,960
it just makes the whole content a little bit easier to
192
00:10:44,960 --> 00:10:49,960
digest and just easier to look at too, great.
193
00:10:50,520 --> 00:10:54,780
So here we created three feature blocks using icons,
194
00:10:54,780 --> 00:10:56,030
and now let's use
195
00:10:56,030 --> 00:10:59,150
one of the other big applications of icons,
196
00:10:59,150 --> 00:11:02,913
which is to simply provide visual assistance to text.
197
00:11:03,850 --> 00:11:07,920
So here we have these, as we call them, cards.
198
00:11:07,920 --> 00:11:11,140
So basically a component which has an image and a
199
00:11:11,140 --> 00:11:16,140
description and then some like bullet points, as we can say.
200
00:11:16,880 --> 00:11:21,080
So short descriptions of features of products,
201
00:11:21,080 --> 00:11:24,210
and then down here also a button and a price.
202
00:11:24,210 --> 00:11:27,410
So this is a typical cart in like a shop.
203
00:11:27,410 --> 00:11:32,410
And it's also very common to add an icon to each of these
204
00:11:32,580 --> 00:11:34,690
text descriptions right here.
205
00:11:34,690 --> 00:11:37,170
So one describing like leisure,
206
00:11:37,170 --> 00:11:41,450
one describing for how long it is comfortable then saying
207
00:11:41,450 --> 00:11:44,840
that they use vegan and organic materials.
208
00:11:44,840 --> 00:11:47,270
And finally, also the weight.
209
00:11:47,270 --> 00:11:50,420
So let's try to use an icon for each of these to make this
210
00:11:50,420 --> 00:11:52,760
content a little bit easier to digest
211
00:11:52,760 --> 00:11:54,683
and easier to scan as well.
212
00:11:56,170 --> 00:11:57,330
So again,
213
00:11:57,330 --> 00:12:01,240
I have already searched through the icons and for the first
214
00:12:01,240 --> 00:12:05,140
one, there was not really a really good fit, but again,
215
00:12:05,140 --> 00:12:08,670
I really wanted to use this icon pack because it's so easy
216
00:12:08,670 --> 00:12:13,000
to use, and therefore that was my main focus.
217
00:12:13,000 --> 00:12:16,530
Even though if the icons were not perfect.
218
00:12:16,530 --> 00:12:20,193
So here, I'm going to use this icon called Sparkles.
219
00:12:24,070 --> 00:12:29,070
So let's go down here, here it is already, right?
220
00:12:29,670 --> 00:12:34,030
And so here, each of these lines here is inside of a list.
221
00:12:34,030 --> 00:12:35,800
So this unordered list,
222
00:12:35,800 --> 00:12:38,250
and then each of them is a list element,
223
00:12:38,250 --> 00:12:42,940
but I used CSS to remove the bullet points from this list.
224
00:12:42,940 --> 00:12:45,193
That's why we cannot see them there.
225
00:12:46,090 --> 00:12:48,410
So inside of each list item,
226
00:12:48,410 --> 00:12:53,410
let's now paste the icon and there it is already.
227
00:12:53,700 --> 00:12:56,830
And so this is also the reason why we then have this
228
00:12:56,830 --> 00:12:58,980
span element here.
229
00:12:58,980 --> 00:13:02,660
So that basically all the content is inside of an element.
230
00:13:02,660 --> 00:13:05,270
So we have the icon inside of an SVG.
231
00:13:05,270 --> 00:13:08,690
And then besides that we have the text inside a span
232
00:13:08,690 --> 00:13:12,820
element, which remember is a generic inline element,
233
00:13:12,820 --> 00:13:16,113
a little bit like divs for block level elements.
234
00:13:17,510 --> 00:13:18,343
All right.
235
00:13:19,350 --> 00:13:23,200
So let's also add a class to these ones
236
00:13:25,150 --> 00:13:28,573
and I'm calling these ones a chair icon.
237
00:13:29,623 --> 00:13:30,456
Okay.
238
00:13:31,860 --> 00:13:36,860
So that's the features icon and down here, yeah.
239
00:13:37,620 --> 00:13:40,710
I already have to selector for the chair icon.
240
00:13:40,710 --> 00:13:43,330
So let's start again with the color.
241
00:13:43,330 --> 00:13:44,163
And so for that,
242
00:13:44,163 --> 00:13:46,610
remember we used the stroke property
243
00:13:46,610 --> 00:13:48,343
and set it to this color.
244
00:13:49,620 --> 00:13:54,280
Now, if you were to use these solid icons here,
245
00:13:54,280 --> 00:13:56,630
then instead of using the stroke property,
246
00:13:56,630 --> 00:13:59,700
you would actually need the fill property.
247
00:13:59,700 --> 00:14:00,700
All right.
248
00:14:00,700 --> 00:14:02,630
So those are two different options
249
00:14:02,630 --> 00:14:06,540
when you want to style the color of an SVG icon.
250
00:14:06,540 --> 00:14:10,770
And actually we can still try that in this icon here.
251
00:14:10,770 --> 00:14:14,620
So let's just see what happens if we define the fill,
252
00:14:14,620 --> 00:14:16,490
let's just put it to red.
253
00:14:16,490 --> 00:14:20,823
And then the icon is suddenly filled with our red color.
254
00:14:22,200 --> 00:14:25,733
All right. But now let's change the size here.
255
00:14:28,570 --> 00:14:31,883
And these ones, let's actually make them 24 pixels.
256
00:14:33,600 --> 00:14:36,563
So basically the size for which they were designed.
257
00:14:37,740 --> 00:14:39,623
And that looks quite nice.
258
00:14:40,850 --> 00:14:41,940
Okay.
259
00:14:41,940 --> 00:14:44,090
And so our styles are now done.
260
00:14:44,090 --> 00:14:47,100
All we need to do is to find the icons
261
00:14:47,100 --> 00:14:49,430
and display them there.
262
00:14:49,430 --> 00:14:52,610
So here in this one here, we are telling the customer
263
00:14:52,610 --> 00:14:56,010
for how long the chair is comfortable.
264
00:14:56,010 --> 00:15:00,157
So that sounds like we want to display a clock there, right?
265
00:15:02,670 --> 00:15:06,500
So the clock will then quickly tell the user that
266
00:15:06,500 --> 00:15:08,543
it is something related to time.
267
00:15:14,130 --> 00:15:17,693
Then we just need to add a class, chair-icon.
268
00:15:19,150 --> 00:15:20,300
All right,
269
00:15:20,300 --> 00:15:25,230
next up we have like this vegan and organic materials,
270
00:15:25,230 --> 00:15:27,700
which basically means that we want to care
271
00:15:27,700 --> 00:15:31,150
about the environment, right?
272
00:15:31,150 --> 00:15:35,040
So for that, we can use this earth icon.
273
00:15:38,020 --> 00:15:40,633
Yeah. So actually this one called globe.
274
00:15:41,700 --> 00:15:45,293
So let's copy that, call it the chair-icon.
275
00:15:53,090 --> 00:15:54,290
Nice.
276
00:15:54,290 --> 00:15:56,880
That's beautiful, and finally here,
277
00:15:56,880 --> 00:15:59,163
we want the weight of a box.
278
00:16:00,320 --> 00:16:04,483
So let's use something which looks like a box.
279
00:16:07,540 --> 00:16:11,880
So box, but this one here, well,
280
00:16:11,880 --> 00:16:13,890
somehow it doesn't look really appealing.
281
00:16:13,890 --> 00:16:16,090
It really looks more like an archive,
282
00:16:16,090 --> 00:16:19,000
which is the name here also of the icon.
283
00:16:19,000 --> 00:16:23,470
So let's try cube and that one looks a lot better.
284
00:16:23,470 --> 00:16:25,320
So copy SVG.
285
00:16:25,320 --> 00:16:27,360
But of course I noticed because
286
00:16:27,360 --> 00:16:29,850
I already designed this beforehand.
287
00:16:29,850 --> 00:16:32,140
So if you were designing this yourself,
288
00:16:32,140 --> 00:16:35,160
you would probably have to go through this whole list of
289
00:16:35,160 --> 00:16:39,940
icons and decide between all of them, what fits best,
290
00:16:39,940 --> 00:16:41,760
according to your message.
291
00:16:41,760 --> 00:16:44,300
But since that takes a lot of time,
292
00:16:44,300 --> 00:16:47,703
I already did that here beforehand of course.
293
00:16:50,600 --> 00:16:55,600
So chair-icon, and there you go.
294
00:16:56,950 --> 00:17:01,950
So this looks a lot better here than this one, right?
295
00:17:02,000 --> 00:17:05,760
So again, we added some nice little touch here,
296
00:17:05,760 --> 00:17:07,000
both visually,
297
00:17:07,000 --> 00:17:10,460
and also to actually make it easier to scan the content
298
00:17:10,460 --> 00:17:12,703
all by using four simple icons.
299
00:17:13,770 --> 00:17:15,610
So that's really cool.
300
00:17:15,610 --> 00:17:19,300
And so now all we need to do is to copy these to this card
301
00:17:19,300 --> 00:17:21,083
and to this one here as well.
302
00:17:22,320 --> 00:17:25,860
So let me now actually show you a very nice trick that we
303
00:17:25,860 --> 00:17:29,983
can use in VS Code, which is to use multiple cursors.
304
00:17:31,320 --> 00:17:33,480
And I'm going to start by doing that
305
00:17:33,480 --> 00:17:35,920
in a very small example.
306
00:17:35,920 --> 00:17:39,380
So let's say I wanted to select two different words.
307
00:17:39,380 --> 00:17:43,860
So let's say this one, block quote, and now on my keyboard,
308
00:17:43,860 --> 00:17:48,860
I can hit the Alt key or Option on a Mac and I can select
309
00:17:48,900 --> 00:17:52,493
another word, let's say like this.
310
00:17:53,390 --> 00:17:55,810
And so right now you see that we have
311
00:17:55,810 --> 00:17:59,160
two blinking cursors here, right?
312
00:17:59,160 --> 00:18:01,300
And now I can copy this.
313
00:18:01,300 --> 00:18:03,290
So I just copied,
314
00:18:03,290 --> 00:18:06,363
and let's say I wanted to paste these two somewhere.
315
00:18:07,790 --> 00:18:12,130
So maybe actually just here or actually that doesn't make a
316
00:18:12,130 --> 00:18:13,380
lot of sense.
317
00:18:13,380 --> 00:18:18,380
So, well, let's say just here and maybe here.
318
00:18:19,310 --> 00:18:22,760
And so to add now another cursor, I can again,
319
00:18:22,760 --> 00:18:25,393
hit the Option key or the Alt key.
320
00:18:26,470 --> 00:18:28,010
So just like this.
321
00:18:28,010 --> 00:18:30,310
And so now again, I have two cursors.
322
00:18:30,310 --> 00:18:33,453
And so if I now paste what I selected earlier,
323
00:18:34,810 --> 00:18:38,560
then these two words appear exactly where we had these two
324
00:18:38,560 --> 00:18:42,820
cursors and I can actually now do things with these two
325
00:18:42,820 --> 00:18:44,343
cursors at the same time.
326
00:18:45,320 --> 00:18:49,460
So I can add a space here and I can move around to text and
327
00:18:49,460 --> 00:18:51,453
do everything in multiple places.
328
00:18:53,330 --> 00:18:57,620
So that's going to be very helpful to copy these icons here,
329
00:18:57,620 --> 00:19:00,483
not one by one, but all at once.
330
00:19:01,710 --> 00:19:04,550
So let's select all of them.
331
00:19:04,550 --> 00:19:08,330
So the first one is this and all the way
332
00:19:08,330 --> 00:19:11,110
until the end of the SVG.
333
00:19:11,110 --> 00:19:12,630
So that's the first one.
334
00:19:12,630 --> 00:19:13,770
And now again,
335
00:19:13,770 --> 00:19:18,590
I will hit the Alt or Option key before I click here again
336
00:19:19,610 --> 00:19:21,780
and select all of this.
337
00:19:21,780 --> 00:19:25,890
So you see that now we have this one selected and this one,
338
00:19:25,890 --> 00:19:27,410
and now let's do it again.
339
00:19:27,410 --> 00:19:31,930
And don't forget to hit the Alt or Option key before
340
00:19:31,930 --> 00:19:33,510
clicking here.
341
00:19:33,510 --> 00:19:36,173
Otherwise you will lose your other selections.
342
00:19:39,090 --> 00:19:42,113
Okay, so three and again,
343
00:19:44,050 --> 00:19:49,050
so one, two, three, four selections, and now copy it.
344
00:19:51,010 --> 00:19:51,980
And now down here,
345
00:19:51,980 --> 00:19:54,180
we just need to go to the places
346
00:19:54,180 --> 00:19:56,290
where we want the icons to be.
347
00:19:56,290 --> 00:20:00,460
So that's here and now again,
348
00:20:00,460 --> 00:20:05,460
out and here and here and here, right?
349
00:20:06,430 --> 00:20:11,430
And so now paste and save and there it is.
350
00:20:13,090 --> 00:20:16,220
So very simple way of copying everything at the same
351
00:20:16,220 --> 00:20:18,803
time, which saves us a lot of time.
352
00:20:19,790 --> 00:20:22,093
And so now we can just do it again right here.
353
00:20:24,550 --> 00:20:29,543
So here and here and here and here, paste it, save it.
354
00:20:30,600 --> 00:20:31,853
And there you go.
355
00:20:32,750 --> 00:20:36,290
Now, if you didn't manage to do it like this, of course,
356
00:20:36,290 --> 00:20:39,740
you can also copy them one by one individually,
357
00:20:39,740 --> 00:20:42,550
but this is a trick that I use all the time
358
00:20:42,550 --> 00:20:44,670
when I'm using VS Code.
359
00:20:44,670 --> 00:20:46,240
Okay.
360
00:20:46,240 --> 00:20:50,000
And so that's how you use icons in your designs
361
00:20:50,000 --> 00:20:53,240
following the rules that I described earlier.
362
00:20:53,240 --> 00:20:57,610
So we used a nice icon pack with SVG icons.
363
00:20:57,610 --> 00:21:00,970
We used them in two different situations to create feature
364
00:21:00,970 --> 00:21:05,970
blocks and to provide visual assistance to text down here.
365
00:21:06,150 --> 00:21:08,330
We didn't make the icons too big.
366
00:21:08,330 --> 00:21:12,420
And also we try to choose icons that actually make sense,
367
00:21:12,420 --> 00:21:16,850
which in most of the cases I think we actually achieved.
368
00:21:16,850 --> 00:21:18,470
Awesome, so with that,
369
00:21:18,470 --> 00:21:21,500
you mastered yet another very important ingredient
370
00:21:21,500 --> 00:21:23,600
of great web design.
371
00:21:23,600 --> 00:21:27,200
And so now let's move on together to the next one,
372
00:21:27,200 --> 00:21:29,430
which is shadows.
373
00:21:29,430 --> 00:21:31,163
So I'll see you there very soon.
27854
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.