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