Original subtitles

Time for another exciting coding challenge

so that you can keep practicing your new HTML skills.

And in this one, I want you to build this component

for this Converse All Star shoe.

And I'm saying component here

because I want you to imagine this content here

in the context of something like an e-commerce store.

So imagine that we have a shoe store

and there are multiple shoes and for each of them,

there is then like this small component

with this description.

So stuff like the price,

a short description, a link

and then some product details here.

Now, I am building this component,

so I'm writing this HTML

on a special coding platform called codepen.io.

So this is a place online

where we can basically write our code

and it will then automatically execute the code

and render it and it makes it also easy

to share that code.

Now, of course, you don't need to use CodePen

in order to complete this challenge.

You can just go to your code editor

and for example, add a brand new HTML file here

and then build all the code in there.

The reason why I'm not doing that here in the video

is because we're actually gonna build

on this challenge later.

So we will keep developing this very small project

over the next few sections

and that will then create a mess

of different files and a lot of different code.

But of course, because you're doing it on your own,

on your own computer,

it's easier for you

and so you can just, as I said,

if you want, create a new HTML file and do it here.

But on the other hand,

I think it's also helpful and useful

for you to learn a little bit about codepen.io

and create the challenge there.

So let me just give you

a very quick demonstration of CodePen.

So just google CodePen I would say

or you can go to codepen.io.

And then all you have to is to click here

on Start Coding.

Now, maybe in the future,

something has changed about CodePen,

so about this interface

but you will always be able to create a new CodePen

simply by going to codepen.io/pen.

So just like this.

So here we basically have a panel

where we can write HTML, CSS

and JavaScript if we want.

Or we can also just collapse these panels

if we don't need them,

which is the case right now.

And so we can write our HTML.

Let's just write an h1 element.

Hello, World, for example.

And you see that here we have

to again manually close the element.

But anyway, you see that after some time,

It then renders the result down here.

So in this results panel basically.

You can also change the name of your CodePen.

So let's say Challenge #2,

which is the name of this lecture.

Okay, and then you can also save it.

Now, to save it, you will have to create a free account

but I would say that it's actually worthwhile to do so.

But of course, it's optional and you're not forced

to create a new account here

but if you do, that is actually very helpful

because then you will get a special URL

for each CodePen

and then you can share that CodePen with others.

So if you want to just like create a quick example,

a quick demo of something

to show it to someone,

then you can just come to CodePen,

create it right here

and then copy, paste the URL from here

once you have saved it

and by the way,

what I just described is actually also the best way

of sharing code in the Q&A section on Udemy

in case you run into any problems.

Okay?

So again, it would probably be a good idea

to create an account here

because it's just useful

and many, many programmers use CodePen.

It's a very popular tool.

But anyway, going back now to the challenge,

let me give you a couple of hints.

Okay, so this is what the result looks like

that I want you to build

but to help you a little bit,

I will actually need to change here a bit of the code.

So here in Change View,

we can now switch to the editor view,

which will then look just like what I showed you before.

All right, so now we have the editors here on top

and then the result down here.

So there are some things I need to explain

before you can get started.

So first of all, I want you to wrap all

of this content inside an article element.

And remember how I mentioned

that an article element cannot only be used

for something like a written blog post article

but also for like really a physical article

and so a shoe like this is a perfect example for that.

So this is an article

and again, coming back to the example

of having like an e-commerce store,

then each shoe would be a different article

and so you would have one article element

for each of the shoes, right?

Then down here, there's an element that we have never used,

which is this clickable button.

And so down here,

you see that this is simply the button element.

And so you can just go ahead and use that.

And then finally, there's something else,

which is this symbol here, so this arrow here.

Now, remember how back in our project,

so here, I mentioned that this symbol right here,

this copyright symbol is an HTML entity, right?

Remember that, and so this arrow here

is just another HTML entity.

And I also mentioned back then

that there is a very handy list

on my resources page, which is this one.

Now, if you're watching this in the future,

then this page probably looks quite different

but for now, this is what I have

and the HTML entity reference that I meant,

so that I mentioned earlier is this one.

So let's just open it up actually

and then there is a lot of stuff that you can use.

So all of these different symbols

and here, for example, is the copy symbol

that we used before in VS Code.

Now, this is a huge list

and I'm just going to use a Command

or Control + F to search on the page for arrows

and here we go.

So there are all these different arrows here

and the one that I used is this.

So to insert this arrow

into your own HTML code,

all you have to do is to write this HTML entity.

Okay?

And yeah, I will leave this.

Oh, well, actually, we don't need it anymore.

Right.

Oh, and just one more thing,

which is the image.

So you cannot really upload images to CodePen

unless you have a paid account

but that doesn't make sense I think.

And so I actually uploaded the image for you

onto this URL.

So you see that this is actually another way

of including images.

So essentially, an image that is coming

from a certain URL.

So in contrast, right here,

when we wrote our code before,

then the source was always an image

on our own computer.

So in this case, in the image folder

and then this image name.

And if you're building this challenge on your own computer,

then you can just use this challenge image here.

So it's exactly the same.

Okay?

But if you're building it on CodePen like I'm going to do,

then you will need this image

that is located at this URL.

So we just copy this here somehow from the screen

and use it for your own project.

Then the dimensions of the image

should be 250 by 250.

And with this, I think I gave you everything

that you need to know.

So go ahead and copy this URL

and now I will switch to default page view

so that you can see everything at once

and now I will just leave you to it

and come back here in 5 or 10 minutes

once you are ready.

Okay, here we are back

and I hope that it wasn't too much of a challenge for you

so that I wasn't too hard.

So hopefully you got

to practice your skills a little bit more

and so now in case you have any doubts

or you run into any problem,

I will now show you my solution here.

So as I mentioned, we are using an article here

and now for the heading,

I used an h2, actually not an h1

because of that idea of this being a component

within a bigger page.

And so each page should only have one h1

and so if we then have multiple articles,

then each of them should just be an h2.

Converse Chuck Taylor All Star.

Well, I could have just copied this from the demo.

But anyway.

So img

and now I will actually go ahead

and copy this URL here

in the editor view.

Okay.

Then the alt text is,

I'm just copying it now here.

This should be enough like this.

And then the height

and the width at 250.

And here it is.

Here is our image.

Great.

Now let's go back here

and actually copy all of this content.

Why not?

Then we can just, after that,

wrap everything into its own element.

So here we have the price.

And I will keep using a paragraph for each

of these elements,

so for each of the text elements.

Then we have free shipping.

Okay.

And you see that CodePen

actually automatically did some indentation there.

So that's quite helpful.

Then here there's another paragraph.

Right.

So we are getting our content formatted,

except, of course, for all the content

that is not inside any element.

So remember how I mentioned that HTML doesn't care

about any spacing or about any enters.

So like line breaks.

Everything is just in the same line

and so that's why we need to structure our content

in a logical way.

Now, here we have that anchor element.

And actually, I didn't really tell you

where this link should point to.

So you could have just created an empty link

like this basically,

or you could have linked the Converse website.

So let me just grab that link.

So converse.com probably

and I'm doing it like this.

You will see in a moment why.

And the reason is because we actually need this https://.

So the entire URL.

This is not necessary here.

And now here let's close this.

And here, of course, we do not just want this symbol

because this is not really correct,

so instead, we want that HTML entity

that you hopefully used.

So that is the right arrow.

So this is the abbreviation here,

for r stands for right

and then arr for arrow

and so indeed, this is the result that we got.

Okay.

So we have all of this part.

Now let's take care of this list here

and this heading.

And finally then also this button.

So I have an h2 already up here, right?

And so for this one, I'm using an h3 now.

H3.

And closing it.

Nice.

And now remember,

in order to create a list, which is what we want here,

so a bullet-pointed list,

we use the unordered element

or actually, the unordered list element.

And now we just wrap all

of these into one li element, right?

So I hope that at this point,

you already know these elements.

So you have practiced a lot

and so I'm sure

that this is getting a lot more easy for you now.

Let's just remove this dot here

and we are almost done.

So all we need now is that button in the end.

And so as I showed you before,

for that, we can simply use the button element in HTML.

So add to cart.

And of course, that button,

so clicking that button will not do anything.

For that, we would need some JavaScript.

But at least it is here visible, okay?

And we see here that we have 80 unsaved changes.

So if you want to preserve those changes again,

you would have to save the CodePen

and create a free account in order to do that.

Oh and I thought that we were actually done

with this challenge

but there is one small piece missing.

So this text here in the original is actually bold.

So that's the only difference.

So that's something that we're missing.

And so let's simply wrap this value here,

so all this text into a strong element.

Not string, strong.

And you see now at this point,

we didn't close this tag,

so this strong element

and so now all the rest

of the content basically became strong.

So everything is bold now

because this element never ends.

But, of course, that would be a mistake.

It wouldn't even be valid HTML

but the browsers somehow still

are able to render it somehow.

But anyway, with this, we finished this challenge

and actually also the introduction to HTML section.

So make sure to review everything

that you just learned in the section,

all your new skills and then once you are ready,

we can together move on to our next section,

which will be the fundamentals of CSS.

And so there you will finally learn

how to actually style your content

and make it look a little bit more polished

and more beautiful.

So that's really, really exciting

and so yeah, once you're ready, let's move on there.

See you soon.