Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Survey of Bootstrap Themes
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
So it's time to go explore this concept of themes, and see what we can use to start building our website.
0:08
I showed you a pretty compelling example I think in that last video showing how we started at the basic page
0:14
and then moving to a somewhat styled plain text page, to a themed page and now I am going to show you how to go find those themes.
0:22
Now, in no way is this an exhaustive search of all the places you can go find these, there are many of these Bootstrap theme websites,
0:29
one place you can start, a place where I have started on some of my projects before, was Start Bootstrap.
0:35
At startbootstrap.com you can see that there is a bunch of Bootstrap themes here,
0:39
if we scroll along, these are really nice because they are both free and open source. Remember that beautiful website I showed you?
0:46
Well, besides the content of the HTML, that's the theme right there and if I open this up,
0:52
you'll see this is actually right there on gihub you can fork it and below if you scroll down,
0:58
you can see there is 70 comments about people trying to implement this theme and so on.
1:02
You also can get a nice live preview, download it or view the source on GitHub. So, if we click the live preview, there is the page,
1:09
and we can scroll down and look through it, see it's got these nice little animations, things pop in as you go along.
1:14
I would be absolutely comfortable having this site represent my business.
1:19
So this one is called Creative, you can see the URL up there, let's look at a few more.
1:24
So here is another one I pulled out of that site, Start Bootstrap, so you can scroll along and it has this nice big skyline, things are wide-open,
1:31
so this is really good, what you'll see that's often common in these Bootstrap themes and a lot of modern websites, because it's really easy
1:37
to conditionally show on high end things, it's easy to add new things, take away concepts from your page;
1:45
what's common in these sites is these sort of vertical slices so you can see here is a vertical slice of our services,
1:51
here is a vertical slice of some picture, and whatever, vertical slice of our work. Those correspond very well to div.containers containing div.rows
2:01
and then you can do whatever stuff like grids and whatnot you want in there.
2:05
So here you can see all this stuff, very nice theme, and if you want to use this one,
2:09
you can actually see it's right here on GitHub you can go grab it. Maybe you are not into some kind of startup with the splashy front-end screen,
2:14
maybe you need like a dashboard type of thing, so look, they have these really cool dashboard ones as well,
2:19
we can go over here and look at some charts, scroll down, you can see there is these nice charts here,
2:24
they are very interactive, and if you want to have a chart like this,
2:27
and you want to have these various sort of live tables, these live dashboards and so on,
2:32
not every bit of is interactive but you can see all these pieces here, these are all really cool, right, see how this is all interactive,
2:38
you could totally add this, you can base your site on this, no problem. Now if you are actually going to build a site this complicated,
2:45
I have a better recommendation for you in just a minute, but hang in there, this is again open source and free, very cool.
2:50
Final one on this Start Bootstrap category is very simple, maybe you don't want to take that much of the theme but check this out,
2:56
here is a nice little navigation starters, you've got these things on the left and you can just show and hide it like this,
3:01
so if you want some kind of navigation like this, you want to start really simple, you could grab this theme.
3:06
So those are the free open source options, and that's great. Sometimes though, you might want to start with a super high quality design,
3:16
maybe you are willing to pay like 50 bucks, think about that,
3:20
if the thing that is going to represent your business to all the people who come and visit it, that's worth 50 bucks, I am telling you, at least,
3:28
so I'll show you a place where you can pay a little bit of money for really nice designs.
3:32
So over here at wrapbootstrap.com, this is place that doesn't have free themes, they are pretty darn cheap, but they are not free,
3:41
so if you look over here you can see we have paid one of 30 I don't know how many items are on the page,
3:46
it looks like maybe 20 or something along that line, if you look at the scroll bar, many, and now check out these themes,
3:53
remember, I told you if you are going to build the dashboard-looking thing,
3:57
this one is s lot better and you would have to pay 12 dollars to get it, can you believe it? Or, actually maybe this one, these are both really nice.
4:03
You can see that for just a little bit of money you can get some pretty cool designs, let me show you a fee that I pulled out here.
4:11
So here is that dashboard, and it has some nice, live interaction things when it first loads, you can see the little gauges are moving there,
4:17
you can toggle these switches, it's got all these little tabs, really nice stuff. And, this is only a part of it, so like here is a nice social wall,
4:25
if we open this up, you can go and see how your apps are getting laid out, it has this little inbox-looking thing if you want to... like
4:32
add some kind of messaging component, you've got graphs, let's go up a little, you've got all these nice interactive graphs down here,
4:40
all kinds of great stuff, so if you are building some kind of interactive dashboard-type thing,
4:46
this is pretty cool, even these little things are nice and interactive,
4:50
even have wizards that will walk you through the step one, step two, step three, and so on. OK, so moving on from the admin world, let's go over here.
4:58
Now Reen, this is another one that has a really nice, fresh design, you can see they've got this cool user interface here this is basically a place
5:06
where they are trying to sell you a bunch of designs, so 14 000 designs available but a really nice place where you can come, find some designs there.
5:14
Again, another place, you can see the demo of this theme, they've got all these variations here, so maybe we want to look at this one.
5:22
So this is nice, light and fluffy and if you are doing like analytics or something like that this might be a good one.
5:30
It has these cool sort of section-wide background images, pop up stuff and so on. So maybe this makes sense for what you are doing,
5:39
and here is another nice template, Epone, you can go check out all the different samples, here is a nice "about your team" page and so on,
5:48
So, I am not necessarily recommending any one of these particular ones, I just want to point out that there are all these sources, all these places,
5:56
you can go and find just the right theme for your website. So if we go look again at let's say... Talk Python Training
6:05
you'll see that actually this theme that we have going on here and which is also similar to the theme that we have on Talk Python To Me, the podcast,
6:15
this theme that we have going on here, this is actually from the first place, the theme that I use I believe was called Landing Page,
6:26
so if I just search for landing page, here we go, it took me a second to find it, this one Landing Page, this is the one I actually based my site on
6:34
if I do a live preview, you'll see this is where that big... let me pull up Talk Python next to it,
6:43
so here you can see this big landing page with these call to action buttons, that should look kind of familiar, and these sections
6:51
where you've got the text and then picture on the right, picture on the left text on the right,
6:55
alternating slices of the dark/light, dark/light, that should look,
7:03
once we get past the first few parts, that should look kind of familiar here, and so on,
7:08
down at the bottom, we've got this little footer, and "connect with us",
7:11
and down at the bottom, we have a footer with, it doesn't quite say "connect with us",
7:16
but similarly, I updated it, obviously I didn't leave it to be exactly the same I didn't want to just copy their site, I wanted to make my own
7:23
but I knew this is really quite close to what I was looking to build, so why not use it?