2.7 Laying Out More Content
Moving on, we continue building out the HTML content for some text-heavy sections of the web page as we continue discussing strategies for tackling content layout and styling.
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.7 Laying Out More Content
Hello, and welcome back. In this lesson, I've cheated a little bit because I've already entered in all of the HTML that we're gonna be talking about in this particular video. And the reason I've done that is because it's a lot of text and images, it's a lot more of what we've already seen. Now, we're gonna walk through the HTML, so I can point out the thinking behind some of the decisions that I've made, but the HTML is already there, and you can find that HTML in the site 007 folder. And if we jump over to our browser, we can see the first couple of sections that we've already walked through together, but then, below that, we can see all of the new content that's been added below this video section here. So let's jump into Photoshop and see what this is supposed to look like. So the content that we're covering is everything below this video section here and above this blue bar that we see down here. So our first section is more texts and images. So on the left of this first row, we have some text and on the right we have an image. The second row, it's just flipped around, and then we have a section below that with some buttons, some text, and then some icons down here. So let's scroll up and talk about some of the decisions we've made. Now, one thing you might notice, if we look here we see a column on the left and a column on the right, but if we jump back over to our browser, see, here's our video section here. So this is just below the video section, our two columns are not columns right now. We have our first columns which is this text here, is actually stacked on top of the image. And our second row as well, which has the image first and then the text that also is not set up in columns right now. And we have the sections below that are set up in columns, but you'll notice I did not use the Bootstrap columns with this first section. And the reason for that has to do with the way the content is arranged. Now this is something we'll cover again once we start styling this in CSS, but I want to bring it up now because you need to keep these things in mind when you are building out your HTML. You need to keep in mind what you will be doing in the future once you start styling it. So when I look at these columns I notice something very particular. I notice that the text here on the left, is vertically centered With the image over here on the right. You'll notice with a lot of sections you might have the top of the text aligned with the top of an image and that's not the case here. Instead, it's vertically centered with that image on the right, and that's very difficult to achieve if you do it using Bootstrap columns. Instead, what we're gonna do is we're gonna lay out these two columns, as well as the two columns below. Using the flex box model just like we're doing with our video section. And using the flex box model that makes it very easy to vertically center our content. So that's what's going on with these first two columns. So let's take a look at the HTML for those two columns, you'll notice I've got the SITE007 folder open here. And I've included all of this inside this MORE INFO section. So here we have our div with a class of container, because even though I'm not using Bootstrap columns here, I still want it to be contained within the same width as the rest of our Bootstrap containers. So I've included it inside a div with a class container, but I've also given it an ID of more-info. And then inside that div, I've created a div with a class of info-row. Notice that this is not a Bootstrap row instead, I've created my own row class called info-row. And that info-row is going to be a flex container for the column on the left which is this info text column and the column on the right which is this info image, which is just another one of the images in our images folder. And then our second info-row column is the same way, it's gonna be a flex container. Our left column in this case is gonna be image and our right column in this case is gonna be the text. So then beneath that we have this section called wave section. And you'll notice that this opening div here does not have a class of container on it and let me explain why. Let's jump over to our browser, and not to your browser, let us jump into Photoshop, and let's scroll down to that section. You can see why we call it a wave section cuz there is a wave in the background. And since we have that wave in the background that takes up the full width of our browser window, we need to make sure that that's not in a container. So that's going to be a background image for this entire section here. And then we have kind of a centered section here and then below that centered section, we have a three column layout. So our centered section is going to be this first section right here inside the wave section. So you'll notice that it's a div, the class of text center which is a Bootstrap class that will center all of the text inside of it. And then it has an ID of download section, simply so that we can jump into it in CSS, and style anything specifically that we need to. Then we have an h4 with a class of alt-heading and I've given that a specific class, because the text here is gonna look different than most of our other headings. Then we have an h2 with a line break in the middle of it and then a button. So all of that is gonna be this content here that's centered on the page. So then for the section below it where we have three columns, we've got this div with the class of container. Here we do need that cl;ass of container because these three columns are gonna be fixed within that fixed width. And then we have a row and in that row we have three columns with a class of col-sm-4. So they're all gonna gonna be a one-third of the full width. So inside that we have a class of news item and that includes a paragraph and a date. And you might be wondering why I have this extra div around it, instead of just putting the paragraph and the date inside that column div. Why have I put this extra div around it? Well if we go back to our Image here, our Photoshop image, you'll notice we have this little border on the left. But that border isn't taking up the full height it's just a really small border over here. And so in CSS we're going to be using the before sudo class on this news item div that I've created, to create that left border. And that will make more sense later on when we actually build it. But that was the thinking there, and that's why we have these paragraph, or these two paragraphs here nested inside that news item div. So we have three columns there, and then we can move down to our next section which is the benefits section, so we have this big title here and then three columns below it. And certainly we can see that here so we have our h2 here with our text to centered, and then below that we have a div with a class of row and then a few divs with symmetric content in it. So you'll notice we're using some Font Awesome classes here, if you've never used Font Awesome before it's very simple to use. This is how we're creating those icons. We simply use an i-element here, you'll notice we have an empty i element and has an opening and closing tag, but with nothing inside it. And we've simply given it a class of fa, which means Font Awesome. And then a second class which specifies what particular icon we wanna use. So here it's fa-lightbulb-o, and if we jump in to our browser, we can see what those look like. And again we're using Font Awesome here for these icons instead of the icons that are in the Photoshop file. Simply because there is a CDN out there for Font Awesome so it makes it really easy to point to those icons that way. And we've already seen how we've included the link to that CDN in our HTML, so that we can very easily access those icons. And if you want to learn more about that, you can do a search here for Font Awesome cheat sheet. And when you do that the very first item there will take you to a page where it has all of the icons that are included with Font Awesome, as well as that class name that you would use to create that particular icon. So that's how we laid out the sections in between let's go back to our browser here. That's how we laid out all of the sections that come after the video section but before that next big blue bar that we're gonna talk about in the next lesson.