Locked lesson.
About this lesson
Web frameworks can make website creation easier. So in this lesson, we'll introduce Bootstrap and why it can be a nice option for you to use to create your own Django projects.
Exercise files
Download this lesson’s exercise file.
Let's Build A Basic Website! Intro To Bootstrap.docx57.6 KB
Quick reference
Let's Build A Basic Website! Intro To Bootstrap
CSS is what makes websites look good, and we're going to use the Bootstrap CSS Framework in this course.
When to use
Use a CSS framework whenever you're building a website and want to speed things up by not having to write all the CSS yourself.
Instructions
We're going to use the Bootstrap CSS Framework. Spend a few minutes familiarizing yourself with the Bootstrap website at:
https://getbootstrap.com
Hints & tips
- https://getbootstrap.com
- 00:04 Okay, up until now, we've just been building
- 00:07 these very basic web pages using no real interesting CSS or HTML.
- 00:12 Just learning how to create web pages.
- 00:13 Now we want to switch focus and start to build actual interesting web pages.
- 00:18 And there's just millions of different ways you can do this.
- 00:21 If you're familiar with HTML and CSS, you could just write the code yourself but
- 00:26 hardly anyone ever does that.
- 00:28 You're always going to use a template or a web framework of some sort,
- 00:32 in order to build, interesting looking websites.
- 00:35 So in this video, I'm going to start to talk about the one that I recommend.
- 00:39 You can use anyone you want, but I really like something called Bootstrap.
- 00:43 It was created by some guys at Twitter, it became really popular and
- 00:46 they spun it out at Twitter.
- 00:47 Now it's one of the most popular HTML and CSS web frameworks.
- 00:51 It's completely free.
- 00:52 It's really easy to use.
- 00:54 And there's all kinds of other themes and templates that you can use on top of it,
- 00:59 to do all kinds of cool things.
- 01:01 So in this video, I want to spend just a couple of minutes sort of talking about
- 01:04 bootstrap and taking a look at it.
- 01:05 So head over to getbootstrap.com and this is the website and
- 01:09 right now we're on version 4.4.
- 01:11 If that version changes by the time you watch this video,
- 01:14 no big deal, just download the latest one or you can toggle through here and
- 01:18 find older versions to use as well.
- 01:20 So before we get into how to use this,
- 01:22 I want to spend just a minute kind of looking at it.
- 01:24 So click on this documentation link and
- 01:27 this shows you a lot of the stuff that you can do with Bootstrap.
- 01:31 And we come down here to components, for instance.
- 01:35 And here's just a list of different things you can use in Bootstrap.
- 01:38 So for instance, let's just look through here.
- 01:42 Cards, here's a card, right?
- 01:45 If you want to put like an image in this box and then have this text and
- 01:49 this button, all you would do once you installed Bootstrap is copy this text
- 01:53 onto your website and then just modify it however you want it.
- 01:57 So if you wanted to add a different image than this blank, one here,
- 02:01 you would just come up here to the img, src and put in.
- 02:04 The Django code we just learned a couple of videos ago to point to your
- 02:08 specific image.
- 02:09 And it's just that easy.
- 02:10 If you want a button on your page, you can click on buttons here, and
- 02:13 here's a bunch of buttons that come with with Bootstrap.
- 02:16 You can scroll down and see different types of buttons,
- 02:19 different colors, big buttons, little buttons.
- 02:22 And to use these things again, all you do is just copy this code.
- 02:26 So if you wanted this green one, for instance,
- 02:29 the success come down here to the success button.
- 02:32 You would just copy this, paste it on your page.
- 02:35 Modify it a little bit,
- 02:36 if you wanted it to point somewhere when somebody clicked on it.
- 02:39 That's it, so that's the beauty of Bootstrap.
- 02:42 It's very copy and paste.
- 02:44 You don't have to really know HTML.
- 02:46 You don't have to really know CSS at all, in order to use it.
- 02:50 If you know HTML or CSS, it's better because you can modify things and
- 02:55 really get in and customize it.
- 02:57 But you don't necessarily have to.
- 02:59 If you wanted a form for your website, here's a bunch of forms.
- 03:02 You could just copy this code.
- 03:04 If you wanted a Jumbotron there's big box, right?
- 03:07 You just copy those code.
- 03:08 It's a very cool and really easy to use.
- 03:11 Nav bars for instance.
- 03:14 These are at the top of the screen, so like this purple bar right here.
- 03:17 You can have this one.
- 03:20 It has a search function in it just by copying this code.
- 03:24 And you can copy the code just by clicking the button or by highlighting it and
- 03:28 right clicking copy, however you like.
- 03:30 But very, very cool and really easy to use.
- 03:33 So that's Bootstrap.
- 03:35 Spend a few minutes just kind of looking through here.
- 03:38 Click on the different things.
- 03:39 When you're done with components, go to content,
- 03:42 maybe and look at some of the things.
- 03:44 You can have tables.
- 03:46 You can have tables where you can hover the mouse over with JavaScript.
- 03:51 Let me see if I can find one real quick.
- 03:53 Hoverable rows, see how that does that.
- 03:55 That's very cool.
- 03:56 Just all kinds of stuff.
- 03:57 And just spend a few minutes kind of looking through here.
- 04:01 Content and components are the main things you're going to look at, but
- 04:04 it's very cool.
- 04:05 So in the next video, I'll show you sort of a quick and dirty, fast, and
- 04:08 easy way to start using bootstrap without even having to install it.
- 04:11 And that'll be in the next video.
Lesson notes are only available for subscribers.