1
00:00:02,060 --> 00:00:04,720
Now this was a huge module

2
00:00:04,720 --> 00:00:08,710
with lots of new content, lots of new pieces of information.

3
00:00:08,710 --> 00:00:10,700
And it was an important module,

4
00:00:10,700 --> 00:00:13,830
since it was all about the basics of HTML,

5
00:00:13,830 --> 00:00:16,203
HTML elements, and CSS.

6
00:00:17,290 --> 00:00:18,750
To conclude this module,

7
00:00:18,750 --> 00:00:20,650
before I summarize what we learned,

8
00:00:20,650 --> 00:00:21,594
in the next lecture,

9
00:00:21,594 --> 00:00:26,500
I want to have a look at the way we organize our files here,

10
00:00:26,500 --> 00:00:29,140
because, whilst this is a simple website

11
00:00:29,140 --> 00:00:32,940
and organizing the files like this, all in the same folder,

12
00:00:32,940 --> 00:00:34,530
is definitely all right,

13
00:00:34,530 --> 00:00:37,260
we might wanna organize them into subfolders,

14
00:00:37,260 --> 00:00:39,253
especially as our page grows.

15
00:00:40,160 --> 00:00:43,040
And for this, I wanna create a separate folder

16
00:00:43,040 --> 00:00:45,890
for my style sheets and one for my images,

17
00:00:45,890 --> 00:00:48,020
even though it's only one image here.

18
00:00:48,020 --> 00:00:50,798
But still, I think that is a way of organizing the files

19
00:00:50,798 --> 00:00:55,798
which will make working with this project a bit easier.

20
00:00:55,970 --> 00:00:59,350
And for this, I'll add a folder named images which,

21
00:00:59,350 --> 00:01:01,400
guess what, holds my images,

22
00:01:01,400 --> 00:01:05,450
and one folder named styles which holds my styles.

23
00:01:05,450 --> 00:01:07,540
And I'll then drag and drop the image here

24
00:01:07,540 --> 00:01:09,260
into that images folder.

25
00:01:09,260 --> 00:01:12,370
And I'll drag and drop my three style sheet files

26
00:01:12,370 --> 00:01:14,256
into the styles folder.

27
00:01:14,256 --> 00:01:16,810
But there's one important thing to note,

28
00:01:16,810 --> 00:01:19,460
with such subfolders added,

29
00:01:19,460 --> 00:01:22,120
we need to adjust our paths here

30
00:01:22,120 --> 00:01:24,441
where we point at those files.

31
00:01:24,441 --> 00:01:28,110
In index.html, when I point at shared.css,

32
00:01:28,110 --> 00:01:31,740
just using the filename like this won't work anymore.

33
00:01:31,740 --> 00:01:34,650
If I save this and I go to that first page,

34
00:01:34,650 --> 00:01:38,420
all the styles and the image will be lost

35
00:01:38,420 --> 00:01:42,380
because the browser doesn't find these files anymore.

36
00:01:42,380 --> 00:01:44,640
And it doesn't find these files anymore

37
00:01:44,640 --> 00:01:46,610
because they're not in the same folder

38
00:01:46,610 --> 00:01:49,150
as the HTML file anymore.

39
00:01:49,150 --> 00:01:53,780
I mentioned before that the value of href and also of src

40
00:01:53,780 --> 00:01:58,320
is a relative path to the file we wanna include.

41
00:01:58,320 --> 00:02:01,340
And if that file now sits in a subfolder,

42
00:02:01,340 --> 00:02:05,230
we simply need to specify that subfolder name here as well.

43
00:02:05,230 --> 00:02:07,600
So in the case of the shared.css file,

44
00:02:07,600 --> 00:02:11,032
that should be styles/shared.css.

45
00:02:12,420 --> 00:02:15,910
A slash marks the separation between the folder name

46
00:02:15,910 --> 00:02:18,210
and then the filename in the folder

47
00:02:18,210 --> 00:02:20,170
which you wanna access.

48
00:02:20,170 --> 00:02:24,140
And therefore, it's the same here for daily-challenge.css.

49
00:02:24,140 --> 00:02:25,490
And for this image here,

50
00:02:25,490 --> 00:02:28,773
it's images/challenges-trophy.

51
00:02:29,750 --> 00:02:33,810
Now this link here to full-week.html does not change,

52
00:02:33,810 --> 00:02:36,540
because that file hasn't moved.

53
00:02:36,540 --> 00:02:39,340
But inside of full-week.html,

54
00:02:39,340 --> 00:02:43,460
we now also wanna point at styles/shared.css,

55
00:02:43,460 --> 00:02:47,170
styles/full-week.css, and that's it.

56
00:02:47,170 --> 00:02:49,340
We got no image there, so that's all.

57
00:02:49,340 --> 00:02:50,443
And with that, if I reload,

58
00:02:50,443 --> 00:02:52,090
we got the styles back,

59
00:02:52,090 --> 00:02:53,980
we got the image back.

60
00:02:53,980 --> 00:02:56,255
But now, I would say it's a bit more organized.

61
00:02:56,255 --> 00:02:59,420
And especially if we have more and more images

62
00:02:59,420 --> 00:03:01,560
and more and more style files,

63
00:03:01,560 --> 00:03:03,990
organizing our code files like this

64
00:03:03,990 --> 00:03:06,950
can make our project a bit more maintainable

65
00:03:06,950 --> 00:03:08,933
and a bit easier to work with.