Let's Build A Basic Website! Intro To Bootstrap

Quick reference

• 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.