OK so let's go ahead and create this blog from scratch.
So feel free to follow along here.
I'm going to go from creating a new file all the way up to finishing this blog here.
So the first thing that we'll want to do.
I'm going to keep the solution open just so that I can reference it and make sure we have color correct
and font sizes.
But the first thing that we really want to do is get our files set up so I have two files a blog that
HMO and it has nothing in it so far except the title blog and it's linked to a style sheet called Blog
Dotsie SS That's empty.
So this is just you know the two files that we're going to need.
And now let's go ahead and fill them in.
So we have to decide when are doing something like this.
Where do we start.
And I think the best solution is to start with some of this markup in our age G-mail and styling some
of it but we don't have to get everything their perfect word for word before we actually style things
.
So I would start by you putting a paragraph or two and one of these headers in our body.
And to do that this is Lorem Ipsum text except it's bacon ipsum which is just add bacon ipsum dot com
.
Click on give me bacon and just copy one of the paragraphs.
I'm just going to use what I have here but the words aren't so important as long as they are words there
.
So if you want to use bacon ipsum go ahead.
But if you don't if you object to bacon you can pick any other ipsum or just make up your own words
or actually put your own blog post there.
That would be ideal.
And then I'm going to also just put one of the headings here and one note it might make sense to make
these an H1 both of them.
But generally the rule is you want to have one H-1 on the page it should be the biggest thing on your
page.
So because we have multiple of each are multiple headings here multiple article titles.
I'm going to go with H-2 but at the end of the day it doesn't matter at all because we're going to style
everything about it we're going to change the font size we're going to change the color and all of the
things that would be set by making it an H1 versus nature to those differences will be eliminated anyways
.
So I'm going to go with H-2 and I'm just going to say this is my first article not the most creative
title but save it.
And let's just preview it to start.
So open it up.
OK.
So there's our blog so far.
So we have a bunch of decisions to make.
The first place that I might start is in getting this body to have this border.
So I did provide the colors in the last video.
I'm just going to copy this color here and I'm going to give the body of water so I will select the
body and then all we have to do is say border and it's 20 pixels solid this gray color.
And let's check that out.
OK.
So it doesn't quite look the way that we would want it to look but it's getting there we have the border
.
Let's make it full size so we can really compare.
So another thing that you'll notice is that our border there is one problem which is it goes all the
way the whole body takes up the entire page.
Versus here the body only takes up part of the page.
And then there's spacing on either side.
Then there's also the spacing on the inside that we don't have because our words in our text go right
up against the border.
So let's start by solving that problem and to fix that.
Of course you need padding.
So this is 20 pixels padding on all sides.
You can see there's padding at the bottom and the left and the right as well.
So in the body we're just going to assign padding 20 pixels on all four sides and we get this OK.
So that's a little bit closer.
The next thing that we should work on is getting the width correct and it's not just a matter of getting
the width to be the right size when it's full screen but also as it shrinks down you'll see that it
stays this is 700 pixels it stays at 700 pixels for a while and then it shrinks and shrinks and scales
.
So we want to make sure we can get that to happen.
So we're going to use a little bit of a trick.
And then the one other thing you want to do is make sure that it's centered right now.
Well we can't really tell.
But it's not centered it's going to be on the left side.
So let's go ahead and add the within first.
So let's say with 700 pixels and save and this is what I was talking about it on the left and we want
to center in the middle and to do that we can use the auto or the margin auto trick that I had talked
about in the box model video.
So we're going to set a margin and we're going to just use the short cut.
So we're going to do zero pixels up top and bottom and then Otto on the left and right.
Remember when we just do two here rather than four.
This is top and bottom and this is left and right.
So that centers it for us automatically but then you'll notice by giving it a zero top and bottom it's
now right up against the top.
And this one here is not.
We have some space.
There's 20 pixels right there.
So that's a simple fix.
Just the same line change that back to 20 P x.
We do need the x.
We didn't before because when it's zero you can just leave it at zero.
But when there's a number we need the next.
OK so that's looking pretty close.
The only thing is that as we shrink we want this to stay 700 pixels until it can no longer say 700 pixels
.
And we want it to shrink down and it's pretty easy to do that actually all that we want to do is change
this to be max width and then we're going to assign it a percentage with.
And what this says is make it 80 percent when you need to.
But at a maximum make it 700 pixels.
So I'll show you what that looks like when you refresh.
Nothing changes because it's added to maximum seven hundred pixels so it checks if 80 percent would
be more than 700 pixels which it would in this case.
So it stays at 700 still stays at 700 until right here where it starts to shrink.
That's where 80 percent now is less than 700 pixels.
OK.
So now we have our basic body set up.
The next thing that I'd like to do here is get our Funt going.
So again if we go to the notes that I have from the last video the font is called Source sense pro.
So let's go ahead and head over to Google phos and look for source sends Pro.
So I have it open here but again it's just Google dot com slash fonts and just do a search for a source
sends pro right here add to collection use.
And now we have a choice which font weights do we want.
And I actually didn't tell you this in the original video but this is just the normal font face of the
font weight 400.
And this is a heavier weight.
It's folded.
So we're going to want both of those.
So normal in bold 400 700 and that's it.
We go down here and copy this link.
We can get rid of Google fonts now and we're going to go to our HMO and just paste that link in.
And now we have the ability to use source sense.
So let's assign it to both paragraphs and age twos and we also want it to be on these dates.
So what we could do is select paragraph and say font family source sense pro and we could do the same
thing for H-1.
But that's not a really good use of our success.
Our code is going to be a little bit repetitive every element that we want to use it on.
We would have to go and add this in.
So what we do instead is just apply it to the body.
And by playing into the body everything inside of it will inherit it.
So font family source and pro and save refresh and there we go we ever H-1 using it or H-2 and we have
a paragraph.
So that's looking pretty good so far.