1
00:00:00,780 --> 00:00:06,390
So next up let's go ahead and just duplicate this markup which is all I did here.

2
00:00:06,720 --> 00:00:12,690
I did use slightly different words slightly different bacon ipsum between these paragraphs.

3
00:00:12,810 --> 00:00:19,310
So I'll just copy these two over into the h t m l But again that's not the focus here.

4
00:00:19,350 --> 00:00:26,340
So what we want again make sure let's just take this from scratch so it's div class equals posts.

5
00:00:26,850 --> 00:00:32,880
And some of you might be wondering why I even bothered putting div a div with class equals post around

6
00:00:32,880 --> 00:00:33,870
everything.

7
00:00:33,900 --> 00:00:35,710
This would work fine without that.

8
00:00:35,820 --> 00:00:37,880
It's really just about grouping things together.

9
00:00:38,100 --> 00:00:42,810
I'd rather than having one giant mess where one blog post bleeds into another.

10
00:00:42,810 --> 00:00:48,570
I like to have things contained a little bit so that I know this is one post and it ends right here

11
00:00:49,020 --> 00:00:52,910
so it's more just about in my opinion keeping the code a little bit clean.

12
00:00:53,340 --> 00:01:05,530
So then we wanted to have a div called date or classical date and that date is December 11 2015.

13
00:01:05,820 --> 00:01:07,750
Save that.

14
00:01:07,830 --> 00:01:12,640
Then we had an H2 and that H-2.

15
00:01:12,720 --> 00:01:18,510
This is another article which is another terrible article.

16
00:01:18,840 --> 00:01:19,950
Don't recommend that you read it.

17
00:01:19,950 --> 00:01:21,490
It's just about bacon.

18
00:01:21,780 --> 00:01:25,500
So I'm just going to go ahead and copy this quote again.

19
00:01:25,830 --> 00:01:26,990
Which is a paragraph.

20
00:01:27,060 --> 00:01:30,490
Class equals quote paste that in.

21
00:01:30,630 --> 00:01:32,870
And then we have two more paragraphs here.

22
00:01:33,130 --> 00:01:40,800
One and finally the last bit of markup that we need.

23
00:01:40,800 --> 00:01:42,000
The second paragraph.

24
00:01:42,000 --> 00:01:43,950
There we go.

25
00:01:44,640 --> 00:01:49,000
So let's see how this looks.

26
00:01:49,080 --> 00:01:54,910
So one thing I'm noticing is that we have a little less spacing between the posts here.

27
00:01:54,960 --> 00:01:56,760
So this one just runs into this.

28
00:01:56,760 --> 00:02:02,670
The date December 11th we definitely want a little spacing there as we can see in the left part of that

29
00:02:02,670 --> 00:02:05,220
could be because the HRR that we're missing.

30
00:02:05,220 --> 00:02:09,020
Although I think what we need to do is just add in some margin between the blog posts.

31
00:02:09,150 --> 00:02:11,780
So let's start by getting this h r in.

32
00:02:12,570 --> 00:02:15,690
So we haven't actually seen the H R element really in practice.

33
00:02:15,690 --> 00:02:19,410
It's a very simple one to use just looks like this.

34
00:02:19,410 --> 00:02:24,810
It's actually self-closing doesn't take anything it's it doesn't have any closing tag or any inner content

35
00:02:24,960 --> 00:02:27,540
just a char horizontal rule.

36
00:02:27,540 --> 00:02:30,200
If we refresh what you'll see.

37
00:02:30,210 --> 00:02:35,940
So that gives us this line going across and that ordinarily is fine.

38
00:02:35,940 --> 00:02:40,830
Most people though like to style these a little bit so this one is really faint.

39
00:02:40,950 --> 00:02:46,710
I don't know if you can tell but it's basically getting a little thicker and then trailing off on the

40
00:02:46,710 --> 00:02:52,310
edges and there are some great resources and things on line that you can use to style any char.

41
00:02:52,410 --> 00:02:57,960
And the reason they added this in here is that I wanted to force you to look something up and to try

42
00:02:58,530 --> 00:03:00,840
to find some styles that you didn't write yourself.

43
00:03:00,840 --> 00:03:04,830
So I'm going to show you exactly what I would do to find some H R styles.

44
00:03:04,830 --> 00:03:09,170
I would just Google HDR style and see what we get.

45
00:03:09,390 --> 00:03:13,320
And you can see I've actually clicked on two of them before.

46
00:03:13,890 --> 00:03:20,280
So we've got simple styles for each jars and you can see there's a few options here.

47
00:03:20,460 --> 00:03:23,290
So they think this is the one that I went with right here.

48
00:03:23,550 --> 00:03:25,980
But let's just try one like this.

49
00:03:25,980 --> 00:03:31,440
Click on code and all we have to do is copy these.

50
00:03:31,440 --> 00:03:36,780
These are two styles and copy this down and we don't.

51
00:03:36,900 --> 00:03:41,970
I don't want to think that you need to understand every line here because this is some some stuff that

52
00:03:42,180 --> 00:03:45,460
is pretty advanced and kind of hacky as you can see this person says.

53
00:03:45,480 --> 00:03:50,280
Not really supposed to work but does the only thing that we want to do is make sure that these are going

54
00:03:50,280 --> 00:03:56,910
to be selecting our H R and so what this is doing is letting HRO with class of style 7 which we don't

55
00:03:56,910 --> 00:03:57,600
have.

56
00:03:57,870 --> 00:03:59,760
So let's just select a char

57
00:04:04,020 --> 00:04:06,670
and let's just see what this looks like.

58
00:04:06,690 --> 00:04:08,120
Refresh the page.

59
00:04:08,150 --> 00:04:09,270
OK so there we go.

60
00:04:09,360 --> 00:04:11,400
So I personally don't care for that one.

61
00:04:11,430 --> 00:04:14,700
I'm going to use this one here that kind of trails off.

62
00:04:14,700 --> 00:04:17,240
Feel free to do whatever you'd like and play around with it.

63
00:04:17,610 --> 00:04:23,280
But again the point was that I wanted you to try and find something external that you didn't write and

64
00:04:23,280 --> 00:04:25,420
I want to show you that it's totally fine to do that.

65
00:04:25,560 --> 00:04:27,100
So I'm just copying this in.

66
00:04:27,270 --> 00:04:29,220
I didn't write this.

67
00:04:29,500 --> 00:04:34,520
Need to get rid of these styles here and put this in.

68
00:04:35,400 --> 00:04:42,870
So all they're doing is looks it looks like they're setting a border on the HRO so no border height

69
00:04:43,200 --> 00:04:46,370
which is just one pixel and then this background image which is a gradient.

70
00:04:46,550 --> 00:04:48,870
And so that's how they get that gradient effect.

71
00:04:48,870 --> 00:04:51,970
So if we refresh Now there you go.

72
00:04:52,110 --> 00:04:55,710
We have this nice gradient effect here and if we wanted to.

73
00:04:55,710 --> 00:04:59,530
I actually prefer this one so I'm just going to go ahead and keep this one.

74
00:04:59,760 --> 00:05:00,350
Over this.

75
00:05:00,350 --> 00:05:05,380
I might change the color a little bit so that it's a lighter gray but let's just keep that for now.

76
00:05:05,580 --> 00:05:11,250
But we still have this problem which is our our next blog post is starting too soon and we need to add

77
00:05:11,250 --> 00:05:13,090
some space there.

78
00:05:13,410 --> 00:05:17,940
So all that we need to do is add a little bit of a margin.

79
00:05:18,360 --> 00:05:25,680
So this is actually a nice a nice coincidence that we have this blog post wrapper around every post

80
00:05:25,950 --> 00:05:31,090
because we can just add a margin to the bottom of each post so that will add space here.

81
00:05:32,220 --> 00:05:34,210
So all we need to do is select.

82
00:05:34,230 --> 00:05:36,560
Let me just show you the class post.

83
00:05:36,630 --> 00:05:37,810
That's one post.

84
00:05:38,160 --> 00:05:39,580
So then we're just going here.

85
00:05:39,670 --> 00:05:50,370
It's like post margin and let's do 20 pixels and not just margin.

86
00:05:50,490 --> 00:05:59,600
Let's just do it on the bottom so only March and bottom refresh and that's looking pretty close.

87
00:06:00,210 --> 00:06:06,000
So the last little issue here is that we have a little bit more space over here than we do here and

88
00:06:06,000 --> 00:06:13,050
that's because this or that we added is actually outside of the post class so it's not being affected

89
00:06:13,050 --> 00:06:15,140
by that margin that we added in.

90
00:06:15,150 --> 00:06:19,490
So if we did that we just move the A char.

91
00:06:19,500 --> 00:06:20,160
Where is that.

92
00:06:20,160 --> 00:06:25,510
Here we go to the bottom of the post and we are fresh.

93
00:06:25,590 --> 00:06:27,960
You can see if we get the spacing that we want it.

94
00:06:28,600 --> 00:06:36,210
OK so if we wanted to experiment and get this exact one we would just go back to that H.R. styles and

95
00:06:36,300 --> 00:06:37,730
try some of the other ones.

96
00:06:37,890 --> 00:06:41,970
But what I really want to show again is that we can incorporate other styles in.

97
00:06:42,010 --> 00:06:46,770
We don't really have to know exactly how they work although it's a good idea to be curious and to try

98
00:06:46,770 --> 00:06:48,080
and figure it out.

99
00:06:48,930 --> 00:06:53,790
So hopefully you enjoyed making this project to nice simple minimal blog and for now.

100
00:06:53,790 --> 00:06:56,430
Obviously it doesn't actually function as a blog.

101
00:06:56,430 --> 00:07:01,390
There are no comments we can't add in a new post with any sort of interface.

102
00:07:01,470 --> 00:07:06,600
We have to actually edit the aged him out ourself but when we get to javascript and when in particular

103
00:07:06,600 --> 00:07:11,670
and we get to the back end and we have a database and we have a server going in a framework called Express

104
00:07:12,050 --> 00:07:17,610
we actually going to take this blog and turn it into a real blog where we can add a post using a form

105
00:07:17,970 --> 00:07:20,840
we can comment and we can do some other things like vote.

106
00:07:21,060 --> 00:07:22,410
So that's going to be really exciting.

107
00:07:22,410 --> 00:07:24,350
We'll use this assess it.

108
00:07:24,360 --> 00:07:28,540
It's relatively nice looking for relatively few lines.

109
00:07:29,040 --> 00:07:31,200
OK I'll see you when we cover javascript