Instructor: 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 the 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
or 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 do 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 here 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 results 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 is optional
and you are 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 and A section
on HTML 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 you a bit off the code.
So, here in change view, we can...
Now switch to the editor view
which will then look what just
like what I showed you before.
All right, so now we have the editors here on top
and then the results 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 eCommerce store
then each shoe would be a different article.
And so you would have one article element for, yeah
for each of the shoes, right?
Then down here there is an element that we have never used
which is this clickable button.
And so down here you see that this is 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 four 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, 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 the full page view
so that you can see everything at once.
And now I will just leave you to it
and come back here in five 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 it wasn't too hard.
So, hopefully you get to practice your skills
a little bit more.
And so now in case you have any doubt
or you run into any problem,
I will now show you my solution here.
So, as I mentioned, we are using an article here,
for the heading, I used an h2 actually
and not an h1 because of that idea
of this being a component within a bigger page, okay?
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.
So, Converse, Chuck, Tailor 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 just copying it now here
and 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?
Now, and you see that CodePen
automatically did some indentation there
so that's quite helpful.
Then here, 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 R for arrow.
And so indeed, this is the results 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 H two 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
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 to 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.