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, 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?