Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,285 --> 00:00:04,689
Time for another exciting coding challenge
2
00:00:04,689 --> 00:00:08,923
so that you can keep practicing your new HTML skills.
3
00:00:10,400 --> 00:00:14,070
And in this one, I want you to build this component
4
00:00:14,070 --> 00:00:17,110
for this Converse All Star shoe.
5
00:00:17,110 --> 00:00:19,010
And I'm saying component here
6
00:00:19,010 --> 00:00:22,180
because I want you to imagine this content here
7
00:00:22,180 --> 00:00:26,290
in the context of something like an e-commerce store.
8
00:00:26,290 --> 00:00:29,240
So imagine that we have a shoe store
9
00:00:29,240 --> 00:00:32,093
and there are multiple shoes and for each of them,
10
00:00:32,093 --> 00:00:35,370
there is then like this small component
11
00:00:35,370 --> 00:00:36,980
with this description.
12
00:00:36,980 --> 00:00:38,940
So stuff like the price,
13
00:00:38,940 --> 00:00:41,360
a short description, a link
14
00:00:41,360 --> 00:00:44,220
and then some product details here.
15
00:00:44,220 --> 00:00:46,450
Now, I am building this component,
16
00:00:46,450 --> 00:00:48,580
so I'm writing this HTML
17
00:00:48,580 --> 00:00:52,173
on a special coding platform called codepen.io.
18
00:00:53,920 --> 00:00:55,990
So this is a place online
19
00:00:55,990 --> 00:00:58,610
where we can basically write our code
20
00:00:58,610 --> 00:01:01,320
and it will then automatically execute the code
21
00:01:01,320 --> 00:01:04,379
and render it and it makes it also easy
22
00:01:04,379 --> 00:01:06,460
to share that code.
23
00:01:06,460 --> 00:01:09,520
Now, of course, you don't need to use CodePen
24
00:01:09,520 --> 00:01:11,690
in order to complete this challenge.
25
00:01:11,690 --> 00:01:15,290
You can just go to your code editor
26
00:01:15,290 --> 00:01:19,100
and for example, add a brand new HTML file here
27
00:01:19,100 --> 00:01:22,280
and then build all the code in there.
28
00:01:22,280 --> 00:01:25,060
The reason why I'm not doing that here in the video
29
00:01:25,060 --> 00:01:26,840
is because we're actually gonna build
30
00:01:26,840 --> 00:01:28,870
on this challenge later.
31
00:01:28,870 --> 00:01:32,390
So we will keep developing this very small project
32
00:01:32,390 --> 00:01:34,140
over the next few sections
33
00:01:34,140 --> 00:01:35,970
and that will then create a mess
34
00:01:35,970 --> 00:01:40,227
of different files and a lot of different code.
35
00:01:40,227 --> 00:01:42,890
But of course, because you're doing it on your own,
36
00:01:42,890 --> 00:01:44,320
on your own computer,
37
00:01:44,320 --> 00:01:45,680
it's easier for you
38
00:01:45,680 --> 00:01:47,470
and so you can just, as I said,
39
00:01:47,470 --> 00:01:51,850
if you want, create a new HTML file and do it here.
40
00:01:51,850 --> 00:01:53,120
But on the other hand,
41
00:01:53,120 --> 00:01:55,420
I think it's also helpful and useful
42
00:01:55,420 --> 00:01:59,080
for you to learn a little bit about codepen.io
43
00:01:59,080 --> 00:02:01,493
and create the challenge there.
44
00:02:02,670 --> 00:02:04,640
So let me just give you
45
00:02:04,640 --> 00:02:06,973
a very quick demonstration of CodePen.
46
00:02:08,180 --> 00:02:10,870
So just google CodePen I would say
47
00:02:10,870 --> 00:02:13,610
or you can go to codepen.io.
48
00:02:13,610 --> 00:02:16,130
And then all you have to is to click here
49
00:02:16,130 --> 00:02:18,120
on Start Coding.
50
00:02:18,120 --> 00:02:19,654
Now, maybe in the future,
51
00:02:19,654 --> 00:02:22,610
something has changed about CodePen,
52
00:02:22,610 --> 00:02:24,250
so about this interface
53
00:02:24,250 --> 00:02:27,150
but you will always be able to create a new CodePen
54
00:02:27,150 --> 00:02:30,990
simply by going to codepen.io/pen.
55
00:02:30,990 --> 00:02:32,083
So just like this.
56
00:02:33,340 --> 00:02:35,830
So here we basically have a panel
57
00:02:35,830 --> 00:02:38,480
where we can write HTML, CSS
58
00:02:38,480 --> 00:02:40,610
and JavaScript if we want.
59
00:02:40,610 --> 00:02:44,030
Or we can also just collapse these panels
60
00:02:44,030 --> 00:02:45,690
if we don't need them,
61
00:02:45,690 --> 00:02:47,640
which is the case right now.
62
00:02:47,640 --> 00:02:49,910
And so we can write our HTML.
63
00:02:49,910 --> 00:02:52,473
Let's just write an h1 element.
64
00:02:54,850 --> 00:02:56,803
Hello, World, for example.
65
00:02:58,750 --> 00:02:59,820
And you see that here we have
66
00:02:59,820 --> 00:03:03,573
to again manually close the element.
67
00:03:04,740 --> 00:03:07,290
But anyway, you see that after some time,
68
00:03:07,290 --> 00:03:10,470
It then renders the result down here.
69
00:03:10,470 --> 00:03:12,773
So in this results panel basically.
70
00:03:13,660 --> 00:03:16,833
You can also change the name of your CodePen.
71
00:03:18,430 --> 00:03:21,270
So let's say Challenge #2,
72
00:03:21,270 --> 00:03:23,323
which is the name of this lecture.
73
00:03:24,810 --> 00:03:28,140
Okay, and then you can also save it.
74
00:03:28,140 --> 00:03:31,700
Now, to save it, you will have to create a free account
75
00:03:31,700 --> 00:03:34,970
but I would say that it's actually worthwhile to do so.
76
00:03:34,970 --> 00:03:38,560
But of course, it's optional and you're not forced
77
00:03:38,560 --> 00:03:40,960
to create a new account here
78
00:03:40,960 --> 00:03:43,320
but if you do, that is actually very helpful
79
00:03:43,320 --> 00:03:46,490
because then you will get a special URL
80
00:03:46,490 --> 00:03:48,030
for each CodePen
81
00:03:48,030 --> 00:03:51,150
and then you can share that CodePen with others.
82
00:03:51,150 --> 00:03:54,750
So if you want to just like create a quick example,
83
00:03:54,750 --> 00:03:56,510
a quick demo of something
84
00:03:56,510 --> 00:03:58,050
to show it to someone,
85
00:03:58,050 --> 00:04:00,770
then you can just come to CodePen,
86
00:04:00,770 --> 00:04:02,270
create it right here
87
00:04:02,270 --> 00:04:05,360
and then copy, paste the URL from here
88
00:04:05,360 --> 00:04:07,190
once you have saved it
89
00:04:07,190 --> 00:04:08,180
and by the way,
90
00:04:08,180 --> 00:04:11,380
what I just described is actually also the best way
91
00:04:11,380 --> 00:04:14,990
of sharing code in the Q&A section on Udemy
92
00:04:14,990 --> 00:04:17,202
in case you run into any problems.
93
00:04:18,610 --> 00:04:19,442
Okay?
94
00:04:19,442 --> 00:04:21,790
So again, it would probably be a good idea
95
00:04:21,790 --> 00:04:23,810
to create an account here
96
00:04:23,810 --> 00:04:24,970
because it's just useful
97
00:04:24,970 --> 00:04:27,680
and many, many programmers use CodePen.
98
00:04:27,680 --> 00:04:29,940
It's a very popular tool.
99
00:04:29,940 --> 00:04:32,730
But anyway, going back now to the challenge,
100
00:04:32,730 --> 00:04:34,793
let me give you a couple of hints.
101
00:04:35,630 --> 00:04:38,270
Okay, so this is what the result looks like
102
00:04:38,270 --> 00:04:40,310
that I want you to build
103
00:04:40,310 --> 00:04:42,220
but to help you a little bit,
104
00:04:42,220 --> 00:04:45,640
I will actually need to change here a bit of the code.
105
00:04:45,640 --> 00:04:47,270
So here in Change View,
106
00:04:47,270 --> 00:04:50,990
we can now switch to the editor view,
107
00:04:50,990 --> 00:04:55,343
which will then look just like what I showed you before.
108
00:04:57,190 --> 00:05:00,020
All right, so now we have the editors here on top
109
00:05:00,020 --> 00:05:01,653
and then the result down here.
110
00:05:02,930 --> 00:05:06,030
So there are some things I need to explain
111
00:05:06,030 --> 00:05:08,060
before you can get started.
112
00:05:08,060 --> 00:05:10,560
So first of all, I want you to wrap all
113
00:05:10,560 --> 00:05:14,180
of this content inside an article element.
114
00:05:14,180 --> 00:05:15,980
And remember how I mentioned
115
00:05:15,980 --> 00:05:18,760
that an article element cannot only be used
116
00:05:18,760 --> 00:05:22,120
for something like a written blog post article
117
00:05:22,120 --> 00:05:26,060
but also for like really a physical article
118
00:05:26,060 --> 00:05:30,120
and so a shoe like this is a perfect example for that.
119
00:05:30,120 --> 00:05:31,770
So this is an article
120
00:05:31,770 --> 00:05:34,070
and again, coming back to the example
121
00:05:34,070 --> 00:05:37,690
of having like an e-commerce store,
122
00:05:37,690 --> 00:05:40,580
then each shoe would be a different article
123
00:05:40,580 --> 00:05:43,320
and so you would have one article element
124
00:05:43,320 --> 00:05:46,513
for each of the shoes, right?
125
00:05:47,810 --> 00:05:51,800
Then down here, there's an element that we have never used,
126
00:05:51,800 --> 00:05:54,360
which is this clickable button.
127
00:05:54,360 --> 00:05:55,760
And so down here,
128
00:05:55,760 --> 00:05:59,010
you see that this is simply the button element.
129
00:05:59,010 --> 00:06:02,150
And so you can just go ahead and use that.
130
00:06:02,150 --> 00:06:04,970
And then finally, there's something else,
131
00:06:04,970 --> 00:06:08,460
which is this symbol here, so this arrow here.
132
00:06:08,460 --> 00:06:12,520
Now, remember how back in our project,
133
00:06:12,520 --> 00:06:16,110
so here, I mentioned that this symbol right here,
134
00:06:16,110 --> 00:06:20,150
this copyright symbol is an HTML entity, right?
135
00:06:20,150 --> 00:06:23,280
Remember that, and so this arrow here
136
00:06:23,280 --> 00:06:26,190
is just another HTML entity.
137
00:06:26,190 --> 00:06:27,580
And I also mentioned back then
138
00:06:27,580 --> 00:06:29,630
that there is a very handy list
139
00:06:29,630 --> 00:06:32,943
on my resources page, which is this one.
140
00:06:33,870 --> 00:06:35,930
Now, if you're watching this in the future,
141
00:06:35,930 --> 00:06:39,630
then this page probably looks quite different
142
00:06:39,630 --> 00:06:42,400
but for now, this is what I have
143
00:06:42,400 --> 00:06:46,370
and the HTML entity reference that I meant,
144
00:06:46,370 --> 00:06:49,100
so that I mentioned earlier is this one.
145
00:06:49,100 --> 00:06:51,740
So let's just open it up actually
146
00:06:51,740 --> 00:06:56,740
and then there is a lot of stuff that you can use.
147
00:06:56,920 --> 00:06:58,950
So all of these different symbols
148
00:06:58,950 --> 00:07:01,260
and here, for example, is the copy symbol
149
00:07:01,260 --> 00:07:03,543
that we used before in VS Code.
150
00:07:04,660 --> 00:07:06,110
Now, this is a huge list
151
00:07:06,110 --> 00:07:08,650
and I'm just going to use a Command
152
00:07:08,650 --> 00:07:13,340
or Control + F to search on the page for arrows
153
00:07:14,270 --> 00:07:15,483
and here we go.
154
00:07:16,360 --> 00:07:18,930
So there are all these different arrows here
155
00:07:18,930 --> 00:07:20,963
and the one that I used is this.
156
00:07:21,950 --> 00:07:23,630
So to insert this arrow
157
00:07:23,630 --> 00:07:25,790
into your own HTML code,
158
00:07:25,790 --> 00:07:30,260
all you have to do is to write this HTML entity.
159
00:07:30,260 --> 00:07:31,093
Okay?
160
00:07:32,040 --> 00:07:35,180
And yeah, I will leave this.
161
00:07:35,180 --> 00:07:37,430
Oh, well, actually, we don't need it anymore.
162
00:07:38,470 --> 00:07:39,790
Right.
163
00:07:39,790 --> 00:07:41,350
Oh, and just one more thing,
164
00:07:41,350 --> 00:07:43,220
which is the image.
165
00:07:43,220 --> 00:07:45,950
So you cannot really upload images to CodePen
166
00:07:45,950 --> 00:07:47,850
unless you have a paid account
167
00:07:47,850 --> 00:07:50,363
but that doesn't make sense I think.
168
00:07:51,210 --> 00:07:54,590
And so I actually uploaded the image for you
169
00:07:54,590 --> 00:07:55,757
onto this URL.
170
00:07:57,130 --> 00:07:59,280
So you see that this is actually another way
171
00:07:59,280 --> 00:08:01,230
of including images.
172
00:08:01,230 --> 00:08:03,490
So essentially, an image that is coming
173
00:08:03,490 --> 00:08:04,797
from a certain URL.
174
00:08:05,930 --> 00:08:08,780
So in contrast, right here,
175
00:08:08,780 --> 00:08:11,160
when we wrote our code before,
176
00:08:11,160 --> 00:08:13,290
then the source was always an image
177
00:08:13,290 --> 00:08:15,060
on our own computer.
178
00:08:15,060 --> 00:08:17,180
So in this case, in the image folder
179
00:08:17,180 --> 00:08:19,830
and then this image name.
180
00:08:19,830 --> 00:08:22,880
And if you're building this challenge on your own computer,
181
00:08:22,880 --> 00:08:26,150
then you can just use this challenge image here.
182
00:08:26,150 --> 00:08:27,543
So it's exactly the same.
183
00:08:29,170 --> 00:08:30,010
Okay?
184
00:08:30,010 --> 00:08:33,200
But if you're building it on CodePen like I'm going to do,
185
00:08:33,200 --> 00:08:35,400
then you will need this image
186
00:08:35,400 --> 00:08:37,650
that is located at this URL.
187
00:08:37,650 --> 00:08:40,990
So we just copy this here somehow from the screen
188
00:08:40,990 --> 00:08:43,303
and use it for your own project.
189
00:08:44,750 --> 00:08:46,640
Then the dimensions of the image
190
00:08:46,640 --> 00:08:49,860
should be 250 by 250.
191
00:08:49,860 --> 00:08:52,180
And with this, I think I gave you everything
192
00:08:52,180 --> 00:08:53,960
that you need to know.
193
00:08:53,960 --> 00:08:55,630
So go ahead and copy this URL
194
00:08:56,930 --> 00:08:59,940
and now I will switch to default page view
195
00:08:59,940 --> 00:09:03,020
so that you can see everything at once
196
00:09:03,020 --> 00:09:05,924
and now I will just leave you to it
197
00:09:05,924 --> 00:09:09,540
and come back here in 5 or 10 minutes
198
00:09:09,540 --> 00:09:11,163
once you are ready.
199
00:09:13,870 --> 00:09:16,190
Okay, here we are back
200
00:09:16,190 --> 00:09:20,030
and I hope that it wasn't too much of a challenge for you
201
00:09:20,030 --> 00:09:21,723
so that I wasn't too hard.
202
00:09:22,600 --> 00:09:23,670
So hopefully you got
203
00:09:23,670 --> 00:09:26,580
to practice your skills a little bit more
204
00:09:26,580 --> 00:09:29,240
and so now in case you have any doubts
205
00:09:29,240 --> 00:09:31,300
or you run into any problem,
206
00:09:31,300 --> 00:09:33,453
I will now show you my solution here.
207
00:09:36,890 --> 00:09:39,700
So as I mentioned, we are using an article here
208
00:09:40,720 --> 00:09:42,500
and now for the heading,
209
00:09:42,500 --> 00:09:45,890
I used an h2, actually not an h1
210
00:09:45,890 --> 00:09:48,760
because of that idea of this being a component
211
00:09:48,760 --> 00:09:51,171
within a bigger page.
212
00:09:51,171 --> 00:09:55,010
And so each page should only have one h1
213
00:09:55,010 --> 00:09:57,370
and so if we then have multiple articles,
214
00:09:57,370 --> 00:10:00,043
then each of them should just be an h2.
215
00:10:01,570 --> 00:10:06,570
Converse Chuck Taylor All Star.
216
00:10:10,670 --> 00:10:14,450
Well, I could have just copied this from the demo.
217
00:10:14,450 --> 00:10:15,313
But anyway.
218
00:10:16,720 --> 00:10:17,553
So img
219
00:10:21,470 --> 00:10:22,790
and now I will actually go ahead
220
00:10:22,790 --> 00:10:25,710
and copy this URL here
221
00:10:27,450 --> 00:10:28,583
in the editor view.
222
00:10:34,177 --> 00:10:35,010
Okay.
223
00:10:38,103 --> 00:10:39,963
Then the alt text is,
224
00:10:43,763 --> 00:10:45,270
I'm just copying it now here.
225
00:10:46,930 --> 00:10:49,220
This should be enough like this.
226
00:10:49,220 --> 00:10:50,310
And then the height
227
00:10:53,080 --> 00:10:55,483
and the width at 250.
228
00:11:00,930 --> 00:11:02,260
And here it is.
229
00:11:02,260 --> 00:11:03,443
Here is our image.
230
00:11:04,340 --> 00:11:05,240
Great.
231
00:11:05,240 --> 00:11:07,080
Now let's go back here
232
00:11:08,800 --> 00:11:12,320
and actually copy all of this content.
233
00:11:12,320 --> 00:11:13,153
Why not?
234
00:11:15,350 --> 00:11:17,720
Then we can just, after that,
235
00:11:17,720 --> 00:11:20,103
wrap everything into its own element.
236
00:11:21,410 --> 00:11:22,960
So here we have the price.
237
00:11:22,960 --> 00:11:26,730
And I will keep using a paragraph for each
238
00:11:26,730 --> 00:11:28,100
of these elements,
239
00:11:28,100 --> 00:11:30,113
so for each of the text elements.
240
00:11:31,400 --> 00:11:33,093
Then we have free shipping.
241
00:11:39,130 --> 00:11:40,310
Okay.
242
00:11:40,310 --> 00:11:41,900
And you see that CodePen
243
00:11:41,900 --> 00:11:45,640
actually automatically did some indentation there.
244
00:11:45,640 --> 00:11:47,163
So that's quite helpful.
245
00:11:50,030 --> 00:11:52,613
Then here there's another paragraph.
246
00:12:00,510 --> 00:12:01,750
Right.
247
00:12:01,750 --> 00:12:03,930
So we are getting our content formatted,
248
00:12:03,930 --> 00:12:06,410
except, of course, for all the content
249
00:12:06,410 --> 00:12:09,610
that is not inside any element.
250
00:12:09,610 --> 00:12:13,980
So remember how I mentioned that HTML doesn't care
251
00:12:13,980 --> 00:12:16,980
about any spacing or about any enters.
252
00:12:16,980 --> 00:12:18,450
So like line breaks.
253
00:12:18,450 --> 00:12:20,400
Everything is just in the same line
254
00:12:20,400 --> 00:12:24,150
and so that's why we need to structure our content
255
00:12:24,150 --> 00:12:25,273
in a logical way.
256
00:12:26,410 --> 00:12:29,453
Now, here we have that anchor element.
257
00:12:33,170 --> 00:12:35,000
And actually, I didn't really tell you
258
00:12:35,000 --> 00:12:37,370
where this link should point to.
259
00:12:37,370 --> 00:12:39,470
So you could have just created an empty link
260
00:12:39,470 --> 00:12:41,470
like this basically,
261
00:12:41,470 --> 00:12:44,660
or you could have linked the Converse website.
262
00:12:44,660 --> 00:12:46,323
So let me just grab that link.
263
00:12:47,280 --> 00:12:51,670
So converse.com probably
264
00:12:51,670 --> 00:12:53,510
and I'm doing it like this.
265
00:12:53,510 --> 00:12:55,113
You will see in a moment why.
266
00:12:56,890 --> 00:13:01,637
And the reason is because we actually need this https://.
267
00:13:02,720 --> 00:13:04,333
So the entire URL.
268
00:13:07,650 --> 00:13:09,343
This is not necessary here.
269
00:13:10,610 --> 00:13:14,750
And now here let's close this.
270
00:13:14,750 --> 00:13:17,490
And here, of course, we do not just want this symbol
271
00:13:17,490 --> 00:13:19,880
because this is not really correct,
272
00:13:19,880 --> 00:13:22,743
so instead, we want that HTML entity
273
00:13:22,743 --> 00:13:25,080
that you hopefully used.
274
00:13:25,080 --> 00:13:27,793
So that is the right arrow.
275
00:13:29,560 --> 00:13:30,930
So this is the abbreviation here,
276
00:13:30,930 --> 00:13:32,923
for r stands for right
277
00:13:32,923 --> 00:13:34,800
and then arr for arrow
278
00:13:34,800 --> 00:13:38,153
and so indeed, this is the result that we got.
279
00:13:39,290 --> 00:13:40,350
Okay.
280
00:13:40,350 --> 00:13:42,690
So we have all of this part.
281
00:13:42,690 --> 00:13:45,560
Now let's take care of this list here
282
00:13:45,560 --> 00:13:46,960
and this heading.
283
00:13:46,960 --> 00:13:48,923
And finally then also this button.
284
00:13:50,520 --> 00:13:55,520
So I have an h2 already up here, right?
285
00:13:56,850 --> 00:14:00,103
And so for this one, I'm using an h3 now.
286
00:14:02,310 --> 00:14:03,143
H3.
287
00:14:04,150 --> 00:14:05,203
And closing it.
288
00:14:09,070 --> 00:14:09,903
Nice.
289
00:14:09,903 --> 00:14:12,040
And now remember,
290
00:14:12,040 --> 00:14:15,910
in order to create a list, which is what we want here,
291
00:14:15,910 --> 00:14:17,730
so a bullet-pointed list,
292
00:14:17,730 --> 00:14:20,500
we use the unordered element
293
00:14:20,500 --> 00:14:23,433
or actually, the unordered list element.
294
00:14:25,020 --> 00:14:27,330
And now we just wrap all
295
00:14:27,330 --> 00:14:31,893
of these into one li element, right?
296
00:14:33,180 --> 00:14:36,102
So I hope that at this point,
297
00:14:36,102 --> 00:14:38,903
you already know these elements.
298
00:14:40,010 --> 00:14:41,740
So you have practiced a lot
299
00:14:41,740 --> 00:14:43,478
and so I'm sure
300
00:14:43,478 --> 00:14:48,478
that this is getting a lot more easy for you now.
301
00:14:50,230 --> 00:14:52,350
Let's just remove this dot here
302
00:14:52,350 --> 00:14:53,713
and we are almost done.
303
00:14:54,720 --> 00:14:58,270
So all we need now is that button in the end.
304
00:14:58,270 --> 00:15:00,890
And so as I showed you before,
305
00:15:00,890 --> 00:15:04,393
for that, we can simply use the button element in HTML.
306
00:15:05,950 --> 00:15:07,073
So add to cart.
307
00:15:07,950 --> 00:15:09,323
And of course, that button,
308
00:15:10,420 --> 00:15:13,320
so clicking that button will not do anything.
309
00:15:13,320 --> 00:15:16,090
For that, we would need some JavaScript.
310
00:15:16,090 --> 00:15:20,430
But at least it is here visible, okay?
311
00:15:20,430 --> 00:15:23,650
And we see here that we have 80 unsaved changes.
312
00:15:23,650 --> 00:15:26,310
So if you want to preserve those changes again,
313
00:15:26,310 --> 00:15:28,160
you would have to save the CodePen
314
00:15:29,210 --> 00:15:31,510
and create a free account in order to do that.
315
00:15:32,900 --> 00:15:36,190
Oh and I thought that we were actually done
316
00:15:36,190 --> 00:15:37,080
with this challenge
317
00:15:37,080 --> 00:15:40,350
but there is one small piece missing.
318
00:15:40,350 --> 00:15:44,523
So this text here in the original is actually bold.
319
00:15:45,760 --> 00:15:47,833
So that's the only difference.
320
00:15:48,870 --> 00:15:50,610
So that's something that we're missing.
321
00:15:50,610 --> 00:15:54,490
And so let's simply wrap this value here,
322
00:15:54,490 --> 00:15:57,893
so all this text into a strong element.
323
00:15:58,730 --> 00:16:01,223
Not string, strong.
324
00:16:05,010 --> 00:16:06,980
And you see now at this point,
325
00:16:06,980 --> 00:16:09,830
we didn't close this tag,
326
00:16:09,830 --> 00:16:11,350
so this strong element
327
00:16:11,350 --> 00:16:12,890
and so now all the rest
328
00:16:12,890 --> 00:16:16,000
of the content basically became strong.
329
00:16:16,000 --> 00:16:17,750
So everything is bold now
330
00:16:17,750 --> 00:16:20,390
because this element never ends.
331
00:16:20,390 --> 00:16:24,510
But, of course, that would be a mistake.
332
00:16:24,510 --> 00:16:26,700
It wouldn't even be valid HTML
333
00:16:26,700 --> 00:16:29,520
but the browsers somehow still
334
00:16:29,520 --> 00:16:32,170
are able to render it somehow.
335
00:16:32,170 --> 00:16:35,540
But anyway, with this, we finished this challenge
336
00:16:35,540 --> 00:16:39,860
and actually also the introduction to HTML section.
337
00:16:39,860 --> 00:16:42,320
So make sure to review everything
338
00:16:42,320 --> 00:16:44,400
that you just learned in the section,
339
00:16:44,400 --> 00:16:47,980
all your new skills and then once you are ready,
340
00:16:47,980 --> 00:16:51,090
we can together move on to our next section,
341
00:16:51,090 --> 00:16:54,020
which will be the fundamentals of CSS.
342
00:16:54,020 --> 00:16:56,120
And so there you will finally learn
343
00:16:56,120 --> 00:16:58,520
how to actually style your content
344
00:16:58,520 --> 00:17:01,170
and make it look a little bit more polished
345
00:17:01,170 --> 00:17:02,670
and more beautiful.
346
00:17:02,670 --> 00:17:04,760
So that's really, really exciting
347
00:17:04,760 --> 00:17:09,010
and so yeah, once you're ready, let's move on there.
348
00:17:09,010 --> 00:17:09,843
See you soon.
24007
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.