All right so it's time for another exercise and that's you can see here we're going to build a simple
minimalist blog site.
And this exercise is really going to focus on pretty much everything we've covered but it's really going
to hit on a lot of the box model things so padding and margin and borders as well as type polygraphy
getting a new Google font and a few other things.
So we're going to build this I'm going to give you a few instructions.
If you do want to attempt it on your own first and then we're going to go over it as always starting
from scratch in the next video.
So I'll give you some hints.
The first thing you'll probably notice is this gray box.
And that's actually a border that's around the body so the body has this 20 pixel border that goes all
the way around it.
And so that means that the body has an explicit with that it's not going all the way across the screen
but it goes from here to there.
So another thing that I'll mention here are some of the colors.
So you don't have to guess the colors.
It would be a good exercise for you to actually use a color picker and try and find this out on your
own.
But because I'm not sure how how the quality will be carried over through video and that will change
some things.
I'm just going to give you the colors so I have them typed up here.
You can refer back to these or you can feel free to use your own colors but the border color around
the body here is this shade of gray.
The date color this blue and this is this shade of blue here.
And then the heading color for the blog titles is this shade of bluish gray.
And then one other thing is that you'll need to have a font included here and this font.
I definitely would not expect you just to guess off the top of your head.
It's called Source sense pro and it's available on Google fonts so you'll have to go on Google fonts
.
Download it.
Include it.
We have to download it but include it correctly in your aged him out or your CSSA file.
So a few other things this blockquote right here.
This effect is just a left border that's been turned on.
So it's the same gray color as we have here it's just thinner.
So that's aleft border.
One thing I need to pay attention attention to is making sure these are all aligned exactly the same
.
Notice there's a little margin or padding or something here.
The next thing that I'll point out here is that the date is in all caps.
So there's a way to do that with your success.
Make it uppercase.
And also that there's a little bit of letter spacing here.
So this is not in the normal letter spacing they're spaced a little further apart.
And then one last thing in between the posts.
There's this line and this is an H R element stands for a horizontal rule.
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
.
I found something online.
I'm just going to show it to you in the next video.
But just research our styles and there are so many great articles and code pens that you can just copy
one of.
So I don't expect you to get this just right other than that.
Feel free to use any text that you want.
I used I think this is bacon ipsum but put any text you want.
Feel free to have more than two posts and then also go crazy with colors and fonts and make it your
own.
OK so I'll see you in the next video.
We'll start from scratch.