1
00:00:00,730 --> 00:00:05,820
All right so it's time for another exercise and that's you can see here we're going to build a simple

2
00:00:05,880 --> 00:00:07,450
minimalist blog site.

3
00:00:07,590 --> 00:00:12,930
And this exercise is really going to focus on pretty much everything we've covered but it's really going

4
00:00:12,930 --> 00:00:19,110
to hit on a lot of the box model things so padding and margin and borders as well as type polygraphy

5
00:00:19,350 --> 00:00:21,920
getting a new Google font and a few other things.

6
00:00:22,080 --> 00:00:25,050
So we're going to build this I'm going to give you a few instructions.

7
00:00:25,050 --> 00:00:30,120
If you do want to attempt it on your own first and then we're going to go over it as always starting

8
00:00:30,120 --> 00:00:31,890
from scratch in the next video.

9
00:00:32,430 --> 00:00:34,020
So I'll give you some hints.

10
00:00:34,020 --> 00:00:37,200
The first thing you'll probably notice is this gray box.

11
00:00:37,860 --> 00:00:44,850
And that's actually a border that's around the body so the body has this 20 pixel border that goes all

12
00:00:44,850 --> 00:00:45,470
the way around it.

13
00:00:45,480 --> 00:00:50,670
And so that means that the body has an explicit with that it's not going all the way across the screen

14
00:00:50,700 --> 00:00:52,900
but it goes from here to there.

15
00:00:53,310 --> 00:00:57,790
So another thing that I'll mention here are some of the colors.

16
00:00:58,440 --> 00:01:00,730
So you don't have to guess the colors.

17
00:01:00,750 --> 00:01:05,370
It would be a good exercise for you to actually use a color picker and try and find this out on your

18
00:01:05,370 --> 00:01:05,920
own.

19
00:01:06,270 --> 00:01:11,640
But because I'm not sure how how the quality will be carried over through video and that will change

20
00:01:11,640 --> 00:01:12,450
some things.

21
00:01:12,480 --> 00:01:16,340
I'm just going to give you the colors so I have them typed up here.

22
00:01:16,560 --> 00:01:21,510
You can refer back to these or you can feel free to use your own colors but the border color around

23
00:01:21,510 --> 00:01:24,500
the body here is this shade of gray.

24
00:01:24,630 --> 00:01:28,720
The date color this blue and this is this shade of blue here.

25
00:01:28,920 --> 00:01:34,300
And then the heading color for the blog titles is this shade of bluish gray.

26
00:01:34,740 --> 00:01:40,160
And then one other thing is that you'll need to have a font included here and this font.

27
00:01:40,380 --> 00:01:43,410
I definitely would not expect you just to guess off the top of your head.

28
00:01:43,410 --> 00:01:50,280
It's called Source sense pro and it's available on Google fonts so you'll have to go on Google fonts

29
00:01:50,280 --> 00:01:50,520
.

30
00:01:50,730 --> 00:01:51,950
Download it.

31
00:01:51,950 --> 00:01:52,600
Include it.

32
00:01:52,600 --> 00:01:56,830
We have to download it but include it correctly in your aged him out or your CSSA file.

33
00:01:57,180 --> 00:02:00,760
So a few other things this blockquote right here.

34
00:02:01,170 --> 00:02:04,650
This effect is just a left border that's been turned on.

35
00:02:04,800 --> 00:02:07,580
So it's the same gray color as we have here it's just thinner.

36
00:02:07,680 --> 00:02:09,410
So that's aleft border.

37
00:02:09,570 --> 00:02:14,190
One thing I need to pay attention attention to is making sure these are all aligned exactly the same

38
00:02:14,190 --> 00:02:15,060
.

39
00:02:15,060 --> 00:02:19,410
Notice there's a little margin or padding or something here.

40
00:02:19,410 --> 00:02:25,410
The next thing that I'll point out here is that the date is in all caps.

41
00:02:25,560 --> 00:02:27,600
So there's a way to do that with your success.

42
00:02:27,660 --> 00:02:28,730
Make it uppercase.

43
00:02:29,070 --> 00:02:33,720
And also that there's a little bit of letter spacing here.

44
00:02:33,720 --> 00:02:37,790
So this is not in the normal letter spacing they're spaced a little further apart.

45
00:02:38,400 --> 00:02:41,900
And then one last thing in between the posts.

46
00:02:41,910 --> 00:02:47,370
There's this line and this is an H R element stands for a horizontal rule.

47
00:02:47,370 --> 00:02:53,100
And so you can add an H R in and as far as styling this to get this thin line that kind of shrinks down

48
00:02:53,100 --> 00:02:53,590
.

49
00:02:53,820 --> 00:02:54,910
I found something online.

50
00:02:54,930 --> 00:02:56,560
I'm just going to show it to you in the next video.

51
00:02:56,670 --> 00:03:03,030
But just research our styles and there are so many great articles and code pens that you can just copy

52
00:03:03,030 --> 00:03:03,950
one of.

53
00:03:04,020 --> 00:03:08,490
So I don't expect you to get this just right other than that.

54
00:03:08,640 --> 00:03:11,580
Feel free to use any text that you want.

55
00:03:11,670 --> 00:03:15,720
I used I think this is bacon ipsum but put any text you want.

56
00:03:15,720 --> 00:03:20,460
Feel free to have more than two posts and then also go crazy with colors and fonts and make it your

57
00:03:20,460 --> 00:03:20,990
own.

58
00:03:21,330 --> 00:03:22,730
OK so I'll see you in the next video.

59
00:03:22,740 --> 00:03:23,960
We'll start from scratch.