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