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, it's time to take a page that looks like this
0:08
and turn it more into a page that looks like this. As you can imagine, we are going to use Bootstrap plus a Bootstrap theme
0:14
to jumpstart our path from the left to the right. Let's begin with the theme. So over here, I am going to use the same theme
0:23
that I use on Talk Python To Me and Talk Python Training just so that you guys can see like this is the theme I used, right?
0:31
You don't necessarily have to pick this theme as you've seen, there are many beautiful themes like this one is really wonderful and so on,
0:38
but we are going to use this landing page theme, mostly because that's what I used. So, if you are really going to use this as your website,
0:45
it probably makes sense you go fork it, on GitHub, just so you have a copy, that said, we are going to stop by just downloading it.
0:52
Alright, let's just look in here and see what we've got. This is what came out and over here, now you can see we have this landing page.
1:00
And if I cycle back and forth between our target here, you can see a lot of similarities like I dropped out this little HR, horizontal line,
1:10
and moved the call to action buttons up and the little subtext or the H3, H2 whatever that is, underneath there and so on, let's go down a little bit,
1:21
to let's say this section here, something like that, you can see that that looks a lot like this,
1:27
well, a little more like that side, actually no, this one. Those are quite similar obviously, different pictures,
1:33
the background is not white but black, I kind of like this darker sites for certain things, notice that there is a distinction between this color
1:44
and this color for these horizontal slices as they build up similarly over here you can see the horizontal slices
1:50
are light gray, dark gray, light gray, dark gray. So what we are going to do is we are going to move that theme into this website,
1:58
we are going to have it more or less just look like what the theme that we downloaded looks like,
2:04
we are of course going to plug this into the master view, the Chameleon templates and things like this.
2:10
Then, we are going to take the various design elements I have in our final page and move those over.
2:16
You will see over here on the desktop I've got a few images here that are being used in the page, we'll talk about where do we got those
2:24
and how we are going to use them when we get to them, but we are going to bring that over, plus a little bit of our design and content,
2:31
mix it together with the theme and we'll be off to the races.