Instructor: Now it's time for
the first big coding challenge in this course.
So let's get started.
Now, before we start with the actual challenge,
I want to first make some changes to the file structure
that we have in this project right now.
And in particular what I want to do is to put all the images
into one folder so that I can then show you
how we can include the images
like this when they are located in a specific folder.
So right now, they are all, as we can see here,
they're all in the same exact same folder
as the index.html.
And so that's why all we have to do
is to declare the name here and the browser will then
find them basically in the same folder as the HTML document.
But now let's create a new folder
by clicking this icon and I'm gonna call it IMG,
and then I'm going to put all of the images there.
So just dragging and dropping them like this.
Okay.
And so now if we reload the page
and not this one which is our demo,
but the one we're working on.
And by the way,
this time I had to actually manually reload the page
because I had my computer turned off in the meantime.
And so whenever you do that,
the very first time you come back,
you will have to manually reload the page here
when you are running the live server extension.
Okay.
So remember that we installed that in the last video.
And so if I do some change here now
then that should probably
just work just before.
So you see there is some change and there appeared.
But anyway, you see that now that we have these images
inside of the IMG folder,
they are no longer found in the same folder as index.html,
so that's why they don't appear up here.
So what we need to do here is to change the path
to the image now,
and that's not a difficult problem.
All we have to do is to start the new path
with the name of the folder
so that's IMG and then slash,
and so here we go.
So you see the image appears here now again in this gutter.
And so let's do the same thing here, give it a save,
and here are our images back.
Okay.
So usually we always put the images in a separate folder.
And so I thought that was important to show you,
especially now, before this challenge where we are going to
use some more images.
So about the challenge,
I'm being here back in the demo page.
And so essentially what I want you to do is to code
on your own this part here.
All right?
Let me actually show you where that should be in our markup.
So in our HTML,
and it is right here after the article.
Okay.
So this section here about the related posts
is no longer part of the article.
It's also not part of the footer.
And so here we will need another element.
And this one I will actually write for you.
So here we are going to use the aside element.
And the aside element is usually used
for some secondary information that complements
the information in the main part of the page.
So in this case, the main part of the page is the article.
And then the aside, which is secondary information,
is basically some related posts that are related
to the article.
So to the main part.
Okay.
Now visually, many times we use the aside element
as a sidebar, but it doesn't have to be that way.
Okay, but now about the challenge itself.
So you see that it starts here with this heading.
So you can experiment which heading is best here.
So one of the headings, H1, 2, 3, 4, 5, and 6, remember?
And then here you see that this is actually a list.
Right?
You can see that because of these bullet points.
And so here for this part, you should probably use a list.
Now, what we didn't do before was to have
multiple elements inside of one list item.
So up here for example, we have the list item.
And in there there's only some text,
but you see that here in each item there's an image,
a link, and then some more text here.
And that's no problem at all.
So inside of each list element,
there can be multiple other child elements, right?
And so with that information,
I think you are now able to build this.
Now finally just about the images here,
that's some more information that you need.
They are also in this folder
and they are called related one, two, and three.
And the dimensions I want you to give them is 75x75 pixels.
And now I think I gave you everything.
So please pause the video now, and take a couple of minutes,
10, 15 minutes maybe, to write up the HTML for this section.
So good luck with that.
And I see you once you're ready.
All right.
So
hopefully, you did this just fine.
So let me show you how I did it
and I hope that you start to see how helpful it is that
VS code now automatically closes
our HTML elements, right?
So the source here is
in the IMG folder and then related one.
Then the alt text,
let's just say
that this is
a person programming,
and of course your alt text doesn't have to
be exactly the same as mine.
So if your alt text is a bit different
that is not a problem at all.
And now we need to close it as well.
And so
that's the image part.
Next we have a hyperlink, so an anchor tag.
And here the HREF, which is something that I didn't mention,
but hopefully you figured it out that this is one
of the links that should not point anywhere for now.
So how
to learn
web development,
and how finally there's some text with the author there.
And so we can use a paragraph for that.
So by Jonas Schmedtmann.
Okay, giving it a save, now it's nicely formatted,
and it should appear down here.
And indeed here it is.
Great.
Oh, I'm just missing here the heading actually.
So let me go back and put that even before
the unordered list.
So I'm using an H4 for that.
But anyway, let's continue now building our list here
with the next list item.
And by the way, if you did your code a little bit different
from mine,
that's really not a problem.
What matters here is that you
tried writing the code on your own.
That is really the most important thing
that I was expecting you to do here.
So with 75,
the height also 75,
and again a link pointing nowhere.
And this one is the
unknown
powers
of CSS,
and by Jim
Dylan.
And I'm not going to check out the result just yet.
Let's just finish it.
So another image.
So the goal of this part here was really to
have your practice writing this same code basically
or very similar code over and over again.
'Cause this is the only way
that this stuff really gets into your brain.
So let's call this one JavaScript code on a screen.
And again, width of 75,
and the height of 75.
And you notice I'm writing this a little bit faster
right now
because we don't want to waste a lot
of time writing this repetitive code.
This was really just for you to practice.
Is
awesome.
Finally, the paragraph.
Give it a save,
and beautiful.
So this looks just like in our demo and we have
now all this content that we want to display here
nicely marked up in a very logical way.
So you might be wondering why we used a list here
in this case.
And the reason for that is basically the idea
behind semantic HTML that I explained a little bit earlier.
So if we think about these related posts,
we can very easily argue
that it is essentially a list of related posts, right?
And so if it is a list, we should mark it up in our HTML.
So we should write our HTML as a list.
And so that's just what we did.
Later with CSS we will then remove these bullet points,
because they don't make a lot of sense in this context.
But even with the bullet points removed,
we still want the meaning of this element,
so of all of this here, to be a list.
But anyway, that's enough for this video.
So I really hoped that you completed this challenge
and that you enjoyed doing it.
Even if you took some time,
and even if you had to review some concepts
from the previous lectures,
that's completely normal,
and that's exactly how it should be, actually.
Now in order to practice a little bit more even,
there is another coding challenge coming up
which is completely detached from this project,
but it's a really exciting one,
so I hope to see you there soon.