#100DaysOfWeb in Python Transcripts
Chapter: Days 1-4: Flask Intro
Lecture: Using CSS, create Menu Bar in the Base Template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
As a bonus, I thought I'd throw in a bit of CSS some cascading style sheets to make the site look a little bit nicer, specifically with a menu bar.
0:11
I'm going to be using something called MUI CSS it's just some pre-established CSS I can link to it saves me writing all the code manually.
0:21
Now we are going to head over to our base.html file. We're going to throw in quite a bit of code here so I'm going to paste it in and I will explain it
0:35
line by line, just a minute and here we have all of the extra code I've just thrown in these are the meta tags up here that are required
0:45
to load MUI CSS, you can pretty much just ignore all of those for now, this is all static stuff that they
0:52
will show on their web page to actually get MUI CSS imported into your script, so all of those need to be
0:59
thrown between the head tags and the key stuff here I want you to look at is within this body tag
1:07
we're creating a div all right, in HTML, just a little section there called menu bar, this is using their MUI panel CSS class, just ignore that for now
1:18
most importantly within our menu bar div that we're creating, we're creating a button with these characteristics, again ignore that
1:28
this button that links to our index.html file our index route and says home. So we're creating a home button that takes us back
1:38
to the home page, the index page, there is a second button here which has the same characteristics
1:45
but this time it's called a 100 Days button and it links to our 100Days route, all right. So there's not much to it there, it's pretty simple
1:55
and that is within our base.html file, so that menu that we are creating is going to be across every page
2:03
and be extended and all we're going to have unique is our block content, all right, so we'll save that file.
2:14
Let's move this to the right, and all we have to do here we don't actually have to do anything else to our
2:21
routes.py file 'cause that all stays the same we just run the app, let's bring up our browser all right here is our browser, let's get rid of 100 days
2:33
hit enter, and it again, it's not styled perfectly just roll with it, this is pretty simple stuff but there
2:40
is our menu bar and we have two buttons, home and 100 days. If we hit 100 Days that takes us to 100Days page.
2:49
Remember the div that we created for their menu bar is static, so that will stay on every page, it's in our
2:55
base.html file, that will never change, just the content in the body tag will. Click on home again, this is just that custom content
3:08
in the body tag that's changing, menu bar staying the same. Nice and simple, you can see this is the framework
3:16
of your web page, your web page is starting to come together, so this is really exciting, you've learned
3:21
quite a few concepts here, move on to the next video for a little bit of a wrap up.