Building a Resume Website - Intro

Quick reference

• 00:05 Okay time to have some fun.
• 00:06 Now, I thought you're learning HTML,
• 00:08 there's a good chance you wanna become a web developer.
• 00:11 Potentially get a job, do something like that.
• 00:13 And so if that's the case, you're gonna want a resume.
• 00:15 So I thought as a little project in this course, we would build a very simple
• 00:18 resume website using Bootstrap and this is what we're gonna be building.
• 00:22 It'll have your name at the top, this nice little navbar, list your resume stuff.
• 00:25 If we scroll down,probably won't add this thing,
• 00:30 cuz you probably haven't written books.
• 00:32 But sort of some of the things, education and all of that, so
• 00:36 I used Bootstrap to make this.
• 00:39 This is all Bootstrap, it's very,
• 00:41 very easy to do and we're gonna do two projects.
• 00:43 One, this basic resume website.
• 00:45 A little bit later on we're gonna do a little bit fancier resume website but
• 00:49 I think this is a good way to teach just how easy it is to
• 00:52 use Bootstrap, I'm sure you have a pretty good idea already,
• 00:55 just watching the last few videos, but this should be fun.
• 00:57 So let's come back here and right click on basic html,
• 01:01 click New File, and let's just call this resume.html.
• 01:06 And I'm gonna come back to my page two, and
• 01:08 I'm just gonna grab this stuff from the top.
• 01:12 And let's open this and just paste it in and here put your name,
• 01:16 put John Elder and resume.
• 01:21 That's a good title I think.
• 01:22 And here we have just the references to Bootstrap and
• 01:25 I'm gonna open page two again.
• 01:27 And down here at the bottom I'm gonna copy this, just go ahead and close this file.
• 01:35 And add some line breaks for
• 01:40 good measure save this.
• 01:45 So let's head over and make sure this is looking okay.
• 01:48 Resume, resume okay, nothing there yet.
• 01:53 Okay, so we're ready to go, we've got a basic skeleton here that we can use.
• 01:56 And now let's take a look at this and what we've got here.
• 01:59 Let's kind of take a minute to break this into components in our minds here.
• 02:03 At the top here we've got this, this is a navbar, right?
• 02:07 And so if you head over to component section here and
• 02:10 scroll down a little bit, you see this navbar.
• 02:14 So here's the navbar text we're gonna be using.
• 02:16 Next we have this thing here and it kinda looks like a table,
• 02:20 but this is not a table.
• 02:21 This is actually called a panel.
• 02:23 And so if you scroll down here, down towards the bottom panels.
• 02:28 So this is the basic Panel with heading, this guy right here.
• 02:33 You can also use a panel with footing.
• 02:37 You can see I don't have footings there.
• 02:40 You could maybe put it on the bottom one, that might look good.
• 02:43 Maybe we'll do that but anyway, that the panel.
• 02:46 So, what else do we have?
• 02:48 Well, we've got, basically, two columns here.
• 02:52 This column and this column.
• 02:54 And I think it's a good way to keep things separated visually.
• 02:58 This is the dates for your resume items and this is the description itself.
• 03:03 So we're gonna be using the grid system, two panels.
• 03:06 We talked about the grid system earlier and that's at CSS.
• 03:13 So we'll need to decide what size columns to use.
• 03:18 And if you kinda just eyeball this, this is big and this is small, so
• 03:22 maybe this is eight and this is two or maybe this is ten and this is two.
• 03:27 Or maybe this is eight and this white space here is two, and then this is two,
• 03:32 maybe something like that.
• 03:33 I will play around with that and decide.
• 03:35 Oh,up on the top on the navbar we'll have a couple of links.
• 03:38 We'll deal with that and that's pretty much it.
• 03:40 So in the next video we're gonna dive right in and start building the navbar,
• 03:44 and I think you're gonna be surprised how quickly we can bang out this website.

Lesson notes are only available for subscribers.