Building Data-Driven Web Apps with Flask 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
We've seen what cool stuff we can build with Bootstrap
0:02
and how nice we can make our sites look.
0:04
It's time to actually make our pypi.org site
0:08
our demo site that we're trying to build
0:10
look like it's supposed to.
0:12
Well, here's what it looks like now.
0:13
Let's see how close we are to our goal.
0:15
So, we have some packages listed here
0:17
that's pretty close, probably.
0:18
Yeah, no, maybe not.
0:21
So, see this is running on a localhost
0:22
this is also the Flask final product
0:24
and what we're going to build.
0:26
We do have a list of the popular packages
0:29
so that's kind of in line with it.
0:31
Here we have a login screen and a registry screen.
0:34
These should look pretty familiar
0:35
after what we talked about with Bootstrap
0:37
in forms and buttons.
0:38
And then if we go to one of these
0:39
you can see we have the details
0:41
here we have the version
0:42
we have some instructions on how to install it
0:44
what's going on
0:46
the licenses it uses and so on.
0:48
So, this is what we want to build
0:50
this is what we have
0:51
and what we're going to do is, basically
0:53
rip the stuff out of here to get started.
0:56
So, we're just going to go and start applying, step-by-step
1:01
the designs and elements that we see here
1:03
until we get it actually running together.
1:06
So, not everything we're going to
1:07
entirely implement at this point.
1:09
For example, we don't have a database
1:11
so a lot of the data-driven stuff won't be there.
1:13
We'll just keep using our fake data
1:15
but we're going to get the design as close as we can.
1:17
So, we're going to start by just focusing on this page
1:20
the Homepage here. Try to get this section
1:23
this big thing up here is typically referred to
1:25
as a Hero Section or a Jumbotron or something like that.
1:29
Get these little bits here
1:30
about the number of releases and the stats
1:33
and then these lists of our recent projects.
1:35
Okay, so our goal, at first, is just to get that in place.
1:39
Let's go over here
1:40
and do a few things around organization
1:42
before we actually get started.
1:44
First of all, we don't want to just have
1:46
just everything in static.
1:47
So, let's do a little more work here.
1:50
We're going to say, "Create a directory called images."
1:53
Or imj for short. Kind of like that.
1:55
And then over here, we'll have a JS.
1:57
We probably won't even have any JavaScript for real
2:00
but this is a pretty good organization to start
2:03
and maybe even sub-directories within images and so on.
2:07
We also have a little site.css
2:09
we've included that over here
2:11
and you can see that that's
2:12
doing a little bit of work for us, right?
2:13
You can see it's basically coloring
2:15
our nav bar and stuff like that.
2:17
Let's just double check that it's working.
2:19
I've got a cool little thing that'll work with h1 tags
2:23
let's see. Yep.
2:25
So, you can see changes to our static-style sheet
2:27
are doing something there.
2:28
That's terrifying, isn't it?
2:30
That you can still do the blank tag.
2:32
And, of course, if we go over to our shared layout here
2:35
you can see we are including our style sheet.
2:38
That's good news.
2:39
And we're also just need to work with this.
2:41
So this is going to get a whole lot simpler
2:43
we'll just change this to Home for now
2:46
and all of this stuff
2:47
we can get rid of.
2:49
Great, that blinking thing is gone
2:51
and, in fact, we're also are not going to need the nav
2:54
in the form that is is right now up here.
2:57
So we can just comet that out
2:59
maybe leave it for an example a little bit.
3:01
So now we have a nice, simple starter page
3:03
and what we're going to do
3:04
is we're going to start moving these elements over
3:07
top to bottom.
3:08
Well, we're going to skip the nav first
3:09
then we'll get back to the nav.
3:10
Okay, I think we're about ready to
3:12
start writing our homepage.