Locked lesson.

Upgrade

About this lesson

Tweaking our template to make it look and feel however we like.

Exercise files

Download this lesson’s related exercise files.

Modify The Free Template.docx
59.3 KB Modify The Free Template - Solution.docx
62.5 KB

Quick reference

Modify the Free Template

Let's modify the index.html page of our HTML template.

When to use

Any time you use an HTML template, you're going to want to modify it slightly to suit your specific needs.

Instructions

We can modify the index page any way we want.  I recommend removing all the extra stuff in the middle of the page, but suit yourself!

After you've removed everything you want, add in your resume content. 

Hints & tips

  • You'll nearly always modify HTML template files.
  • Remove the sections that you don't want.
  • Once it looks the way you want, add in your resume content.
Login to download
  • 00:05 In this video, we're gonna modify our free HTML template, and
  • 00:08 get it looking the way we want.
  • 00:10 The first thing I'm gonna do is add an imagine,
  • 00:12 that's gonna be that background image.
  • 00:13 And I'm just gonna use the same hiking picture that we used in the last,
  • 00:17 earlier in the course.
  • 00:18 And so I'm gonna drag it to the img folder, and there it is hike.png now.
  • 00:23 The README file, in fact I'm going to delete the README file.
  • 00:27 I usually right click and Delete these things.
  • 00:30 You don't have to, you can leave it in there probably.
  • 00:32 But it told us to either rename or picture background.jpg, or we can just
  • 00:37 open the style sheet, and scroll down till we see this imgbackground.
  • 00:42 And just changed this from background.jpg to what do we call it,
  • 00:47 hike.png.
  • 00:50 So if we save this and
  • 00:52 run this thing, actually we need the index file open then we run it.
  • 00:57 Okay so, let's see, we open this.
  • 01:00 Okay, well, if this was my real resume, I'd probably pick a better smiling
  • 01:05 picture of just my face, but this is good enough, kinda fun.
  • 01:08 So now let's, actually before we change this,
  • 01:11 I really don't like all this stuff in these images, so let's remove that.
  • 01:16 I wanna keep from here down, so let's search for BS.
  • 01:20 If we open up our index page, we can scroll down here until we see it, or
  • 01:23 we could just hit Ctrl+F, and type in B.S and
  • 01:27 you can see it highlights it automatically for us.
  • 01:30 So that's kind of cool.
  • 01:31 So I know everything above this and you see this, here's a comment.
  • 01:35 Everything above this, I wanna get rid of up until, let's see,
  • 01:42 I think this Introduction, Welcome!
  • 01:47 Let's see, that is, yes, Welcome!
  • 01:51 So let's just highlight all that and delete it, click save.
  • 01:55 Come back here and hit reload, and okay, all that stuff is gone, awesome.
  • 01:59 So now we wanna modify this, and put our own stuff.
  • 02:03 So, now it's just a matter of hunting through here and looking.
  • 02:05 So here it says your name, John Elder.
  • 02:09 Obviously, you're gonna wanna put your own name.
  • 02:11 And, we're just copy some of this stuff.
  • 02:17 Save that, hit reload.
  • 02:19 Okay looking good.
  • 02:21 So here we have, this is education,
  • 02:25 so let's change that real quick, and
  • 02:30 I think mine was a B.A. in Economics With Honors
  • 02:37 from Washington University in St. Louis.
  • 02:43 I know weird name, right?
  • 02:45 Okay, so that looks pretty good, but kinda funky here.
  • 02:47 So let's modify this a little bit.
  • 02:48 And that's what you wanna do,
  • 02:49 you wanna tweak this to make it look the way you want.
  • 02:51 So, I think this should go all on one line, so I'm going to remove that from,
  • 02:56 and I'm gonna add our good friend the line break.
  • 03:01 Hit reload and yeah, looks pretty good.
  • 03:05 Now just come through here, and change all of this stuff.
  • 03:09 I'm not gonna make you sit through this, I'm just gonna do one of them.
  • 03:13 And that was 2014, 2016.
  • 03:19 Cool, and responsibilities built an Awesome website.
  • 03:30 Created a bunch of online learning courses,
  • 03:37 teaching people to code.
  • 03:41 And let's see,
  • 03:45 Signed up 10,000 Students.
  • 03:51 Boom, done.
  • 03:53 So play around with this, put in your own stuff.
  • 03:55 I would probably be a little more specific in here.
  • 03:57 In fact, that probably just go through here and
  • 04:00 recreate some of these resume points.
  • 04:02 And this thing, you notice it does bullet points instead of block text.
  • 04:07 But go ahead, and go through there, and tweak it yourself.
  • 04:09 Up here for the title, I'm gonna change this to John Elder Resume.
  • 04:16 And you notice this RR and that's what's called the favicon, and
  • 04:19 that's listed right here.
  • 04:20 We can get rid of that if we like, or you can keep it, whatever you want.
  • 04:24 So now here up at the top it says, John Elder Resume,
  • 04:26 the fabvicon is still there, it needs a hard reset before it disappears.
  • 04:29 But yeah, just that easy,
  • 04:31 we've got a really cool professional looking resume template in minutes.
  • 04:36 So in the next video,
  • 04:37 we'll push our code to get and GitHub, or review how to do both of those things, and
  • 04:41 wrap up the rest of the course, and that's all for this video.

Lesson notes are only available for subscribers.

Gift this course