1
00:00:02,370 --> 00:00:05,710
Our project will follow a certain structure

2
00:00:05,710 --> 00:00:08,760
and you might remember this page here again

3
00:00:08,760 --> 00:00:11,300
from the MDN Web Docs.

4
00:00:11,300 --> 00:00:14,590
This was about the document and website structure,

5
00:00:14,590 --> 00:00:17,050
and we learned that we have basic sections

6
00:00:17,050 --> 00:00:22,050
of a document we can use to give our website some structure,

7
00:00:22,530 --> 00:00:25,290
some semantic meaning in the end.

8
00:00:25,290 --> 00:00:27,810
We learned about elements like the header, for example,

9
00:00:27,810 --> 00:00:31,020
or the main element or the footer.

10
00:00:31,020 --> 00:00:31,980
We also see elements

11
00:00:31,980 --> 00:00:34,110
like the navigation bar here, for example.

12
00:00:34,110 --> 00:00:35,740
And if we scroll down a bit further,

13
00:00:35,740 --> 00:00:37,870
we see a typical website

14
00:00:37,870 --> 00:00:40,270
with all these different elements here.

15
00:00:40,270 --> 00:00:43,640
Now, feel free to dive deeper here once again

16
00:00:43,640 --> 00:00:46,630
but we can use the basic concept

17
00:00:46,630 --> 00:00:49,600
of this structure in our project now,

18
00:00:49,600 --> 00:00:53,140
especially the header, the navigation bar,

19
00:00:53,140 --> 00:00:57,520
the main part, the sections and the footer.

20
00:00:57,520 --> 00:01:01,890
So keep these elements in mind or look it up here

21
00:01:01,890 --> 00:01:03,800
and we'll now switch to our project

22
00:01:03,800 --> 00:01:07,620
and see how we can implement this structure there.

23
00:01:07,620 --> 00:01:10,950
This is our website, the landing page

24
00:01:10,950 --> 00:01:13,040
of the website we are going to build.

25
00:01:13,040 --> 00:01:14,680
And if you look at it,

26
00:01:14,680 --> 00:01:19,160
you can already see some different parts this website has.

27
00:01:19,160 --> 00:01:23,250
Let's get started with the top of the page here, this part.

28
00:01:23,250 --> 00:01:26,790
We see that the image here is basically part

29
00:01:26,790 --> 00:01:29,470
of the section, and also of the next section.

30
00:01:29,470 --> 00:01:32,450
We will discover a bit later how this works

31
00:01:32,450 --> 00:01:35,340
but if we ignore the fact that the image here

32
00:01:35,340 --> 00:01:38,170
is also part of this part of the image,

33
00:01:38,170 --> 00:01:41,220
well, then this could be a great header, right?

34
00:01:41,220 --> 00:01:43,500
It's the top part of our page.

35
00:01:43,500 --> 00:01:47,030
It holds our logo, Travel Goals to the left,

36
00:01:47,030 --> 00:01:49,480
and it holds additional information.

37
00:01:49,480 --> 00:01:52,130
These two items here.

38
00:01:52,130 --> 00:01:56,310
This is a so-called navigation bar, a nav element.

39
00:01:56,310 --> 00:01:59,350
We also just saw on the MDN.

40
00:01:59,350 --> 00:02:02,870
So that's the first core structure of our website.

41
00:02:02,870 --> 00:02:04,650
A header with our logo,

42
00:02:04,650 --> 00:02:06,690
which contains the navigation bar,

43
00:02:06,690 --> 00:02:10,509
so links which allow us to navigate to other pages

44
00:02:10,509 --> 00:02:11,743
of our website.

45
00:02:12,640 --> 00:02:17,640
Below our header, we have another huge area of our website.

46
00:02:18,320 --> 00:02:22,110
This area could be the main part of our website.

47
00:02:22,110 --> 00:02:24,360
It holds the core content

48
00:02:24,360 --> 00:02:27,300
why users might visit our website.

49
00:02:27,300 --> 00:02:29,353
And in this main area,

50
00:02:30,230 --> 00:02:33,090
semantically created with the main element,

51
00:02:33,090 --> 00:02:36,100
we have two additional, well, sections.

52
00:02:36,100 --> 00:02:37,500
This is the first one,

53
00:02:37,500 --> 00:02:41,200
and well, great thing, we also have a section element,

54
00:02:41,200 --> 00:02:43,930
so adding it here makes a lot of sense,

55
00:02:43,930 --> 00:02:45,640
and we have this section area,

56
00:02:45,640 --> 00:02:48,490
which is well, the second section.

57
00:02:48,490 --> 00:02:50,610
So that's the second core structure

58
00:02:50,610 --> 00:02:51,890
of our website.

59
00:02:51,890 --> 00:02:55,570
It's the main part with two different sections.

60
00:02:55,570 --> 00:02:58,870
One holding the Joe's Travel Page part

61
00:02:58,870 --> 00:03:00,260
and also this image.

62
00:03:00,260 --> 00:03:02,450
It's called a so-called hero image,

63
00:03:02,450 --> 00:03:04,140
so a big image,

64
00:03:04,140 --> 00:03:07,260
which captures all the attention of the visitor

65
00:03:07,260 --> 00:03:10,220
once he or she visits the landing page

66
00:03:10,220 --> 00:03:12,440
and below, we have the second section

67
00:03:12,440 --> 00:03:14,763
with our highlight destinations.

68
00:03:15,800 --> 00:03:19,070
There is one third part of this landing page though

69
00:03:19,070 --> 00:03:21,110
and you might guess which one that is.

70
00:03:21,110 --> 00:03:23,230
It's that black lower part here

71
00:03:23,230 --> 00:03:24,900
with our social media links,

72
00:03:24,900 --> 00:03:27,970
and this is a perfect footer.

73
00:03:27,970 --> 00:03:31,490
So this is the structure we are now going to recreate

74
00:03:31,490 --> 00:03:34,420
in our code, in our HTML file

75
00:03:34,420 --> 00:03:36,930
and then we will start bringing this to life,

76
00:03:36,930 --> 00:03:38,713
so adding content to it.

77
00:03:39,660 --> 00:03:44,660
Back in the code, let's now add content to our body element

78
00:03:44,840 --> 00:03:46,490
and as we just learned,

79
00:03:46,490 --> 00:03:49,160
we will get started with the header,

80
00:03:49,160 --> 00:03:53,300
which will hold our logo of our website,

81
00:03:53,300 --> 00:03:57,720
and additionally, a nav element, N-A-V.

82
00:03:57,720 --> 00:03:59,600
Tab will auto complete this,

83
00:03:59,600 --> 00:04:01,460
which will then hold our links

84
00:04:01,460 --> 00:04:03,520
to other parts of our website.

85
00:04:03,520 --> 00:04:07,050
At the moment, we'll just add the empty elements here,

86
00:04:07,050 --> 00:04:11,243
so we just add the semantical structure of our website.

87
00:04:12,180 --> 00:04:13,270
After the header,

88
00:04:13,270 --> 00:04:15,840
we saw that we have our main part

89
00:04:15,840 --> 00:04:19,670
with this hero image and below, the highlights.

90
00:04:19,670 --> 00:04:23,270
So we create the main part with the main element.

91
00:04:23,270 --> 00:04:25,760
And we add a first section.

92
00:04:25,760 --> 00:04:28,280
Again, that's the section with the background image.

93
00:04:28,280 --> 00:04:32,580
And afterwards, we'll add a second section.

94
00:04:32,580 --> 00:04:34,643
This will then hold our highlights.

95
00:04:36,720 --> 00:04:40,070
This will be our main part of the website.

96
00:04:40,070 --> 00:04:42,440
Now, we'll finish things in the body element

97
00:04:42,440 --> 00:04:44,320
with our footer here,

98
00:04:44,320 --> 00:04:47,560
which will then hold the social media links.

99
00:04:47,560 --> 00:04:51,000
So this is the core structure of our website.

100
00:04:51,000 --> 00:04:53,090
We've finished our skeleton

101
00:04:53,090 --> 00:04:56,350
and with that, we are now ready to bring this page to life,

102
00:04:56,350 --> 00:04:58,253
so let's get started with the header.