7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 47 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Laying Out the Elements

Now that your grid rows and columns have been set up in CSS, in this lesson you will learn how to put everything into place within it.

2.3 Laying Out the Elements

Now that we have set up the dimensions for the first grid in section1, I want to move on to the items within section1 and to lay those out in the appropriate grid, rows and columns. So I'm going to jump back to our project files folder. And we ended in our last lesson with all of the files that are now in site01end. So in order to keep from overwriting those I'm gonna create a new copy of that and I'm gonna rename this site02end. And all the changes will be make in this lesson will be saved there. So I'm gonna open that file up or that folder up in brackets, and we'll move forward from there. So we're gonna go back to our index.html file, and we've created our section1 container. Now we need to actually create the items within that section. And we really only have three images and no text in that section. So if we go back to our Photoshop file, we have our buffalo, we have our logo, and then we have this 2018 text. And those are the only three things in section 1. So when I'm building this out in HTML, I like to start with whatever's in the background and then work my way up. That way everything will automatically be stacked appropriately and we won't have to mess with z indexes. And that's gonna become more important as we get into section 2 because we have this background image with the lady in it. On top of that, we have another background image with some clouds and cliffs. And then on top of that we have our text. So a good rule of thumb is to start with the background and then work your way up to the foreground, one element at a time. So we're gonna start with our background images, or the background image of the buffalo, I should say. And we're going to lay that out first in our HTML. And then since our logo in the 2018 text don't overlap each other, it doesn't really matter what order we put those in. So we'll put our logo first, and then the 2018 image. So let's jump into our index.html file in this new site02end folder and we're gonna jump inside section 1. And I'm gonna create an image element with an ID, and you can call this whatever you want to. I'm just gonna call it section1-bg, for background. And so the source of this element is going to be, we're gonna look in the images folder. And inside the images folder, I'm gonna look for bg-section01, which is the image of the buffalo, and then we'll close off that image. Then we're gonna have our logo which is gonna be another image. And I'm gonna use short hand for this. I'm gonna do img# and I'm gonna call this main-logo, and the location of that is going to be in the images folder. And if we look down a little bit here is logo.png, that's the one we want. For the alt tag here I am going to set it to Powderhorn, which is the name of the company, and there we go. And then we'll do our last image here, and this is going to be the 2018 text. So I'm just going to call this section1-2018 and that'll be the ID for that image. Again, we're looking inside the images folder and we're looking for 2018.png, and for the alt, we can just set that to 2018, as well. So now, we've got our three images laid out, but but our browser doesn't know where to put them yet. If we were to save this file, and then open it up. I'm gonna right click and it'll show in Explorer, and then double click it to open it up in Chrome, or whatever your default browser is. Let me drag this over. You'll see that it doesn't really know what to do with everything yet. It puts our buffalo image first and then over here just to the right of that we have our logo. And if we go further to the right we can see our 2018 text. So now we need to jump into our CSS, and tell our CSS where each of these items needs to be located in our grid system. So if we go back to our Photoshop file for example, we can tell it that we need our buffalo image to start in row one, column one, and we need it to span all of our rows and all of our columns for that first section. So, let's do the columns first, it's gonna start in column one and it's gonna span one, two, three, four, five total columns. So let's jump back in to our index.html file, actually we're gonna jump into our CSS now. We're gonna go to styles.css, and then, down here in our section1 section, we're going to point to, first of all, our section1-bg. So let's just copy that, and in our CSS, we'll hit pound and then paste that. So section1-bg, which is our buffalo image. Let's set up our columns first. So the way we do that is using the grid-column property. And we're gonna tell our browser where we want that grid to start, where we want that image, or this section to start. We want it to start in the first column. So we're gonna type a 1 there. But then, like I mentioned before, we want it to span all five columns of our grid. So then we're gonna type a forward slash. And then we're gonna say span 5, so that it spans all five columns. Then for our row, we're gonna use the grid hyphen row property. And again, we're starting in row one, and now we just need to count to see how many rows it's going to span. So we'll jump back into Photoshop and we see that's it's going to span one, two, three, four, five rows as well. So we're gonna do a span 5 there as well. So that's our section 1 background, next let's move on to our logo which we gave an ID of main logo and again, if we jump back into our Photoshop, we can see that our logo starts in column two, and it spans one, two. And let's go ahead and say three columns, just in cast it's a little bit bigger than we anticipate. We could say that it spans all four columns if we wanted to. That doesn't necessarily mean it's gonna stretch out to that full width. It just means that it will be placed within that particular area that you defined. So again, we're gonna say that it starts in column two and it spans three columns. So we're gonna do a grid column property here. We're gonna start in column 2 and forward slash, and then we're going to span three columns there. Then we'll do the same thing for our rows. It's gonna start in row two, as we can see here. Here's row one up here and here's row two, and it's only gonna span one row. So we can say span 1 and save that. So then we'll do our third item, which we gave an ID of section1-2018. So we're going to do the same grid column, grid row set up. So I'm just going to kind of copy that and I'll just change the numbers. So section 2018 if we go to our Photoshop file, it's going to start in column one, two, three, and it's going to span two columns. So we'll do that here. It's gonna start in column three, it's gonna span two columns, and for our rows, it's gonna start in row one, two, three, four, and it's just gonna span one. So we'll do row 4, span 1. So we'll save that, and now when we jump back into Chrome, we can refresh that, and now we see that everything is in place. So now that we've got section one laid out like we want it, we can save our work and move on to the next lesson.

Back to the top