Download and Install A Bootstrap Theme

Quick reference

• 00:04 Okay, in this video, we're going to download and start to install the theme
• 00:07 that we're going to actually be using to build out our resume website.
• 00:10 So Bootstrap is a great web framework, but there are themes
• 00:16 that you can use on top of it to get a lot more sort of custom.
• 00:21 And that's what we're going to look at.
• 00:22 So head over to Google and just type in bootstrap themes.
• 00:27 And I'm going to use this to start, bootstrap.com.
• 00:31 So I'm going to click on this, /themes and
• 00:34 just come up to Themes and click on Browse All Themes.
• 00:38 And I like this one right here, I think we're going to use it, so
• 00:41 let's click on it.
• 00:42 And we can go to a live preview, and let's remove this frame,
• 00:46 and this is the website we're going to build.
• 00:48 It's just a very basic resume website, right?
• 00:52 If you click on these things, it scrolls through them.
• 00:56 It's kind of cool, right?
• 00:59 And it's just a basic website, but it'll show us how to
• 01:02 install basically anything that we want and how to kind of customize it.
• 01:06 So that's what we're going to be doing for the next few videos.
• 01:08 So head back over here, and what we want to do is get the free download, and
• 01:13 there are paid themes you can buy.
• 01:15 There are free themes all over the Internet, you just kind of have to
• 01:18 search around and find what you like, and use whatever that is.
• 01:21 So I'm going to click this Free Download, and it's going to give us a zip file.
• 01:25 So I'm going to save this to my computer, and you can save this anywhere.
• 01:29 I'm just going to save it to my Desktop and
• 01:31 sort of take note of the name of it here, right?
• 01:34 So we could save this, and I'm on Firefox, so it downloads up here.
• 01:41 If you're on Chrome it's going to download down here.
• 01:45 But wherever it downloads, go ahead and click it and
• 01:47 I'm just going to click Open File.
• 01:48 When I do, this box pops up.
• 01:50 Now this is a zip file, so we need to unzip it.
• 01:52 We need to Extract All, so click this Extract All.
• 01:55 And when you do, this box will pop up.
• 01:58 And I like to make sure this is checked, Show extracted files when complete.
• 02:02 And we're going to extract this anywhere we want.
• 02:04 But I'm just going to extract it on my Desktop, so
• 02:07 it's easier to find in the future.
• 02:09 So extract goes through and does the thing, and then boom,
• 02:13 here is the final thing.
• 02:14 So here are our files in this directory, so we can double-click here.
• 02:19 And this is all the stuff that we need to now install into our Django app, right?
• 02:24 So you'll notice there's CSS files, there's image files.
• 02:28 You'll notice they're calling their image folder img.
• 02:30 We called ours images, no big deal.
• 02:34 There's a js folder, that stands for JavaScript.
• 02:37 We called ours JavaScript, but that's no big deal.
• 02:40 There's this scss folder, and there's this vendor folder and
• 02:44 this contains the actual bootstrap files.
• 02:47 So here's the CSS for that, and
• 02:51 the JavaScript for that, and that's cool.
• 02:56 So we need to install all of these things into our Django app.
• 03:02 And we can do that just by opening each one of these and
• 03:05 right-clicking, and copying.
• 03:07 And we just want to copy these into the corresponding folders of our Django app.
• 03:12 So we can come down to our resume, static resume CSS thing.
• 03:17 And right-click, and click Open Containing Folder.
• 03:20 And this will open the directory where all of these files are.
• 03:23 So then I can just right-click and
• 03:26 paste to paste in those two files, and let's pull up this thing.
• 03:31 So now, we can go back.
• 03:32 So I'm just going to sort of make this split screen.
• 03:35 So these are actual files that we have.
• 03:38 This is our resume static resume directory,
• 03:42 which is resume static resume, right here.
• 03:46 So I'm just going to kind of right-click and drag up.
• 03:53 We already did the CSS, but the rest of these,
• 03:57 we could just pull up here, and it will copy them over.
• 04:01 And then inside of here, we basically only need this index.html file.
• 04:07 And we want to put that in our resume directory here.
• 04:15 But we want to put this in our templates file.
• 04:17 Remember from several videos back?
• 04:19 That's where our HTML files go, right?
• 04:23 So, what I can do is right or just drag this over
• 04:28 to our templates directory and then it pops up here.
• 04:34 Now we can File > Save As to save it, but we don't really want to save it.
• 04:39 Instead I'm going to put it in our home directory, right?
• 04:43 And we'll start to modify it and mess with it, and
• 04:45 I think we'll do that in the next video.

Lesson notes are only available for subscribers.