Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: A proper footer
0:01 We finished the band members, and we hadn't added "book us"
0:03 because it's literally, basically just the same,
0:07 the final thing to do, of course we want to delete all of those pieces, right?
0:10 This is all leftover, like that dog, that's not our dog,
0:14 so let's start deleting those,
0:19 and we'll go all the way down to here,
0:23 so let's make sure this is still hanging together, yeah, there is our parts,
0:26 everything is looking great, but notice this footer, this footer is kind of a funky,
0:30 I don't really love the footer, so what I'd like to do is replace it with the different one,
0:35 and we have an example of where we are going, we have like,
0:39 we're going towards this dark theme, so I like this kind of dark part
0:42 and I plan on putting this site on the internet, so if somebody actually comes across
0:45 and he thinks that Blue / Yellow Rockets are a real band
0:48 and they want to like buy something, obviously they can't
0:50 and so this is just going to basically say
0:52 look, this site is actually a demo site for this course,
0:55 which you all are taking, so I want to put that as the footer.
0:58 I'm going to go over here, and the footer is shared across all the pages
1:02 so it's in the layout, here is the footer that is already there,
1:05 this came from the theme, let's drop it, it's using the HTML 5 footer tag, which is great,
1:09 I use a new copy that I wrote, and we'll just talk about it real quick.
1:13 Here again using HTML 5, you can see it's using the grid layout,
1:17 and it has a few bits of padding and then here is our story - Blue / Yellow Rockets, etc
1:24 now, there is one thing that's really notable here,
1:27 and let's just see how this looks and then we'll talk about it.
1:30 Alright, so watch the footer, at the bottom, there we go,
1:34 that's looking pretty good, we are going to need to do some styles here because
1:39 it's not all the way there and let me just paste these in
1:42 you can grab little bits if you need them.
1:45 So down here, let's just do it at the bottom,
1:47 here is a bunch of settings to set the width and the padding,
1:50 the line wrapping and the colors and all of that for all our footer elements,
1:54 so let's just see what effect that has, hopefully a good effect, there we go,
1:58 that's at least what we're aiming for, you can decide whether you like it or not,
2:02 I like these sort of fade to the background footers,
2:04 this doesn't really do that too much
2:07 with the white but when we switch the main content colors from black to white, I think it will.
2:11 Notice these things right here, notice how these images... they light up,
2:15 maybe you noticed before they were blue, now they are not blue,
2:20 so these are not actually images at all, like see this email, let's go find that email.
2:25 Alright, so up here a little bit there is an "email",
2:28 there is mail to contact to talkpython.fm and this is what appears to be the image,
2:34 in fact, this is awesome, this is Font Awesome, so Font Awesome,
2:39 remember, we installed that up here in the bower_components,
2:43 it has fonts that act as images, and why is that important or cool?
2:50 Well, if you've got a normal image, the image has a color
2:52 and if you make the image a different size than it's meant to be,
2:56 it gets real grainy or fuzzy or weird patterns up here and things like that.
3:01 With fonts, you can infinitely scale them and you can color them with CSS.
3:06 If you go over here and just search for Font Awesome,
3:10 you can see first thing that comes up: fontawesome.io
3:14 and they are actually running a kickstarter that is insanely successful,
3:17 like insanely successful, they are almost to a million dollars, unbelievable.
3:21 But, that’s not what we're here for, yeah, here you can see 924 thousand dollars,
3:25 congratulations guys, this is awesome, so let's go check out the icons.
3:28 So we can come down here and I could say well,
3:32 I am looking for stuff to do with Facebook, and then there is all the icons,
3:36 like I could get any one of these, let's suppose Facebook square is what I want,
3:40 then, it says "alright, this is cool all you've got to do is include that
3:44 plus the Font Awesome CSS and then you style it to be whatever color you want,
3:48 you want the Facebook blue, just set a CSS style for this thing, and it will be that color."
3:53 So I did that for all of the little social bits like for the email, here is one for GitHub,
3:58 here is one for some video file, here is one for YouTube and so on,
4:03 so if you look at the bottom of our file here, you can see all of those little things,
4:07 the YouTube looks a little funky, because it's so squished.
4:10 I really like this, I find this Font Awesome, little fonts or icons to be really helpful
4:14 because you can continue to style them,
4:17 you don't have to keep building new images,
4:19 so make sure you look there first,
4:21 if you are looking for little icon-like things for your site.