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