Building a Resume Website - Page Grid System

Quick reference

• 00:05 Okay, so we've got our panels, now we need to talk about the grid system.
• 00:09 And in this video, were gonna layout our grid system.
• 00:11 So, if we come back up to Bootstrap CSS, and scroll down to the grid system
• 00:16 section, we need to make a decision of how we want this to be laid out.
• 00:21 So, we've got two columns, and remember it needs to add up to be 12.
• 00:26 And we can do anyway we like, but I'm looking at this right here, and
• 00:30 it looks pretty good, 8 and 4.
• 00:32 I think that might just do the trick, so, if we come down here, and
• 00:36 just pick this guy and this guy.
• 00:40 I think, we can just come back here and, so
• 00:44 this stuff is all gonna go in the panel content section.
• 00:48 In fact, I'm just gonna space these out a little bit, so
• 00:52 that we could know, which one is which.
• 00:55 And in fact, this would be a great spot for
• 00:59 a comment, so a top resume' info.
• 01:05 I don't know, whatever you wanna call that, and
• 01:07 then down here, we might put comment.
• 01:12 Programming Skill Section --, close that,
• 01:18 and then here we might put Education.
• 01:24 Just a nice way to keep things separated.
• 01:26 So anyway, back to the grid system.
• 01:28 Come up to our resume' section, and
• 01:31 let's just replace this with that code from Bootstrap.
• 01:36 And actually I'm gonna, there we go.
• 01:38 Okay, so here I'm gonna put Jobs, and here I'm gonna put Date.
• 01:46 Now let's Save this, and comeback here and it reload.
• 01:48 Okay, so we see Jobs and Date, but one thing is kinda weird.
• 01:53 This isn't going all the way over to the side, and we really want it to.
• 01:57 So how do we change that?
• 01:58 Well, we go to this <div class=""> and
• 02:00 next to it we can put align= and let's see.
• 02:05 We want it on the right side, so we can align it to the right.
• 02:09 Boom, now it pops over there.
• 02:10 So, I think that's looking pretty good.
• 02:12 Now what about this other part?
• 02:14 Well, down here we have, I've got one, two, three, four columns.
• 02:18 So it looks like 3, 3, 3, and 3 will do the trick.
• 02:23 And you notice that 3 isn't one of the ones listed,
• 02:26 but it's a number and we can use it.
• 02:27 So if you only have two columns worth of stuff, you only have two columns.
• 02:33 This may very well be your very first class, and all you know is HTML, so
• 02:37 we don't really need four different columns.
• 02:39 So, whatever you've got, go ahead and sort of sketch that out.
• 02:42 I'm going to copy this stuff, here, and
• 02:47 just swing down to this section.
• 02:50 And I'm gonna change the 8 to 3.
• 02:53 And I'm gonna call this stuff, do a div.
• 02:58 So that's one, two, three, four, and if I save this and hit Reload, boom.
• 03:04 One, two, three, four, looking good.
• 03:06 And finally, down here what do we got?
• 03:08 We got the education section.
• 03:10 So that's this guy, and this guy.
• 03:12 This looks like one or two, and this looks like three or four.
• 03:15 Doesn't really matter which one of those you choose.
• 03:18 So I'm just gonna come up here, and let's say,
• 03:22 stuff stuff, let's call this guy 2, and this 4.
• 03:27 Save it, yeah that's probably okay, we can tweak this later.
• 03:31 But anyway, we've got now the,
• 03:33 sort of a skeleton of what we wanna do from here on out.
• 03:36 In the next video, we'll work on adding content to this website.
• 03:40 So that's all for this video.

Lesson notes are only available for subscribers.