FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Structuring the Body

With the header in place, it's time to move on to the body of the page. As we fill out the body, we will insert the divs that will eventually contain our parallax background images, though they won't be fully functional just yet.

2.5 Structuring the Body

Hello and welcome back to scroll events made easy. As we move forward I'm gonna make a new copy of our site02 folder, we're gonna call it site03. Now that we've finished up with the header of our document we're gonna continue with our body, so let's navigate to site03/index.html and then I'm going to grab that site03 folder and drag it onto brackets. So now we've got site03 opened up, and in our index file I'm gonna scroll down to the end of our header, and we'll move on to the next section. So in the next section I'm going to include a div that we're not gonna get to just yet. For now I'm gonna leave it empty because this is gonna contain the meat and potatoes if you will of the parallax.js functionality. We're gonna end up adding some attributes. We're gonna add a class as well as some other attributes to this div. But for now I'm gonna leave it blank. And inside that div we're going to add a little bit of content. So I'm gonna create a div here with a class of image text. And notice that this is inside our first div. And then inside this image text div, I'm going to create a container. Again, we're using bootstrap classes here. Now this image text class is not bootstrap, this is something I made up and we'll get to that in a minute. But the class inside that, or the div inside that, is gonna have a class of container because we want some text inside of this that's only gonna take up our maximum width, or the maximum width of the rest of our content. So inside that div we're gonna create another div with a class of row. And you'll get used to doing this over and over again. And inside that row, again, this is gonna take up the full width, so create another div with a class of col-xs-12, and that will take up, again, the full width of its container. So I'm just gonna throw in a little bit of text here, we're gonna put an h3 tag that says Food is Good, because we're gonna have a picture of some food and then another paragraph. Maybe lorem. We'll probably end up taking off some of this cuz it's probably gonna be too much text. But we'll make this a little bit easier to read and maybe even just take it down to about that much text there. Just two quick sentences and that should do it. So that's all we really need for this image text container. And let me go ahead and show you how we're gonna style this. I'm gonna jump into CSS, we'll go into the main.css file and then I'm gonna create some css for the image text class, which again is that div that contains all of the text that's gonna be inside that particular div that's gonna have a background image on it eventually. But for that text, we wanna give it a background color. And this is eventually gonna be overlaying the image it's gonna be on top of the image. So I'm gonna give this a semi-transparent background color so I'm gonna give it a RGBA value of 000 that's three zeros and then 0.4 will be the opacity. So it will be 40% transparent or 40% opaque I should say and we're gonna give our text a color of white. So I'll eventually add some more CSS to this class, but for now that's enough to get our text to show up, so let's save that. We'll save index.html, we'll jump back into our browser and refresh it, and there we go. So now, we see our text here, and eventually there will be a background image behind that, and that background image will be scrolling with a parallax effect. But let's jump back to our code. And after this mysterious closing div here that we're eventually going to apply some more attributes to, I'm gonna create another container. And this is just gonna have more content in it. So we just want some foreground content in between all of our nicely scrolling background images. So we're gonna do the usual container, inside the container we're gonna have a row inside the row. This time we're going to create a couple of columns. Just so we can get use to using Bootstrap. So let's create a three column system here, so I'm gonna create COL access four which will take up one third of the 12 column system and inside that div we're gonna create another well using the bootstrap well class which will give it that grey background with rounded edges, or rounded corners. And inside that div I'm just gonna be an h four tag and for lack of creativity I'm gonna call this column one and then we'll put some lorem ipsum syntax in here as well. So we'll merge that down a little bit and that should be enough right there. So I'm gonna put a period right here and then we'll get rid of the rest of this text and there we go. So then I'll create a couple more columns to match it. Copy that, paste it and paste it. So we have three columns that each take up four columns of that 12 column system. So they each take up one-third of the full width, and they should all line up nicely side by side. So this ends that this particular closing div ends that column and so this one here will end that row. And then I'm gonna create another row just after that one, so we'll create another div with a class of row and by now, hopefully you're getting a hang of how old this works. Our next section here is gonna take up a full 12 columns and here, we're just gonna have a couple more paragraphs, nothing fancy. So, we'll create a paragraph with some Lorem text inside it. And we'll go to the next slide, then we'll do the same thing, and every time you to the lorem and then hit tab, you'll see the first sentence is the same but the second one is different. Maybe we'll get rid of that first sentence just so that it all looks different. And you can do a couple paragraphs there. But that looks pretty good, maybe do, let's do one more. Let's go to the end here and do one more paragraph. If we can type right. There we go. And then in here I'll type Lorem tab. And again this is a special plugin that I have for brackets. It's not going to come by default when you first install Brackets, but it is very handy. So there's three paragraphs inside that particular section. And I'm really just trying to fill out some content here. So after this content, here's our closing container tag here. We're gonna skip a couple lines and we're gonna put our next mysterious div here. And this is eventually gonna have some content inside it. I'm actually gonna leave this blank for now. I'll just put a comment here that says second image and we'll fill that out later and I'm not gonna put any text over this one. But here, again, we're just filling out some content so that we can have something to look at when we finish creating this. We'll create another div with a class of container, another div with a class of row. And you might have guessed it. We'll have another div with a class of col-xs-12. Another column that takes up the full width. Here we'll have just some more text and each three. Maybe with a subtitle in it, and then another paragraph with some Lorem ipsum text. And we might even put a second paragraph in here with more. And there we go. So you kind of get the idea here. We're just filling out a lot of content. I'll also throw in some bootstrap nav tabs here and I'm not going to type it all out for you because that would just be a bunch of extra video content in this video course that's taking us away from the main purpose. So I'm just gonna paste in some code here. Let me get that back to where it needs to be. And sometimes in brackets, the tabs get off a little bit and that really annoys me. But I'm not gonna worry about that right now. So again, this is all using some bootstrap markups in order to create a set of tabs. And you can click on the tabs to see different areas of content. So those are the tabs themselves. And then let me grab the rest of this content, which is going to be the content in each of those tabs. So just believe where we put the nav tags, we'll skip a couple of lines and then we'll paste the rest of that. And so these are gonna contain the content for those tabs. Real quickly I can show you that these list items here have a role of presentation and a class of active for the first one which means that's the active tab, the current tab. We can see this first section of content also has a class of active which means that it's the current content that's gonna be showing. And then each of these has an ID. This one has an ID of home which matches up with the link that's inside that first list item. It's pointing to #home. So as we click on each of these tabs it's going to reveal different parts of this content and let's get this back where it needs to be. Tab that back over to the left. And then there we go. So that gives us all the content we need. Let's go ahead and save that. And we're not gonna see anything fancy just yet. We might just see a little bit more of what bootstrap can do for us, so we have our three columns here with our wells. We have some extra paragraph and texts. And then we can see our tabs and we can click on each of these tabs as you can see to see different sections, and as you can tell it looks like we left out a container for those tabs, so let's jump back into our code here. And here we have a container for three columns. And here is our closing container element. And then our image is gonna take up the full width, so that needs to be outside of the container. And then here we have our other container. And so this container has our paragraphs in it and then we have the Nav tabs below that. So, what I wanna do is I want all of this to be inside this row. So I'm gonna grab these nav tabs and the tab panes. We're gonna grab all of that content here to the closing div tag and we're gonna cut that and we're gonna place it inside this div. So we'll hit Enter a couple of times, paste all of that content, and then we'll probably need to re-indent it to make it look right. So here's where it should be indented. So we'll grab from here again all the way down to this closing div here. Don't grab too many divs because we need these where they are. And then we'll tab that over. And that looks good. So hopefully now that's inside the container. When we refresh, it will look better. And there we go. That looks much better. But you get the basic idea. We now have our content laid out. And as you can see, we have some nice Javascript working for us for these tabs. That we didn't have to code our self. We just had to throw in the right attributes and classes and bootstrap took care of the rest of the work for us. So that's our basic layout for our site. We're eventually gonna have some images in between some of these sections, and then we'll see as we scroll if we use the right attributes that the parallax.js framework calls for, then those background images will scroll at a different rate than the rest of the content. And it's gonna look really nice. So we'll get started with that in the next lesson. Thank you for watching.

Back to the top