1 00:00:01,240 --> 00:00:04,800 OK so let's go ahead and create this blog from scratch. 2 00:00:04,920 --> 00:00:06,620 So feel free to follow along here. 3 00:00:06,630 --> 00:00:11,530 I'm going to go from creating a new file all the way up to finishing this blog here. 4 00:00:12,000 --> 00:00:13,880 So the first thing that we'll want to do. 5 00:00:14,070 --> 00:00:18,540 I'm going to keep the solution open just so that I can reference it and make sure we have color correct 6 00:00:18,540 --> 00:00:19,750 and font sizes. 7 00:00:20,040 --> 00:00:25,690 But the first thing that we really want to do is get our files set up so I have two files a blog that 8 00:00:25,730 --> 00:00:33,870 HMO and it has nothing in it so far except the title blog and it's linked to a style sheet called Blog 9 00:00:33,970 --> 00:00:35,990 Dotsie SS That's empty. 10 00:00:36,030 --> 00:00:38,760 So this is just you know the two files that we're going to need. 11 00:00:39,090 --> 00:00:41,170 And now let's go ahead and fill them in. 12 00:00:41,790 --> 00:00:44,950 So we have to decide when are doing something like this. 13 00:00:44,970 --> 00:00:46,540 Where do we start. 14 00:00:46,560 --> 00:00:52,440 And I think the best solution is to start with some of this markup in our age G-mail and styling some 15 00:00:52,440 --> 00:00:57,060 of it but we don't have to get everything their perfect word for word before we actually style things 16 00:00:57,070 --> 00:00:57,420 . 17 00:00:57,780 --> 00:01:04,290 So I would start by you putting a paragraph or two and one of these headers in our body. 18 00:01:04,290 --> 00:01:11,700 And to do that this is Lorem Ipsum text except it's bacon ipsum which is just add bacon ipsum dot com 19 00:01:11,700 --> 00:01:14,130 . 20 00:01:14,130 --> 00:01:17,340 Click on give me bacon and just copy one of the paragraphs. 21 00:01:17,610 --> 00:01:24,000 I'm just going to use what I have here but the words aren't so important as long as they are words there 22 00:01:24,010 --> 00:01:24,330 . 23 00:01:24,660 --> 00:01:26,840 So if you want to use bacon ipsum go ahead. 24 00:01:26,940 --> 00:01:32,550 But if you don't if you object to bacon you can pick any other ipsum or just make up your own words 25 00:01:32,550 --> 00:01:34,520 or actually put your own blog post there. 26 00:01:34,560 --> 00:01:35,810 That would be ideal. 27 00:01:36,030 --> 00:01:41,400 And then I'm going to also just put one of the headings here and one note it might make sense to make 28 00:01:41,400 --> 00:01:44,070 these an H1 both of them. 29 00:01:44,070 --> 00:01:49,800 But generally the rule is you want to have one H-1 on the page it should be the biggest thing on your 30 00:01:49,800 --> 00:01:50,820 page. 31 00:01:50,850 --> 00:01:55,420 So because we have multiple of each are multiple headings here multiple article titles. 32 00:01:55,500 --> 00:02:00,840 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 33 00:02:01,200 --> 00:02:05,760 everything about it we're going to change the font size we're going to change the color and all of the 34 00:02:05,760 --> 00:02:11,090 things that would be set by making it an H1 versus nature to those differences will be eliminated anyways 35 00:02:11,100 --> 00:02:11,360 . 36 00:02:11,640 --> 00:02:19,830 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 37 00:02:19,830 --> 00:02:22,210 title but save it. 38 00:02:22,410 --> 00:02:24,220 And let's just preview it to start. 39 00:02:24,630 --> 00:02:27,300 So open it up. 40 00:02:27,360 --> 00:02:27,870 OK. 41 00:02:27,930 --> 00:02:30,090 So there's our blog so far. 42 00:02:30,960 --> 00:02:33,100 So we have a bunch of decisions to make. 43 00:02:33,120 --> 00:02:38,620 The first place that I might start is in getting this body to have this border. 44 00:02:39,180 --> 00:02:42,110 So I did provide the colors in the last video. 45 00:02:42,120 --> 00:02:47,850 I'm just going to copy this color here and I'm going to give the body of water so I will select the 46 00:02:47,850 --> 00:02:56,240 body and then all we have to do is say border and it's 20 pixels solid this gray color. 47 00:02:56,370 --> 00:02:57,930 And let's check that out. 48 00:02:58,560 --> 00:02:59,090 OK. 49 00:02:59,220 --> 00:03:04,410 So it doesn't quite look the way that we would want it to look but it's getting there we have the border 50 00:03:04,430 --> 00:03:05,120 . 51 00:03:05,580 --> 00:03:08,350 Let's make it full size so we can really compare. 52 00:03:09,120 --> 00:03:13,740 So another thing that you'll notice is that our border there is one problem which is it goes all the 53 00:03:13,740 --> 00:03:16,390 way the whole body takes up the entire page. 54 00:03:16,560 --> 00:03:19,500 Versus here the body only takes up part of the page. 55 00:03:19,560 --> 00:03:21,890 And then there's spacing on either side. 56 00:03:21,930 --> 00:03:27,180 Then there's also the spacing on the inside that we don't have because our words in our text go right 57 00:03:27,180 --> 00:03:28,550 up against the border. 58 00:03:28,590 --> 00:03:31,820 So let's start by solving that problem and to fix that. 59 00:03:31,860 --> 00:03:33,520 Of course you need padding. 60 00:03:33,630 --> 00:03:35,930 So this is 20 pixels padding on all sides. 61 00:03:35,970 --> 00:03:40,430 You can see there's padding at the bottom and the left and the right as well. 62 00:03:40,470 --> 00:03:50,560 So in the body we're just going to assign padding 20 pixels on all four sides and we get this OK. 63 00:03:50,580 --> 00:03:52,510 So that's a little bit closer. 64 00:03:52,530 --> 00:03:58,230 The next thing that we should work on is getting the width correct and it's not just a matter of getting 65 00:03:58,230 --> 00:04:07,350 the width to be the right size when it's full screen but also as it shrinks down you'll see that it 66 00:04:07,350 --> 00:04:14,730 stays this is 700 pixels it stays at 700 pixels for a while and then it shrinks and shrinks and scales 67 00:04:14,730 --> 00:04:15,360 . 68 00:04:15,360 --> 00:04:17,730 So we want to make sure we can get that to happen. 69 00:04:17,820 --> 00:04:19,660 So we're going to use a little bit of a trick. 70 00:04:19,830 --> 00:04:24,220 And then the one other thing you want to do is make sure that it's centered right now. 71 00:04:24,360 --> 00:04:25,330 Well we can't really tell. 72 00:04:25,350 --> 00:04:28,210 But it's not centered it's going to be on the left side. 73 00:04:28,230 --> 00:04:30,850 So let's go ahead and add the within first. 74 00:04:31,700 --> 00:04:41,310 So let's say with 700 pixels and save and this is what I was talking about it on the left and we want 75 00:04:41,310 --> 00:04:47,250 to center in the middle and to do that we can use the auto or the margin auto trick that I had talked 76 00:04:47,250 --> 00:04:49,660 about in the box model video. 77 00:04:50,100 --> 00:04:54,920 So we're going to set a margin and we're going to just use the short cut. 78 00:04:55,050 --> 00:05:01,190 So we're going to do zero pixels up top and bottom and then Otto on the left and right. 79 00:05:01,230 --> 00:05:03,900 Remember when we just do two here rather than four. 80 00:05:04,020 --> 00:05:06,640 This is top and bottom and this is left and right. 81 00:05:07,230 --> 00:05:14,100 So that centers it for us automatically but then you'll notice by giving it a zero top and bottom it's 82 00:05:14,100 --> 00:05:15,740 now right up against the top. 83 00:05:16,020 --> 00:05:17,870 And this one here is not. 84 00:05:17,880 --> 00:05:18,720 We have some space. 85 00:05:18,720 --> 00:05:20,950 There's 20 pixels right there. 86 00:05:21,210 --> 00:05:22,630 So that's a simple fix. 87 00:05:22,770 --> 00:05:26,350 Just the same line change that back to 20 P x. 88 00:05:26,370 --> 00:05:27,490 We do need the x. 89 00:05:27,510 --> 00:05:30,580 We didn't before because when it's zero you can just leave it at zero. 90 00:05:30,720 --> 00:05:33,970 But when there's a number we need the next. 91 00:05:33,990 --> 00:05:36,110 OK so that's looking pretty close. 92 00:05:36,120 --> 00:05:46,440 The only thing is that as we shrink we want this to stay 700 pixels until it can no longer say 700 pixels 93 00:05:46,440 --> 00:05:46,470 . 94 00:05:46,470 --> 00:05:52,440 And we want it to shrink down and it's pretty easy to do that actually all that we want to do is change 95 00:05:52,440 --> 00:05:59,400 this to be max width and then we're going to assign it a percentage with. 96 00:05:59,700 --> 00:06:03,760 And what this says is make it 80 percent when you need to. 97 00:06:03,900 --> 00:06:07,540 But at a maximum make it 700 pixels. 98 00:06:07,620 --> 00:06:09,780 So I'll show you what that looks like when you refresh. 99 00:06:09,780 --> 00:06:16,410 Nothing changes because it's added to maximum seven hundred pixels so it checks if 80 percent would 100 00:06:16,410 --> 00:06:19,180 be more than 700 pixels which it would in this case. 101 00:06:19,200 --> 00:06:27,840 So it stays at 700 still stays at 700 until right here where it starts to shrink. 102 00:06:27,840 --> 00:06:31,250 That's where 80 percent now is less than 700 pixels. 103 00:06:31,770 --> 00:06:32,030 OK. 104 00:06:32,040 --> 00:06:35,370 So now we have our basic body set up. 105 00:06:35,370 --> 00:06:39,330 The next thing that I'd like to do here is get our Funt going. 106 00:06:39,330 --> 00:06:49,300 So again if we go to the notes that I have from the last video the font is called Source sense pro. 107 00:06:49,320 --> 00:06:54,370 So let's go ahead and head over to Google phos and look for source sends Pro. 108 00:06:54,540 --> 00:07:00,540 So I have it open here but again it's just Google dot com slash fonts and just do a search for a source 109 00:07:01,530 --> 00:07:06,860 sends pro right here add to collection use. 110 00:07:07,140 --> 00:07:09,990 And now we have a choice which font weights do we want. 111 00:07:10,250 --> 00:07:15,540 And I actually didn't tell you this in the original video but this is just the normal font face of the 112 00:07:15,540 --> 00:07:17,390 font weight 400. 113 00:07:17,520 --> 00:07:19,220 And this is a heavier weight. 114 00:07:19,230 --> 00:07:20,050 It's folded. 115 00:07:20,100 --> 00:07:22,090 So we're going to want both of those. 116 00:07:22,440 --> 00:07:26,970 So normal in bold 400 700 and that's it. 117 00:07:26,970 --> 00:07:29,700 We go down here and copy this link. 118 00:07:29,700 --> 00:07:37,180 We can get rid of Google fonts now and we're going to go to our HMO and just paste that link in. 119 00:07:37,950 --> 00:07:41,530 And now we have the ability to use source sense. 120 00:07:42,180 --> 00:07:51,100 So let's assign it to both paragraphs and age twos and we also want it to be on these dates. 121 00:07:51,270 --> 00:07:58,620 So what we could do is select paragraph and say font family source sense pro and we could do the same 122 00:07:58,620 --> 00:08:00,290 thing for H-1. 123 00:08:00,990 --> 00:08:03,640 But that's not a really good use of our success. 124 00:08:03,780 --> 00:08:07,950 Our code is going to be a little bit repetitive every element that we want to use it on. 125 00:08:07,950 --> 00:08:10,230 We would have to go and add this in. 126 00:08:10,770 --> 00:08:15,140 So what we do instead is just apply it to the body. 127 00:08:15,690 --> 00:08:19,420 And by playing into the body everything inside of it will inherit it. 128 00:08:19,470 --> 00:08:30,360 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 129 00:08:30,360 --> 00:08:32,100 a paragraph. 130 00:08:32,810 --> 00:08:34,560 So that's looking pretty good so far.