2.5 Laying Out the Feature Section
It’s time to start building out the main sections of the site, beginning with the “Feature” section, as we discuss our strategy for structuring and styling the page.
1.Introduction2 lessons, 05:34
2.Structuring Your HTML9 lessons, 1:03:52
3.Styling the Page5 lessons, 43:27
4.Conclusion1 lesson, 00:31
2.5 Laying Out the Feature Section
Now that we’ve finished up the header, our nav bar, at the very top of our site We're gonna move on to the next couple of sections. Now a lot of the HTML in this course or on this page is gonna be very repetitive. You can see a lot of these sections are very, very similar but each of them has their own little unique layout, configurations. So, I'm not gonna make you watch me type out every bit of HTML code for this course. Instead, we're gonna talk about the over arching principles behind what we're doing, we're gonna talk about the approach that we're gonna take as we're building out this HTML. But we will see a lot of just copying and pasting content, as we weed through all of this text. So for these first couple of sections here, let's take a look at how we would approach this. Now remember, since we're using Bootstrap the column layouts are gonna be very, very easy to handle. So for our first section here we can see that we have some text and a button over here on the left and then an image over here on the right. We have a very simple two column layout for this section and it looks like they're roughly half and half, so each one takes up about 50% of the width. Just below that, we have a title, which for all and intents and purposes takes up the full width, even though there is a line break there and then a section just below it that has three separate columns, one with some text, one with an image and then a column with some more text. Now when you're building a layout like this, it's important to know when to use Bootstrap and when not to use Bootstrap. So if we get down to this next section, we'll see that it extends all the way out to the edges. But there's also a dividing line in the middle and we'll discover that Bootstrap probably isn't the best solution for this particular section, but we'll get to that one later. For now let's focus on these top two sections. Now one thing you want to pay close attention to when you start laying out your pages is the size of the text and the fonts that are been used and we already saw that Roboto is being used everywhere. But we're seeing it in different sizes and different weights, for example, this very first section has very large text on it and all of the rest of the sections as we look throughout the rest of the page, the text is a little bit smaller than it is up at the top. But it's still pretty large there. So for the very top section, we're gonna use an h1 for this, because this is gonna be kind of the feature section of our page. And everything else we're gonna use h2 elements for the second biggest text that we see there. Now we'll see that some of the sections have text in italics. We even have different sizes of paragraphs. One thing that I find every helpful when starting out a page like this, especially this single page application that we have going on here. Is I like to print out the page on a piece of paper and then go through the Photoshop file and take note of the different font sizes. Now, keep in mind that those font sizes aren't going to match up exactly with what you're seeing In the browser window. So you might not be using the same numbers, but you can at least point out where the text is the same size. You can see that this paragraph is the same size as that paragraph. And it gives you a really good visual model. In fact, I have a printout sitting in front of me with little notes in pencil along the sides for the different font sizes and things like that. So again, that's one thing that I find very helpful. But again, as we're laying out the overall page, I find it very helpful when using something like Bootstrap, to go through and just take a quick look at how you're gonna lay everything out. So everything here is gonna be in a column. We're gonna have one row for this first section with two equal sized columns. So let's start with that. Now I've taken all of our files and I've made a new copy of our site folder, so we're now on Site 005. So our starting files are actually going to be the files from Site 004 and all of the changes we make in this lesson will be in the Site 005 folder. So I'm gonna open that up in Visual Studio code, you'll see I have this site 005 folder open here and we can get started. So we have our nav bar and if you want to, if it helps you, and sometimes it does help me when I'm first building something, we can put some HTML comments here. So we can put nav for our main navigation, just to kind of help us delineate where everything is. So then just below our nav section, we can just create another comment here. So again this main section is gonna be in a div with a class of container. And again, I'm using short hand code here, which you might or might not have in whatever code editor you're using. So I'm gonna type div dot container because it's a class of container. And I'm gonna do pound main section cuz we're gonna give this section an ID of main hyphen section, so then I'll hit tab and it will fill that out for me. And again, since it's in a class of container, remember this is a Bootstrap class, so this will keep everything contained within that fixed width that we talked about before. And then inside that container we're gonna have a row and then inside that row, we're gonna have two columns. Now, I've played around with this a little bit myself and we can see in the Photoshop file that it looks like it's roughly half and half, maybe the right column is a little bit larger than the left column. So for the left column, I want to span five columns of the 12 column grid layout. And for the right column, I wanna span about seven columns. So let's jump back into our code and let's do that. So I'm going to create a div, with a class of COL, SM5 and then I'm also gonna give this particular div a class of main heading, in case I want to style it specifically in CSS later on. And I'm just using two different class names so I'm using dot here twice. And there we go, we have our first column there. And then I'm going to create our second column and this is kinda the way I like to do it. I like to create my columns first and then I'll fill in the content within those columns. So our second column is gonna be col sm7, sorry hyphen 7. There we go and we now have our two columns inside our row. And you'll notice I'm using SM here. What this means is that at the break point that Bootstrap defines for small browser windows and we have extra small, small, medium, large and extra large. Those are all the different break points that Bootstrap provides for us. And when we use one of these prefixes like small, medium, large etc., what this is saying is that at a small browser size and up, anything over small. So this would include medium, large, and extra large. This particular column is gonna take up five columns of the grid system, but anything smaller than small, anything smaller than whatever this prefix is here is actually going to default to all 12 columns. So once we get down to a really small size, this column is actually going to take up the full width. Same thing for our second column here. At a small browser size and up, it's going to take up seven columns of the 12 column grid system. But anything smaller then a small browser size is gonna take up the full width. So inside our first column here, if we look at our Photoshop file, we have an h1 here and then we have, what I'm gonna use is a paragraph below that and then a button below that. And we're gonna use Bootstrap buttons, we're gonna have to restyle those Bootstrap buttons later on. But we're gonna start by using the default Bootstrap button. So let's jump back into our code. And again, this is one of those areas where I'm not going to make you watch me type out all of that content instead I'm just going to copy it and paste it into the window here. And so, I'll point out what I did. I need to adjust the indentation first, there we go. So again, inside this first column, we have an h1 and then we have a paragraph and below the paragraph, we have our button. Now what I want to point out here are the two classes we have here. We have the BTN class. Both of these classes are Bootstrap classes, by the way. Away, we have our BTN class, which styles the basic look and shape of the button. And then we have the BTN primary class, which determines the color of the button. So by default, a BTN primary class is gonna have a blue color to it. And then you'll notice after the Discover More text that I'm using this, we have a couple of non-breaking spaces first but then I'm using this &rarr, which is a right facing arrow in HTML. So let's save that and jump back into our browser. And we'll refresh and I think I might be pointing you to the wrong folder. Yup, I need to point to Site 005 there and there we go. So this is that right facing arrow I pointed out using &RARR;. And then we have our left column, so let's jump back into our code. And let's do our right column and we're gonna be using whatever images here inside the images folder, you'll see an image called tablet2-twoup, that's the image we're gonna be using. And so since this one is just an image, I'm just gonna go ahead and type this one in. So it's gonna be an image tag, img and then our sourse is gonna be our images folder. So we'll point to images/tablet2 -twoup.jpg. And then for ALT+text, we can put something in there as well. I'm just gonna leave it blank for the purposes of this course, but you would definitely want to include some ALT+ text there. And then I want to include a couple of Bootstrap specific classes here. If we were to save this as is and take a look at it in the browser and refresh. We see we have a huge image, it's way larger than we need it to be. So, what I wanna do is, I wanna give it a class of img-responsive. Which will change the width of the image to match the column that it's in. So if I were to refresh it now, we won't really see much of a difference because it's still fitting nicely within that column and again we can go through and change some of this in CSS later on, but keep in mind that this img responsive is, you find yourself using it a lot in Bootstrap. Because as your columns change size, if your images aren't responsive, then they will take up too much space. And so this basically makes it a little more fluid. And I also wanna put a class in here of pull-right, so that it will float to the right, so that you'll notice it moved over to the right a little bit. But this is so that when we do size it down a little bit and it's a little bit smaller, it won't be right up against this text over here, instead it'll be a little further off to the right. Now even though this doesn't look just like the Photoshop file yet, we're still going to move on because again, I want to get all of the HTML down before we start worrying about the CSS. So the next section, if we go back to our Photoshop file, it's a little more complex. So we have this first section, which is gonna be an H2 element. You'll be happy to see our awesome features. And this one's gonna take up the full width. And then we have a three column setup here with some HTML inside that. So again, this is gonna be another area where I'm just gonna copy and paste everything for this entire section. And then we'll talk about it and move forward. So let's jump back into our index.html page. And if we wanna label this one with a section name, we can, so we'll call this one the awesome feature section. And then I'm just gonna paste the HTML for that section, so again we have, starting that section off we have a div with the class of container so that it stays within that fixed width. And we're also giving it an ID of awesome features. That way in our CSS we can go into this section and style what's in this section specifically. So inside that we have a row. This first row have the class of col-xs-12. That's the class name you wanna use if want your column to take up all 12 columns of the grid system, no matter what size your browser is. Then I'm also giving it a text-center class which is another Bootstrap helper class. And that class does just what you would think it would do. It puts everything inside that container, or it centers all the text inside that container, I should say. So inside that container we have an h2 with a class of section heading. And that other class there is just so that we can style it a certain way. And then we have our text and you'll notice that we have a hard line break right there in the middle of our text, because we wanna make sure that it breaks halfway. And then after that, we see that our column closes. We have our closing div for that column and then a closing div for that row and then we have a new row after that. This new row has three columns in it. So each of these columns takes up one third of the full width of the Bootstrap grid system and one third of 12 is four. So we're using col-sm-4 if our browser size gets smaller than sm then it's gonna jump up to full width and instead of being three columns it'll just be three sections stacked on top of each other. Now, keep in mind when you're using Bootstrap we're not gonna really get into resizing our browser and handling breakpoints in this particular course. Instead, we're just taking a look at the overall approach to building a page like this. But you wanna make sure that when you're setting up your columns like this, that this middle section of your class here, the size of the column, that's going to usually take a little bit of experimentation. If you discover that it looks really bad to have three columns at a small browser size then you might bump this up to col-md-4, so then anything less than a medium browser would take up the full width of the container. Now keep in mind you can also use multiple classes here, we could also do col, we could also do col-md-4 as well as col-sm-6. So at a small size it would take up half the width, at a medium size and larger, it would take up one third of the width. And at an extra small size, it would take up the full width. But I'm just gonna back down to our starting size here col-sm-4 and then we have a description list and we've given this a class of new features we'll explore this again when we do our CSS. But we have the word new and then some text here and then we have a paragraph below that and a link. And then we have our middle column here, which just has an image in it, another image from our images folder. And then we have our third column, which is another definition list with a different ID, awesome features list. And we're gonna do some special styling on this one later on so that we can get these bullet points that we have over here on the right side. But that's all of the HTML that we need for now for those two sections. So let's save our files and we'll move on with the next lesson.