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