Now this was a huge module
with lots of new content, lots of new pieces of information.
And it was an important module,
since it was all about the basics of HTML,
HTML elements, and CSS.
To conclude this module,
before I summarize what we learned,
in the next lecture,
I want to have a look at the way we organize our files here,
because, whilst this is a simple website
and organizing the files like this, all in the same folder,
is definitely all right,
we might wanna organize them into subfolders,
especially as our page grows.
And for this, I wanna create a separate folder
for my style sheets and one for my images,
even though it's only one image here.
But still, I think that is a way of organizing the files
which will make working with this project a bit easier.
And for this, I'll add a folder named images which,
guess what, holds my images,
and one folder named styles which holds my styles.
And I'll then drag and drop the image here
into that images folder.
And I'll drag and drop my three style sheet files
into the styles folder.
But there's one important thing to note,
with such subfolders added,
we need to adjust our paths here
where we point at those files.
In index.html, when I point at shared.css,
just using the filename like this won't work anymore.
If I save this and I go to that first page,
all the styles and the image will be lost
because the browser doesn't find these files anymore.
And it doesn't find these files anymore
because they're not in the same folder
as the HTML file anymore.
I mentioned before that the value of href and also of src
is a relative path to the file we wanna include.
And if that file now sits in a subfolder,
we simply need to specify that subfolder name here as well.
So in the case of the shared.css file,
that should be styles/shared.css.
A slash marks the separation between the folder name
and then the filename in the folder
which you wanna access.
And therefore, it's the same here for daily-challenge.css.
And for this image here,
it's images/challenges-trophy.
Now this link here to full-week.html does not change,
because that file hasn't moved.
But inside of full-week.html,
we now also wanna point at styles/shared.css,
styles/full-week.css, and that's it.
We got no image there, so that's all.
And with that, if I reload,
we got the styles back,
we got the image back.
But now, I would say it's a bit more organized.
And especially if we have more and more images
and more and more style files,
organizing our code files like this
can make our project a bit more maintainable
and a bit easier to work with.