Locked lesson.
About this lesson
In this lesson, we're going to download and start to install the theme that we're going to use to build out our resume website.
Exercise files
Download this lesson’s exercise file.
Download and Install A Bootstrap Theme.docx57.6 KB
Quick reference
Download and Install A Bootstrap Theme
The great thing about Bootstrap is that we can use themes with it to make our website look however we want, very easily.
When to use
Themes allow you to create websites very quickly by using a design that's already finished. You just need to tweak it to customize it to suit your needs.
Instructions
You can use any theme from any website (paid or free). We'll be using a resume theme from:
https://startbootstrap.com/themes/resume/
Hints & tips
- https://startbootstrap.com/themes/
- https://startbootstrap.com/themes/resume/
- 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.