Defining Content Areas8:29 with Nick Pettit
The HTML is just the beginning. Now we're going to use CSS to appropriately size and space content so that it's proportional in the design.
But HTML is just the beginning. 0:00 Now we're going to use CSS to appropriately size and space content, so 0:02 that it's proportional in the design. 0:07 When we define content areas in this way, I like to call this blocking the content, 0:10 because we're going to use CSS to reserve several major areas 0:15 of the page by marking it with a colored rectangle or a block. 0:20 The rectangle allows us to see how different 0:25 parts of the page relate to one another visually, and we can adjust the columns, 0:28 margins, padding, and other properties of the layout accordingly. 0:32 Coloring these blocks helps to provide some contrast between each element, 0:37 because if we were to use the same color for 0:41 everything, like some gray tone, it might push us toward design decisions 0:44 we might make if the page was actually using a monotone color palate. 0:49 However, most pages will likely have many different colored images, 0:54 so we want to try and simulate that with the blocks of color. 1:00 Let's get started. 1:04 At the top of this page, just after the bootstrap CSS, 1:06 we're going to add a new style sheet called style.css. 1:12 So let's just create that now, and we'll put this in our CSS folder. 1:17 We'll call it style.css. 1:24 We already have bootstrap to help get us started, 1:27 but we need to write our own styles too. 1:30 We're including this after the bootstrap CSS in case we want to override 1:33 any bootstrap styling. 1:38 We'll create that style.css file in a moment. 1:40 First, there's a few more things on the page we can style 1:44 just by using bootstrap classes. 1:47 Bootstrap provides some really helpful CSS that makes basic styling of a page fast, 1:49 in which provides a pretty solid looking basic design as well. 1:55 The header in particular should have the name of the website on the left side and 1:59 the navigation on the right side, when in the desktop layout. 2:05 We can do this by making the header a flex box container and 2:10 using the content between justification, 2:14 which will stretch the content to fill the width of the parent container. 2:17 So let's do that now. 2:20 On the header, we'll add some classes. 2:22 First, we'll type d-flex followed 2:26 by justify-content-between, and 2:31 then finally, the class flex-wrap. 2:35 Adding the class d-flex makes this a flexbox container. 2:41 Then there are classes for justifying content, and 2:47 then finally we're wrapping the content, if it's too wide for the container. 2:50 Of course, we could do this with our own CSS. 2:56 But using bootstrap classes in this way, 2:59 it can be a lot faster when you're prototyping, especially for a unique 3:02 instance like the header that won't be repeated anywhere else on the page. 3:06 Check the notes associated with this video for 3:10 more information about how to use bootstrap classes to layout a web page. 3:13 So now let's create this style.css file. 3:17 So inside of CSS, we'll say new file, we'll call it style.css. 3:22 And then let's open it up. 3:30 Right now the header doesn't have a whole lot of space in the design, and 3:32 it's kinda just flush against the top of the page. 3:36 And it doesn't have a lot of space below it to separate the content. 3:39 So the first thing I want to do is add some padding on the top and bottom. 3:43 So we'll just use, An element selector on the header. 3:49 And we'll add 2rems of padding to the top and bottom. 3:56 And then none on the left and right. 4:04 So let's save style.css and also save the index.html file. 4:08 Now let's preview this in the browser, see what it looks like. 4:15 And the profile picture is, of course, still at a ridiculous size. 4:19 But at least the header looks better with the text on the left and 4:23 our navigation links on the right side, and some space between the top and bottom. 4:29 Now let's mark the featured area that goes between the header and 4:36 the profile information, and we'll mark it with a large block of color. 4:41 We'll do this by giving it an explicit height, since there's no image there. 4:46 And then we'll assign a color and 4:51 add some space to the top and bottom to separate it. 4:54 So let's switch back to style.css. 4:58 And we'll select the featured section using the featured class. 5:03 And we'll just give it an explicit height of say 500 pixels. 5:11 We'll set the background to a bright red, and sort of a middle green and blue. 5:15 And then we'll add some margin on the bottom, just to give it some separation. 5:24 And we'll make that margin the same as the padding on the bottom and 5:30 top of the header. 5:35 So we're consistent, and actually before we refresh the browser, 5:36 let's resize that huge profile image. 5:41 So we'll select that with the profile-info class we added. 5:44 And inside of that remember is the image element, 5:48 and let's just say it has a max width 5:55 of 6rems, max height of 6rems, 6:00 and let's add some curves to it, 6:04 we'll say border-radius 1rem. 6:09 And often times we wouldn't add these stylistic touches in a quick mock-up like 6:13 this, but it's really easy to do with just one line of CSS, so that's fine for now. 6:18 So let's save that and check it in the browser. 6:25 And now we have this nice featured area and we could put a large 6:29 image there that we want to feature on this profile page. 6:34 And then we have the profile image, 6:39 our biotext, and the send message button. 6:43 This is looking a lot better, 6:48 because now there's three clear content areas just below the featured image. 6:50 However, the profile is flash against the text and 6:56 we probably look better if it were center aligned with 7:00 the profile bio and send message button. 7:05 We can do that using negative margin on the top to put it up a little bit, 7:08 and then some positive margin on the right side to push the text away. 7:13 So let's switch back, and we'll say 7:19 margin -0.5rem on the top to pull it up, 7:24 1rem on the right side to push the text away, 7:29 and then 0 on the other sides. 7:35 So let's save that and refresh. 7:38 And now you can see that the profile image is aligned, 7:43 kind of center vertically with other elements here, which looks nice. 7:48 And then it pushes the text away, so it's not right up against the image. 7:53 The bootstrap grid is very helpful in aligning page elements to a grid, but 7:58 you should also feel free to make your own adjustments like this. 8:03 That profile photo looked strange when the top of the photo was aligned 8:07 to the top of the other columns. 8:11 But it feels more natural for its vertical alignment to be in the middle. 8:13 This is coming together nicely. 8:19 We still need to work on the image gallery and increase the fidelity of the mock-up, 8:20 but the general shape of the layout is coming together. 8:26
You need to sign up for Treehouse in order to download course files.Sign up