Building a Resume Website - Adding Content

Quick reference

• 00:05 Okay, so we're moving right along now.
• 00:06 It's time to add in some of our content.
• 00:09 So just very quickly I'm going to, one at a time here,
• 00:13 copy this and head back to our resume section.
• 00:18 Now, right here, I'm gonna give this a strong,
• 00:23 paste that in there and, a line break.
• 00:26 And gonna copy this stuff, And
• 00:32 just bear with me here while I let's see grab a date and
• 00:36 we'll just do one or two of these to show.
• 00:39 Now, if we save this and hit reload, okay that's starting to come along but
• 00:43 it doesn't quite look the same.
• 00:45 You'll notice over here this is all like square.
• 00:49 Right? It all lines up, and this is emphasized.
• 00:53 So we can do that we can change that.
• 00:55 The easiest thing is to wrap the date in an em tag.
• 01:00 We looked at that tag earlier.
• 01:02 You know that does Italicize.
• 01:04 So we paste that and save.
• 01:05 Boom. Okay.
• 01:06 But now, how do we make this stuff flush?
• 01:09 Well, for that, I'm gonna wrap this in a <p> tag.
• 01:14 So save this.
• 01:15 Paste </p>.
• 01:16 Let's look at it.
• 01:17 And it bumped it all up a little bit but it's still not flush.
• 01:20 So how do we fix that?
• 01:21 Well, pretty easy.
• 01:23 We give this an align=justify.
• 01:28 And justify that's what it does, it pulls this text apart and
• 01:32 it makes it sort of all flush together like that.
• 01:34 So that was pretty simple.
• 01:36 And if we look at this, we see da da da,
• 01:40 actually let's go ahead and put this on its own thing.
• 01:49 Just to kinda look at this.
• 01:51 So here, we have each sort of individual thing.
• 01:54 And if we copy this, And
• 01:58 just paste it underneath there and save it, let's see what we got here.
• 02:04 Not bad but we're gonna want.
• 02:07 Let's give this a couple line breaks as well between each of these little sections.
• 02:14 Actually, line breaks need to go right at the,
• 02:19 oops at the end of the, P text.
• 02:24 So like right here.
• 02:27 Save that, boom bops it down.
• 02:30 Okay, good.
• 02:30 So, real quickly, I'm just gonna copy this and.
• 02:36 Come back and paste that.
• 02:38 This is the most boring part of the whole thing, I'm sure, but let's see.
• 02:45 And be sure to, at the end, put a couple of line breaks.
• 02:50 And then finally the date, 2013- 2014.
• 02:56 Boom, save this.
• 02:59 Okay, so that's coming right along.
• 03:02 I'm gonna go ahead and once this is done, field and the rest of these,
• 03:05 you don't have to stare at me doing this this whole time.
• 03:07 But I wanted to show you at least two to show you how to do the line breaks
• 03:10 at the end of this text right here and right here.
• 03:13 I think it's nice to have white space.
• 03:14 It kinda keeps things separated nicely.
• 03:17 Before we go, I wanna add this education section.
• 03:20 So I've got this image and I'm gonna pull it in,
• 03:23 like we've pulled in other things, I'm gonna add it to the images section.
• 03:28 And if we come down to our education section,
• 03:33 I'm just gonna pop in the code for our image,
• 03:37 use the img tag, src=images/washu.png, okay?
• 03:43 And then for stuff, just paste in my content.
• 03:50 And give this a line break, and a line break.
• 03:59 Two line breaks, okay.
• 04:03 And I wanna wrap these two in em tags.
• 04:11 Save this, reload, ooh that is huge so
• 04:16 let's come back to our image and give it a Height = 250.
• 04:24 Save this guy.
• 04:25 Hit reload.
• 04:25 Much better. So, I don't really like this spacing, so
• 04:29 let's change this from a two to a one.
• 04:33 Much better, so there we go.
• 04:35 Just that easy.
• 04:35 So go ahead and fill out the rest of this stuff with whatever you've got and
• 04:40 in the next video, we'll work on making this mobile responsive so
• 04:43 it looks good on cellphones and tablets and things like that.

Lesson notes are only available for subscribers.