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