1 00:00:01,552 --> 00:00:04,175 Hello. Excited for a new lesson? 2 00:00:04,175 --> 00:00:06,859 I hope so because this is going 3 00:00:06,859 --> 00:00:08,276 to be a long one. 4 00:00:09,558 --> 00:00:11,928 Now that we know how the box model works, 5 00:00:11,928 --> 00:00:13,676 let's build a simple layout for 6 00:00:13,676 --> 00:00:15,524 our blog page. 7 00:00:15,524 --> 00:00:18,438 This is where all the fun begins. 8 00:00:18,438 --> 00:00:21,438 We want a layout just like this one. 9 00:00:22,546 --> 00:00:25,322 So we want a box with our main content, 10 00:00:25,322 --> 00:00:27,792 the box for the author info and the 11 00:00:27,792 --> 00:00:30,041 box to show what other blog posts 12 00:00:30,041 --> 00:00:31,374 are on our blog. 13 00:00:32,654 --> 00:00:34,266 We will start by putting all the 14 00:00:34,266 --> 00:00:37,622 content we have so far inside a container 15 00:00:37,622 --> 00:00:40,502 and center that container on the web page 16 00:00:40,502 --> 00:00:44,688 like most of the websites you use every day do. 17 00:00:44,688 --> 00:00:48,134 We will do that by using the div element, 18 00:00:48,134 --> 00:00:50,768 which we have not talked about yet. 19 00:00:50,768 --> 00:00:53,943 The div element is one of the most used elements. 20 00:00:53,943 --> 00:00:56,671 Div stands for divide, and so we use it simply 21 00:00:56,671 --> 00:01:00,085 to divide our page into sections by creating 22 00:01:00,085 --> 00:01:03,002 boxes where we put our contents in. 23 00:01:04,918 --> 00:01:06,847 So let's wrap all the content we have 24 00:01:06,847 --> 00:01:09,180 so far inside a div element. 25 00:01:13,566 --> 00:01:15,233 Starting right here. 26 00:01:17,135 --> 00:01:18,385 Just write div. 27 00:01:22,583 --> 00:01:25,583 Some space and I'll copy everything, 28 00:01:28,398 --> 00:01:31,446 all the content we have so far, 29 00:01:31,446 --> 00:01:34,613 I will cut it and paste it right here. 30 00:01:41,799 --> 00:01:44,527 Now I need to indent this code by 31 00:01:44,527 --> 00:01:46,027 using the tab key. 32 00:01:49,615 --> 00:01:51,948 I will show you in a second. 33 00:01:52,942 --> 00:01:55,859 So that the code looks much better. 34 00:01:58,150 --> 00:02:00,350 And it's easier to read with these indents. 35 00:02:00,350 --> 00:02:05,033 Html is the first level, that is the second level, 36 00:02:05,033 --> 00:02:07,046 that's the third level, and everything 37 00:02:07,046 --> 00:02:10,213 inside of the div is the fourth level. 38 00:02:12,494 --> 00:02:16,381 And then third level, second level, first level. 39 00:02:16,381 --> 00:02:19,464 So now let's call this div container. 40 00:02:22,642 --> 00:02:24,392 So call it container. 41 00:02:26,334 --> 00:02:28,478 And like I showed you before, we will 42 00:02:28,478 --> 00:02:31,646 use Command E, this time with the cursor 43 00:02:31,646 --> 00:02:33,229 on this class name. 44 00:02:34,815 --> 00:02:36,542 Command E and then we will make 45 00:02:36,542 --> 00:02:39,190 a new rule for this class. 46 00:02:39,190 --> 00:02:42,079 So the class selector and the 47 00:02:42,079 --> 00:02:43,654 name of the class container 48 00:02:43,654 --> 00:02:45,867 and now we can write our styles 49 00:02:45,867 --> 00:02:47,117 for this class. 50 00:02:48,898 --> 00:02:51,398 First, I will define the width 51 00:02:53,740 --> 00:02:56,573 of this and I will use 1140 pixels 52 00:02:59,142 --> 00:03:00,225 as the width. 53 00:03:02,510 --> 00:03:05,747 The standard width has been 960 pixels 54 00:03:05,747 --> 00:03:08,184 for a long time but as screens start 55 00:03:08,184 --> 00:03:10,143 getting larger and larger, 56 00:03:10,143 --> 00:03:12,893 we can also make wider web pages. 57 00:03:14,382 --> 00:03:17,715 So let me just make these windows bigger 58 00:03:20,590 --> 00:03:23,590 so we can see what's happening here. 59 00:03:24,718 --> 00:03:28,087 Now, we want this container to be centered 60 00:03:28,087 --> 00:03:31,670 in the window, not all the way to the left. 61 00:03:33,175 --> 00:03:36,817 So let's go back to brackets to do that. 62 00:03:36,817 --> 00:03:40,045 And it's actually easier than it sounds. 63 00:03:40,045 --> 00:03:42,077 In order to do that, we have to define 64 00:03:42,077 --> 00:03:45,244 left and right margin of the container 65 00:03:46,330 --> 00:03:47,247 to be auto. 66 00:03:52,305 --> 00:03:55,805 Margin left, auto, and margin right, auto. 67 00:04:00,433 --> 00:04:03,505 And the auto means that the left 68 00:04:03,505 --> 00:04:07,196 and right margin are adjusted automatically 69 00:04:07,196 --> 00:04:09,602 according to the context of the element, 70 00:04:09,602 --> 00:04:13,019 which is the browser window in this case. 71 00:04:14,971 --> 00:04:17,244 So let's see what happened. 72 00:04:17,244 --> 00:04:21,230 So, like magic, the website is centered. 73 00:04:21,230 --> 00:04:25,187 But even if I adjust the browser window, 74 00:04:25,187 --> 00:04:28,770 our content always stays centered, you see? 75 00:04:32,200 --> 00:04:36,033 Now let's go back and create those three boxes 76 00:04:37,459 --> 00:04:39,126 that we saw earlier. 77 00:04:39,962 --> 00:04:43,379 Again, we use the div element to do that. 78 00:04:47,273 --> 00:04:51,190 Div, and I will call the first one "blog post". 79 00:04:58,362 --> 00:05:01,529 So instead of copying all the content, 80 00:05:02,373 --> 00:05:05,659 I'll just delete this closing tag 81 00:05:05,659 --> 00:05:08,492 and put it where we want it to be. 82 00:05:09,947 --> 00:05:12,280 And it's down here, you see? 83 00:05:16,395 --> 00:05:19,585 Because here is the part where the author begins 84 00:05:19,585 --> 00:05:23,002 and everything above it is the blog post. 85 00:05:26,834 --> 00:05:30,152 And brackets automatically close that for us. 86 00:05:30,152 --> 00:05:32,902 Now again, let's indent this code 87 00:05:34,029 --> 00:05:36,230 so it's easier to read. 88 00:05:36,230 --> 00:05:37,480 Just like this. 89 00:05:38,866 --> 00:05:41,996 Now, below this, I'll create the container 90 00:05:41,996 --> 00:05:44,603 for the other blog post which will 91 00:05:44,603 --> 00:05:47,747 be the green blog post, if you remember it. 92 00:05:47,747 --> 00:05:49,997 So div, class, other posts. 93 00:05:52,760 --> 00:05:55,251 That's a great name for this, I think. 94 00:05:55,251 --> 00:05:59,963 And I'll just put some dummy text here for now. 95 00:05:59,963 --> 00:06:02,963 And finally, the box for the author. 96 00:06:04,498 --> 00:06:06,665 We have class, author box. 97 00:06:11,340 --> 00:06:13,090 We'll move this here. 98 00:06:16,488 --> 00:06:18,238 Now, indent and code. 99 00:06:20,524 --> 00:06:23,357 And save it, never forget to save. 100 00:06:24,250 --> 00:06:26,874 So let's just give them different 101 00:06:26,874 --> 00:06:28,707 background colors so we can see 102 00:06:28,707 --> 00:06:31,374 on the web page what's going on. 103 00:06:32,443 --> 00:06:34,441 Again, I will hit command E because 104 00:06:34,441 --> 00:06:37,398 it's the easiest way instead of switching 105 00:06:37,398 --> 00:06:40,898 back and forth between HTML and CSS files. 106 00:06:43,483 --> 00:06:47,019 So in order to specify a background color, 107 00:06:47,019 --> 00:06:50,731 it's very easy, just write background color 108 00:06:50,731 --> 00:06:52,648 and then chose a color. 109 00:06:53,914 --> 00:06:57,164 If you remember from our color lecture, 110 00:07:00,819 --> 00:07:03,902 blue is...red 0, green 0 and blue ff. 111 00:07:10,971 --> 00:07:13,888 Okay, let's close this post and now 112 00:07:14,956 --> 00:07:18,123 the other posts. For this one and now, 113 00:07:20,446 --> 00:07:22,446 again, background color. 114 00:07:26,245 --> 00:07:28,912 This one is green so, it will be 115 00:07:31,590 --> 00:07:34,840 0 for red, ff for green and 0 for blue. 116 00:07:36,964 --> 00:07:38,411 If you put this cursor on this color 117 00:07:38,411 --> 00:07:41,380 we can actually see it. Yeah, it's 118 00:07:41,380 --> 00:07:42,963 green as we wanted. 119 00:07:43,933 --> 00:07:45,780 And now the author box, we must 120 00:07:45,780 --> 00:07:47,947 find a style for this one. 121 00:07:50,319 --> 00:07:53,319 Background color, we want it yellow. 122 00:07:55,580 --> 00:07:59,580 So it's ff for red, ff for green and 0 for blue. 123 00:08:06,572 --> 00:08:07,489 So, yellow. 124 00:08:09,667 --> 00:08:12,151 We'll close these ones and let's check 125 00:08:12,151 --> 00:08:13,734 our web page again. 126 00:08:16,116 --> 00:08:18,172 So blue is the first box, green is 127 00:08:18,172 --> 00:08:21,755 the second box and yellow is the third box. 128 00:08:23,180 --> 00:08:26,420 Now, I want the width of the actual blog post 129 00:08:26,420 --> 00:08:29,683 to be 75 percent of the container and the 130 00:08:29,683 --> 00:08:33,085 other blog posts sectioned to be 25 percent. 131 00:08:33,085 --> 00:08:34,835 And that's very easy. 132 00:08:37,891 --> 00:08:41,058 So the blog posts, we just need to say 133 00:08:42,176 --> 00:08:45,259 width 75 percent, and the other posts 134 00:08:48,892 --> 00:08:51,309 Command E, width, 25 percent. 135 00:08:56,627 --> 00:09:00,164 So you see, we can not use only pixels 136 00:09:00,164 --> 00:09:03,723 to define measures but also percentages 137 00:09:03,723 --> 00:09:06,890 which will become very handy later on. 138 00:09:09,915 --> 00:09:14,312 Now it's 75 percent and that's just 25 percent 139 00:09:14,312 --> 00:09:16,499 here in the green box. 140 00:09:16,499 --> 00:09:18,631 Now, to put the green box beside the blue box, 141 00:09:18,631 --> 00:09:21,940 as we want it for our layout, we need to use 142 00:09:21,940 --> 00:09:25,001 a new property called float. 143 00:09:25,001 --> 00:09:27,904 And this is very important. 144 00:09:27,904 --> 00:09:30,252 With float, an element can be pushed 145 00:09:30,252 --> 00:09:32,347 to the left or to the right, allowing 146 00:09:32,347 --> 00:09:35,097 other elements to wrap around it. 147 00:09:36,843 --> 00:09:38,563 So if we define a float property 148 00:09:38,563 --> 00:09:41,913 for the blue and for the green box as left, 149 00:09:41,913 --> 00:09:45,162 the two boxes will be side by side. 150 00:09:45,162 --> 00:09:46,579 So let's do that. 151 00:09:47,683 --> 00:09:49,516 We'll start down here. 152 00:09:52,270 --> 00:09:53,270 Float, left. 153 00:09:55,158 --> 00:09:56,991 And the blue box also. 154 00:10:00,355 --> 00:10:01,355 Float, left. 155 00:10:03,971 --> 00:10:06,804 So let's see what this looks like. 156 00:10:09,579 --> 00:10:13,022 Great, these two boxes are side by side now. 157 00:10:13,022 --> 00:10:15,935 Now the problem is the yellow box is 158 00:10:15,935 --> 00:10:18,935 also up here where we don't want it. 159 00:10:20,453 --> 00:10:24,220 To avoid this, we have to use a clear property 160 00:10:24,220 --> 00:10:27,851 which is like the counterpart to float. 161 00:10:27,851 --> 00:10:32,018 I am actually going to do this in a very specific way. 162 00:10:33,550 --> 00:10:36,217 So please just copy the CSS code 163 00:10:37,972 --> 00:10:39,844 that I'm going to write here because 164 00:10:39,844 --> 00:10:41,524 it's not important that you understand 165 00:10:41,524 --> 00:10:43,387 it at this point. 166 00:10:43,387 --> 00:10:46,554 I'll use a very usual clear fix class. 167 00:10:48,867 --> 00:10:50,950 So write clear fix after. 168 00:10:52,859 --> 00:10:54,593 Again, it's not important that you understand 169 00:10:54,593 --> 00:10:57,260 what I'm writing here right now. 170 00:11:01,011 --> 00:11:04,511 We'll just use this class and clear. Save. 171 00:11:12,822 --> 00:11:15,338 So after the green box, let's just add 172 00:11:15,338 --> 00:11:18,338 an empty div with a clear fix class. 173 00:11:21,814 --> 00:11:25,320 This may look a little strange to you now 174 00:11:25,320 --> 00:11:26,653 but don't worry. 175 00:11:30,660 --> 00:11:33,493 We will see how to use this later. 176 00:11:34,461 --> 00:11:35,294 Clear fix. 177 00:11:37,614 --> 00:11:39,614 Okay now it should work. 178 00:11:42,403 --> 00:11:43,736 Yeah, that's it. 179 00:11:45,516 --> 00:11:49,318 Now, we see that the yellow class is down here 180 00:11:49,318 --> 00:11:51,587 as we want it so we have these 181 00:11:51,587 --> 00:11:54,365 two boxes side by side with the 182 00:11:54,365 --> 00:11:56,274 float property, then we use the 183 00:11:56,274 --> 00:12:00,024 clear property in the strange clear fix class 184 00:12:01,320 --> 00:12:05,035 to clear the float so that this box 185 00:12:05,035 --> 00:12:07,952 can be right under these two boxes. 186 00:12:09,027 --> 00:12:12,860 Now, let's just add some margins and paddings. 187 00:12:14,125 --> 00:12:16,980 You see, the blue box and the green box here 188 00:12:16,980 --> 00:12:19,589 are way too close together so we 189 00:12:19,589 --> 00:12:22,256 can add paddings to those boxes. 190 00:12:25,659 --> 00:12:27,779 And I will just go back and 191 00:12:27,779 --> 00:12:31,196 I will actually use a CSS file here again 192 00:12:32,420 --> 00:12:36,350 so you can see all those class we created 193 00:12:36,350 --> 00:12:38,100 inside the html file. 194 00:12:42,002 --> 00:12:44,891 Brackets put those down here at the 195 00:12:44,891 --> 00:12:46,891 end of the CSS document. 196 00:12:48,115 --> 00:12:49,442 The container, the blog posts, 197 00:12:49,442 --> 00:12:52,359 the other posts and the author box. 198 00:12:53,651 --> 00:12:55,651 Now let's just add the padding 199 00:12:55,651 --> 00:12:58,716 to the right side of the blog post. 200 00:12:58,716 --> 00:13:01,290 If you remember padding, just like 201 00:13:01,290 --> 00:13:03,623 a wide space inside the box. 202 00:13:05,483 --> 00:13:08,066 We will just say padding right, 203 00:13:10,099 --> 00:13:11,599 and say 30 pixels. 204 00:13:13,252 --> 00:13:15,342 Okay, let's see. 205 00:13:15,342 --> 00:13:18,278 You'll see this space here, but still 206 00:13:18,278 --> 00:13:21,111 inside the box so it's still blue. 207 00:13:22,023 --> 00:13:25,684 And that will give us a nice space 208 00:13:25,684 --> 00:13:27,684 between those two boxes. 209 00:13:29,011 --> 00:13:31,458 Now we should also put a little margin 210 00:13:31,458 --> 00:13:33,363 between the top of the container 211 00:13:33,363 --> 00:13:35,570 and the browser window. 212 00:13:35,570 --> 00:13:38,331 So to give it a nice spacing between 213 00:13:38,331 --> 00:13:41,772 the beginning of the browser window here 214 00:13:41,772 --> 00:13:44,522 and the beginning of the content. 215 00:13:46,796 --> 00:13:50,451 And that's easy, the easiest way may be 216 00:13:50,451 --> 00:13:52,534 in the container element. 217 00:13:53,800 --> 00:13:56,883 If we set margin top of the container 218 00:13:59,450 --> 00:14:01,367 to let's say 20 pixels. 219 00:14:03,783 --> 00:14:06,366 Then, we have this nice spacing 220 00:14:09,197 --> 00:14:11,498 all the way up here. 221 00:14:11,498 --> 00:14:14,364 Okay, now let's just get rid of those 222 00:14:14,364 --> 00:14:16,281 ugly background colors. 223 00:14:19,228 --> 00:14:23,277 We just use them so we could see the boxes 224 00:14:23,277 --> 00:14:25,777 while we were working on them. 225 00:14:28,467 --> 00:14:31,659 Now, maybe see here in the container 226 00:14:31,659 --> 00:14:35,576 declaration block that we have these 3 margins. 227 00:14:36,490 --> 00:14:39,739 Margin left, margin right and margin top. 228 00:14:39,739 --> 00:14:43,227 There's actually a cleaner way of doing this. 229 00:14:43,227 --> 00:14:45,144 I'll just show you how. 230 00:14:46,116 --> 00:14:50,162 You can just write margin, then we specify 231 00:14:50,162 --> 00:14:52,495 the four possible margins in 232 00:14:53,994 --> 00:14:55,994 this shorthand property. 233 00:14:57,820 --> 00:15:01,320 So this goes like the top margin is first, 234 00:15:02,955 --> 00:15:05,335 we'll just write it here so you can see it, 235 00:15:05,335 --> 00:15:09,001 it's top is the first, then the right, 236 00:15:09,001 --> 00:15:11,251 then bottom, and then left. 237 00:15:16,203 --> 00:15:20,370 So the top button, we want to be 20 pixels, right? 238 00:15:21,346 --> 00:15:24,513 And the right is auto, the bottom is 0 239 00:15:27,163 --> 00:15:29,497 because we don't have any margin at the bottom, 240 00:15:29,497 --> 00:15:31,414 and left is auto again. 241 00:15:35,374 --> 00:15:38,291 So this short declaration here does 242 00:15:39,643 --> 00:15:42,060 the exact same thing as this. 243 00:15:43,123 --> 00:15:47,290 Just remember it's margin top, right, bottom and left. 244 00:15:50,621 --> 00:15:53,427 So I can just delete it and things look 245 00:15:53,427 --> 00:15:54,844 exactly the same. 246 00:15:56,570 --> 00:15:59,810 All the margins are still there and as you see, 247 00:15:59,810 --> 00:16:03,227 the ugly background colors are also gone. 248 00:16:04,931 --> 00:16:08,264 Another cool thing we can do is add like 249 00:16:09,364 --> 00:16:12,947 a gray line here to separate the author box 250 00:16:14,267 --> 00:16:16,767 from the two boxes above them. 251 00:16:18,507 --> 00:16:21,340 So let's go back to the author box 252 00:16:22,479 --> 00:16:25,146 and we'll use a border property. 253 00:16:26,100 --> 00:16:27,958 This border property allows you 254 00:16:27,958 --> 00:16:30,209 to do three things. 255 00:16:30,209 --> 00:16:34,042 The border width, the line type and the color. 256 00:16:35,309 --> 00:16:38,068 So just write border and top, because 257 00:16:38,068 --> 00:16:41,542 we want it to be at the top of the box, 258 00:16:41,542 --> 00:16:44,042 and then say 1 pixel width and 259 00:16:45,899 --> 00:16:49,057 we want it to be solid so just 260 00:16:49,057 --> 00:16:52,974 a normal solid line and then a nice gray color. 261 00:16:54,341 --> 00:16:57,443 Remember how to do a gray color? 262 00:16:57,443 --> 00:17:01,028 You just have to put the same value 263 00:17:01,028 --> 00:17:03,778 on the three r, g and b channels. 264 00:17:05,405 --> 00:17:06,572 Let's see 333. 265 00:17:09,891 --> 00:17:13,391 And then with our color picker, Command E, 266 00:17:15,404 --> 00:17:18,402 and we can just adjust it. 267 00:17:18,402 --> 00:17:21,235 We can use another different gray. 268 00:17:23,100 --> 00:17:26,183 So maybe this one here, I don't know. 269 00:17:27,968 --> 00:17:29,385 Alright, save it. 270 00:17:32,620 --> 00:17:36,703 And here we go, here we have this nice gray line. 271 00:17:37,803 --> 00:17:40,679 And we probably also want some padding here, 272 00:17:40,679 --> 00:17:43,961 so that all this content is not just glued 273 00:17:43,961 --> 00:17:47,044 right to the top of this div element. 274 00:17:48,479 --> 00:17:51,229 So let's also define some padding 275 00:17:53,227 --> 00:17:55,894 at the top, let's say 20 pixels. 276 00:17:57,875 --> 00:17:59,660 These numbers are not important 277 00:17:59,660 --> 00:18:02,410 at this stage because we are just 278 00:18:03,772 --> 00:18:06,105 trying out some things here. 279 00:18:09,072 --> 00:18:10,907 Alright, so you see now we have 280 00:18:10,907 --> 00:18:12,824 this nice padding here. 281 00:18:14,180 --> 00:18:16,243 So alright, I think we are 282 00:18:16,243 --> 00:18:18,908 pretty much done with our layout here. 283 00:18:18,908 --> 00:18:22,121 So we used float and clear in order 284 00:18:22,121 --> 00:18:26,601 to put all our layout boxes where we wanted them 285 00:18:26,601 --> 00:18:29,867 and we used padding and margin to create 286 00:18:29,867 --> 00:18:32,568 some distances between the boxes 287 00:18:32,568 --> 00:18:34,668 and that's essentially all you need 288 00:18:34,668 --> 00:18:37,251 in order to build some layouts. 289 00:18:38,463 --> 00:18:40,214 So in the next lecture, we'll just 290 00:18:40,214 --> 00:18:43,165 improve some things here on our website 291 00:18:43,165 --> 00:18:46,755 in order to make it look a little bit better 292 00:18:46,755 --> 00:18:49,227 and to teach you some more techniques 293 00:18:49,227 --> 00:18:50,995 that you can use. 294 00:18:50,995 --> 00:18:53,245 Alright, so see you there.