Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Our site design
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
It's time to take what we've learned about
0:01
Bootstrap and templates and so on
0:04
and apply them to actually put the design
0:07
for our website in place.
0:09
We might leave a few details out
0:11
until we get to the right location later
0:13
but for the most part, let's start by
0:15
ripping out this design and putting in a new design.
0:19
I'll try to not waste time doing this
0:21
but I'll also try not to skip over
0:23
too much stuff for you so hopefully
0:25
I can find a decent balance there
0:28
'cause there's a lot of details in
0:29
some of the CSS and so, alright.
0:30
So this is what we have so far.
0:32
We actually have this sort of
0:33
data-driven even though it's not
0:35
out of a database, it is you know
0:36
a model provided to the template, changing it here.
0:40
This is what we want.
0:42
Now if you look carefully this is not PyPI.org.
0:48
It's a slightly different version.
0:50
It has 96 projects and it's running on localhost.
0:54
So this is what we want to build.
0:55
I have the new releases here, some of the top stuff.
0:58
Click on it, you get details and history, all about it.
1:02
So we're going to build this and notice up here
1:04
I have a login and register.
1:06
Some of these things should look
1:08
a little more familiar to you
1:09
now that we've talked about Bootstrap
1:10
if they didn't already.
1:12
Notice where it says this is the fake site.
1:15
So this is is where we're going
1:16
and let's just focus on a couple of things.
1:18
Let's design out this front page here.
1:21
So over here, this is the red version that we have.
1:24
There's really two files that we're going to have to work with
1:26
in terms of the HTML.
1:28
We have our _layout and our index.
1:32
This does the navigation in the main top level
1:35
design as we saw, and then the content gets dropped in here
1:38
and that's going to be that special homepage
1:40
or the details of the package.
1:43
Let's do a little bit of extra work
1:45
to make things easier on us.
1:47
So let's go over here and let's do some organization.
1:50
First of all, this is going to become a true nightmare.
1:52
So let's do some organization here.
2:05
So far CSS images and JSON, and we'll put these things
2:10
in their various places.
2:15
We have to update them over here.
2:16
It wouldn't be new, so instead of static
2:18
we now have static img.
2:26
Let's go and set the title here.
2:29
Python Package Index Demo.
2:33
And this one's going to be CSS.
2:35
Let's just make sure everything is still working.
2:38
Yeah, it looks exactly the same.
2:40
That's what we want, okay.
2:41
So a little organization, reorganization worked okay.
2:45
Let's go and add a couple of things here.
2:48
I'm going to add a CSS file, called Site.
2:53
We're also going to want add one called Home.
2:57
Now Home is only going to appear in the homepage.
2:59
It's just going to style like that big top banner
3:01
and then Site is going to appear on all of the pages.
3:04
So we'll just work with that one for now.
3:06
Let's make sure we include it.
3:11
There we have our site, and we can just do a quick test
3:13
to make sure that, that's working.
3:22
Refresh it, and it looks like
3:23
it had some effect, okay, great.
3:25
Put it back.
3:27
Alright, everything seems to be working.