Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: From theme to Blue/Yellow

Login or purchase this course to watch this video and the rest of the course contents.
0:01 Now that you know Bootstrap, you know about Bootstrap themes,
0:04 it's time to take a page that looks like this
0:07 and turn it more into a page that looks like this.
0:10 As you can imagine, we are going to use Bootstrap plus a Bootstrap theme
0:13 to jumpstart our path from the left to the right.
0:16 Let's begin with the theme.
0:19 So over here, I am going to use the same theme
0:22 that I use on Talk Python To Me and Talk Python Training
0:26 just so that you guys can see like this is the theme I used, right?
0:30 You don't necessarily have to pick this theme
0:32 as you've seen, there are many beautiful themes
0:35 like this one is really wonderful and so on,
0:37 but we are going to use this landing page theme, mostly because that's what I used.
0:42 So, if you are really going to use this as your website,
0:44 it probably makes sense you go fork it, on GitHub,
0:47 just so you have a copy, that said, we are going to stop by just downloading it.
0:51 Alright, let's just look in here and see what we've got.
0:54 This is what came out and over here, now you can see we have this landing page.
0:59 And if I cycle back and forth between our target here,
1:02 you can see a lot of similarities like I dropped out this little HR, horizontal line,
1:09 and moved the call to action buttons up and the little subtext or the H3, H2
1:16 whatever that is, underneath there and so on, let's go down a little bit,
1:20 to let's say this section here, something like that,
1:23 you can see that that looks a lot like this,
1:26 well, a little more like that side, actually no, this one.
1:29 Those are quite similar obviously, different pictures,
1:32 the background is not white but black,
1:35 I kind of like this darker sites for certain things,
1:38 notice that there is a distinction between this color
1:43 and this color for these horizontal slices as they build up
1:46 similarly over here you can see the horizontal slices
1:49 are light gray, dark gray, light gray, dark gray.
1:52 So what we are going to do is we are going to move that theme into this website,
1:57 we are going to have it more or less just look like
2:00 what the theme that we downloaded looks like,
2:03 we are of course going to plug this into the master view,
2:06 the Chameleon templates and things like this.
2:09 Then, we are going to take the various design elements I have in our final page
2:12 and move those over.
2:15 You will see over here on the desktop I've got a few images here
2:18 that are being used in the page, we'll talk about where do we got those
2:23 and how we are going to use them when we get to them,
2:26 but we are going to bring that over, plus a little bit of our design and content,
2:30 mix it together with the theme and we'll be off to the races.