NOTE
This file was generated by Descript <www.descript.com>
1

00:00:00,500  -->  00:00:01,880
Hi guys and welcome back.

2

00:00:01,910  -->  00:00:04,970
In this video, let's finish up our
header so that we can include our

3

00:00:04,970  -->  00:00:08,960
navigation and a bit more information
about the branding of the page in here.

4

00:00:08,990  -->  00:00:10,010
So let's get started.

5

00:00:11,010  -->  00:00:14,520
At the moment, our header only
contains an image and that's it.

6

00:00:14,760  -->  00:00:18,690
But in the original designs, we have
the title of the page essentially the

7

00:00:18,790  -->  00:00:21,450
brand name which is just "Microblog".

8

00:00:21,600  -->  00:00:24,120
And we've also got a
couple of navigation links.

9

00:00:24,300  -->  00:00:25,650
So we're going to do that.

10

00:00:26,130  -->  00:00:33,360
The first thing is we're going to add
a div with a class of navbar brand in

11

00:00:33,360  -->  00:00:39,120
here, and that is going to contain the
image as well as the microblog text.

12

00:00:39,239  -->  00:00:41,494
So we're going to cut
this and put it in there.

13

00:00:41,884  -->  00:00:44,334
Remember that you can
use new lines in HTML.

14

00:00:44,604  -->  00:00:45,504
No problem at all.

15

00:00:46,044  -->  00:00:49,644
Here, you can see that I'm
using BEM sort of notation.

16

00:00:49,734  -->  00:00:53,874
So the header is going
to be the nav bar itself.

17

00:00:54,324  -->  00:00:57,984
This is the block name and
this is the element name.

18

00:00:58,538  -->  00:01:02,198
So as well as the image there, we're
also going to put microblog in there.

19

00:01:02,768  -->  00:01:07,018
Later on if we wanted to and if we
require it for CSS styling we could

20

00:01:07,018  -->  00:01:10,038
put this into a span or something
like that but for now, we've got the

21

00:01:10,038  -->  00:01:11,688
logo there and we've got the text.

22

00:01:11,748  -->  00:01:17,898
Remember that using CSS, we can then
go into the navbar__brand element,

23

00:01:17,898  -->  00:01:19,398
and we can change the font size.

24

00:01:19,488  -->  00:01:21,228
We can align things and so forth.

25

00:01:21,348  -->  00:01:23,898
So it was all going to be doable with CSS.

26

00:01:24,558  -->  00:01:28,398
As well as the brand, we're going to
have an unordered list element, which

27

00:01:28,398  -->  00:01:30,498
is going to be for the navigation.

28

00:01:30,738  -->  00:01:34,698
So we're going to give this a
class of navbar dunder navigation.

29

00:01:34,758  -->  00:01:37,308
I'm just saying dunder there,
because that's the Python way

30

00:01:37,308  -->  00:01:38,598
of saying double underscore.

31

00:01:38,868  -->  00:01:40,488
Inside this unordered list.

32

00:01:40,488  -->  00:01:45,528
We're going to have li elements for list
item, and these are going to have a class

33

00:01:45,678  -->  00:01:50,028
of navbar dunder navigation dash item.

34

00:01:50,418  -->  00:01:54,888
And in here, we're going to have our
<a> elements, which are the navigation

35

00:01:54,918  -->  00:01:57,398
elements or the links away to other pages.

36

00:01:58,021  -->  00:02:01,121
<a> elements needs a href
element to take you somewhere.

37

00:02:01,151  -->  00:02:06,431
This is the hypertext reference or
the destination of clicking this link.

38

00:02:06,638  -->  00:02:10,358
And also we're going to have
a class of navbar dunder link.

39

00:02:11,073  -->  00:02:13,443
Here, we're going to have
recent and that's going to

40

00:02:13,443  -->  00:02:15,483
be this, <a> element there.

41

00:02:16,173  -->  00:02:20,733
And then we're going to duplicate
this and give it the calendar

42

00:02:20,763  -->  00:02:22,893
as we saw in the design.

43

00:02:23,283  -->  00:02:28,353
Note that the hash symbol here for
href is just to signify that there's

44

00:02:28,353  -->  00:02:32,373
no destination at the moment, but
we can change these later on if we

45

00:02:32,373  -->  00:02:36,393
ever do add a calendar page and so
that we can go to different places.

46

00:02:36,912  -->  00:02:40,362
We don't need to populate the
hypertext attribute just yet, because

47

00:02:40,362  -->  00:02:41,922
we only have one page at the moment.

48

00:02:41,922  -->  00:02:45,122
So this is all just so it's
there for styling later on.

49

00:02:45,196  -->  00:02:46,996
And you'll see that this looks terrible.

50

00:02:47,126  -->  00:02:50,906
We have a list with bullet points in
there whereas in our actual design, we

51

00:02:50,906  -->  00:02:52,856
had all these things nicely laid out.

52

00:02:53,066  -->  00:02:53,936
But that's fine.

53

00:02:54,462  -->  00:02:59,962
The <ul> element is just to tell a screen
reader that these are sequential items

54

00:03:00,112  -->  00:03:04,732
that are related and we can use this and
it's pretty easy to use for navigation.

55

00:03:05,002  -->  00:03:07,882
We can then style it with
CSS in any way we want.

56

00:03:08,122  -->  00:03:10,702
And we're going to do that by removing
the bullet points and laying them

57

00:03:10,702  -->  00:03:13,552
out in a row instead of like this.

58

00:03:14,538  -->  00:03:16,079
Alright so that's
everything for this video.

59

00:03:16,079  -->  00:03:20,249
I know that things are getting pretty
weird because HTML on its own without

60

00:03:20,249  -->  00:03:25,742
CSS looks yeah, not great, but we're
going to fix all of that later on in

61

00:03:25,742  -->  00:03:29,612
this section so just wait for a couple
of videos until we've got all the HTML

62

00:03:29,612  -->  00:03:31,682
that is describing the page content.

63

00:03:31,962  -->  00:03:35,342
Then we're going to completely restyle
it and make it look much better,

64

00:03:35,372  -->  00:03:37,622
exactly like our design, using CSS.

65

00:03:37,712  -->  00:03:41,342
So thank you guys for tuning in for this
video and I'll see you in the next one.