Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Bootstrap theme tour

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's have a look at some of the themes that I found
0:03 on the internet for Bootstrap.
0:04 So there's two sites I want to highlight for you:
0:06 Start Bootstrap and Wrap Bootstrap.
0:09 So, Start Bootstrap mostly has free themes
0:12 although I believe they also have some paid ones
0:14 whereas Wrap Bootstrap mostly has paid themes.
0:17 So, let's go through a couple that I've found here.
0:19 This one, from Start Bootstrap, is pretty awesome.
0:22 It's very similar to that one I showed you on the screenshot
0:24 just a minute ago. Look how nice this is.
0:27 You know, as you scroll down notice the nav bar goes solid
0:30 but at the top it's transparent.
0:32 Oh my gosh, this is smooth, smooth, smooth.
0:35 So you go through here, you can see we've got what you need.
0:38 These buttons are restyled.
0:39 I like this rounded edges here.
0:42 Really simple call to action, why you care about us.
0:45 And then these little sections that tell you more about it.
0:48 That's really great. Some more download.
0:50 Click that takes you to Get Up.
0:51 You get all the source code and whatnot.
0:54 That is a super, super good-looking theme.
0:56 I really like this one.
0:57 So much that I actually built something with it.
1:00 Check this out.
1:01 So, here's a site that I made at freemangadvcourse.com
1:05 and you guessed it: it's for my free manga DV course.
1:08 But I took that theme and applied it here and adapted it.
1:10 So, I would say it took me about a day
1:13 to come up with all the images.
1:14 The hardest part is to figure out what you want to say
1:16 on here and so on
1:17 but notice it's distinctly mine
1:19 but also you should see a lot of similarities.
1:21 Like this button right here, obviously, right?
1:23 Very cool.
1:25 So here it comes in, tells you why you care about it, right
1:28 the simplicity of scaling and so on.
1:30 You can take the course, a little call to action.
1:32 A little video, all right, the intro video there.
1:35 We again have those cool highlights
1:38 but these highlights sections from the course, right?
1:41 Things that are covered there.
1:43 Come on here and get the source code
1:44 some stuff about students
1:46 all that stuff about what's covered.
1:47 All the stuff, the student stuff here, the stuff right here
1:50 this is actually data-driven off of some APIs we have
1:52 so it's pretty cool, pretty nice
1:55 but we took this theme and we wrapped it up.
1:58 I don't think, if you look at this site
1:59 like, oh, this is someone else's site or some common theme.
2:01 It looks pretty unique.
2:03 But you go back to what we started with, right?
2:05 You can see pretty easily where it came from
2:08 and that's no problem; I don't mind.
2:09 I don't have to be a snowflake.
2:11 I just want to have a really pretty site that people love
2:13 when they get to it.
2:14 There's an example of actually using one of these.
2:17 Here's another stylish one I like.
2:19 Has a lot of bold pictures and whatnot.
2:20 So you come in here, you can see what it has to offer.
2:22 These big, bold pictures, like with that scissors
2:25 and whatnot here, the projects that they work on
2:28 nice little animations when you go to them.
2:30 Cool little map. Speaking of bold photos.
2:33 One thing you can do
2:34 to make your site look really, really good
2:35 is have proper graphics, nice, rich graphics.
2:39 Like, you saw that on this theme
2:40 all over the place at the bottom and at the top
2:43 and a lot of people pay for stock photography
2:45 but you should go to unsplash.com, down here.
2:48 If you want something of like the sunrise
2:51 something to do with the sunrise
2:52 they've got all these cool pictures
2:54 and every single one of these is royalty-free
2:56 attribution-free. Wonderful.
2:58 So check out unsplash as you're going.
3:00 All right, let's switch gears a little bit.
3:02 Maybe not a cool marketing site but maybe a dashboard
3:05 like an analytics reporting type thing.
3:07 So here's a cool little one.
3:08 You've got like this nice little live chart.
3:10 Check out those animations.
3:12 That's so cool. And we can go down here
3:14 and we can have these little cards and stuff.
3:17 Here's like a nice login template.
3:19 Not incredible, but it's fine.
3:21 Here's some charts.
3:23 Here's some tables, and so on.
3:24 So I really like this one.
3:26 And you just grab this and start using it.
3:28 Pretty cool, huh?
3:29 Here's another simple one.
3:31 It looks like, at least here
3:32 it looks like there's nothing here, what is this?
3:34 Or really hardly a theme at all.
3:36 There's this cool little sidebar that comes in and out
3:38 so if that works for you, go for it.
3:40 So that was all Start Bootstrap, very, very cool.
3:43 Here's the Wrap Bootstrap ones that I chose, also great.
3:47 So let's scroll down here.
3:48 I told you these were paid, right?
3:49 You got to pay for them.
3:51 A lot of people are against paying for designs
3:53 and graphics and whatnot
3:54 but I want to just show you how awesome some of these are
3:57 and how cheap they are. So, for example
4:00 let's suppose you want an e-commerce template here.
4:03 If you could pay $24
4:05 and go from zero to nearly designed website
4:08 that is a seriously good deal; take it.
4:11 So as you can see, $15, $10, $30, right?
4:14 No problem.
4:15 These are not, like, expensive, but they do cost money.
4:17 All right, so check this one out.
4:19 Look at this admin page.
4:21 Like, that admin page I showed you before was cool
4:24 but this one, wow. And if you refresh it
4:26 it has these cool animations down here and stuff.
4:28 So you've got this great dashboard
4:30 little tabs you can switch through.
4:33 Let's see, it has like an email-looking thing in it.
4:36 Yeah, email, right in there. That's pretty awesome.
4:39 I mean, not real email, but design, right?
4:41 You got these cool different charts that you can throw on.
4:44 Really, really nice. That one's a great one.
4:47 Let's see, go to projects.
4:49 You got a gallery.
4:50 If you want to build a site that has this kind of stuff in it
4:53 all right?
4:54 This, I don't remember what this was.
4:56 I think it was like $35 or something.
4:58 This is totally worth starting from
5:00 instead of starting from scratch.
5:01 I really, really like that one.
5:03 Two more real quick ones.
5:04 Here's another one for designers that has these cool, like
5:07 fade-ins as you go
5:09 so as you scroll down they all fade in.
5:11 It doesn't quite work so well with my resolution, I guess
5:13 but maybe adjust it a little bit.
5:14 But those are really cool
5:16 and then over here another one that does a similar thing.
5:19 You can see clearly the grid layout happening here.
5:22 Little animations, the stuff fades in as we scroll to it.
5:26 Pretty nice, right? So, maybe some of these resonate with you, maybe they don't
5:29 but there are a ton to pick from.
5:31 Go look at the popular ones
5:32 and see what one works well for you.
5:35 So here's just one of the benefits of using Bootstrap.
5:37 You can grab one of these pre-built themes
5:40 and you are so much farther down the road on web design
5:43 than if you started from scratch.