Building a Resume Website - Making it Responsive

Quick reference

• 00:05 Okay, so we're almost done here.
• 00:06 I went ahead and filled out all of my information,
• 00:09 here's what it looks like.
• 00:10 And you notice this thing here is centered.
• 00:12 And to do that I just came down here, and
• 00:15 wrapped that copyright tag in a p tag and I gave it an align="center".
• 00:19 And another thing that I did is I made the website mobile responsive.
• 00:24 So if you resize this, you can see as it gets smaller,
• 00:27 we have this hamburger thing.
• 00:30 If we click it the link appears, and
• 00:32 everything is resized nicely, looking good, and so I'm pretty happy with that.
• 00:36 So how did I do that?
• 00:37 Well, first, I went to get Bootstrap and I went to the CSS section.
• 00:42 And they have this mobile first thing you can read, and
• 00:45 basically you just have to copy this viewport meta tag.
• 00:49 So if you copy this and head over,
• 00:50 and just paste it in anywhere inside the head tag.
• 00:53 And you know, I just put it right there.
• 00:55 And another thing I did is, I removed all the Bootstrap references that we had.
• 00:59 Remember when we started out, we use these references to use Bootstrap.
• 01:04 If you wanna make your site responsive, it needs JavaScript, and
• 01:07 the JavaScript works a little clunky if you just use these.
• 01:09 So, I want to hit downloaded that like we did earlier, and
• 01:12 install those things into our directory, like we did in the past.
• 01:15 And I just changed the references to the regular Bootstrap reference.
• 01:19 And down at the bottom of the screen, add it in the JavaScript reference, as well.
• 01:23 We did all this earlier in an earlier video, so we can go back and
• 01:25 watch it again if you need to know how to do that.
• 01:28 But pretty simple, pretty straight forward.
• 01:29 So we're almost done, we just need to pop out this personal statement, webpage.
• 01:33 So, that's what we're gonna do for the rest of this video.
• 01:36 The first thing I noticed was the nav bar has this fluid thing.
• 01:39 So I wanna remove that.
• 01:41 Okay, so that pops that over.
• 01:42 And let's wrap this guy in a p align="center".
• 01:49 Save that, back, okay.
• 01:51 And next, I think we should put a new panel in there.
• 01:55 So pretty easy, I'm just gonna go back to our resume' page and click this area.
• 02:00 Just like the container, and also some of these panels here.
• 02:05 And let's see, I'm just gonna paste that in there, and
• 02:07 remember we have to close that div, that container div.
• 02:13 Like we did before.
• 02:14 So, Save this, hit Reload.
• 02:16 Okay, so we got a bunch of stuff here,
• 02:17 I don't need all of this, let's go in here and delete that.
• 02:20 Basically, we want the panel itself.
• 02:22 So, instead of that title, let's put personal statement.
• 02:27 And let's see, what else do we have?
• 02:29 Let's get rid of this stuff, but let's leave this
• 02:34 call MD guy right there, and then let's get rid of the rest of this.
• 02:38 So if we save this, reload now, this guy's inside.
• 02:43 Let's see, we need to close our panel div, so we'll do that one more.
• 02:53 Okay, and you could see this one closes this one, and this one closes this one.
• 02:58 So, all we need to do now is just put in our personal statement.
• 03:02 And I'm gonna just generate some Lorem ipsum text.
• 03:04 And let's see, let's go five paragraphs.
• 03:06 Looks like a pretty good personal statement to me.
• 03:10 And let's see, let's put it inside this col-md guy.
• 03:13 Now the only, we will bop this over to make it look all nice and tidy.
• 03:19 So we need to put P tags around all of these things.
• 03:23 So it's not just one big mass of text.
• 03:31 And then, finally let's just Copy,
• 03:37 Paste, Paste, Paste, and Save.
• 03:44 Okay, so that's looking pretty good.
• 03:46 Now actually, let's align="justify", and
• 03:49 I'll just do one of them, so you can see the difference.
• 03:55 Now I think that looks much better.
• 03:57 So we can quickly paste all of that in there.
• 04:06 A personal statement for a resume' is just your mission statement, or whatever.
• 04:10 So we can go ahead and we can change this to col md 10 if we want.
• 04:18 To make it longer, we can come up here and add a line break,
• 04:22 kind of push it down a little bit.
• 04:25 If you think that looks better you can make it really small, go six.
• 04:32 Whatever you feel like looks the best to you.
• 04:34 Just go ahead and play around with it, kinda the fun part.
• 04:38 You could put an image of yourself here, that'd be kinda cool.
• 04:40 Anyway, I think that's all, I think we're done.
• 04:43 Now one last thing I wanna do, I wanna change our resume.html,
• 04:50 let's rename that to index.html.
• 04:54 Now if we hit Reload, now this guy right here, this link becomes active, and
• 04:58 it goes straight to our resume' page.
• 05:00 So we can click back and forth.
• 05:01 I think that's pretty cool, pretty easy and pretty fun.
• 05:04 So in the next video,
• 05:05 I'm gonna talk about how to professionally host your resume' website.

Lesson notes are only available for subscribers.