#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Your-turn: Day 3
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Day three of this four day chapter. Again, this a hands-on day for you. So the idea is to rebuild a navigation out of an unordered list.
0:11
So here you have a graphic, this is the top banner of talkpython.fm, one of my podcasts. So, what you're going to do is you're going to take
0:19
an unordered list like this one you have down here of course, actually put it in HTML source don't just copy it over
0:25
and your goal will be to apply CSS styles to it until it looks more like what's up here. Each one of those are hyperlinks
0:33
that's also a hyperlink from Font Awesome more about that in a minute. You could try to style this thing out that's one hyperlink
0:40
but it has a different styles and it has hover behaviors and all sorts of cool stuff like that so try that out for real
0:48
and pop over here and I'll show you what it means. So if you hover over it and notice how the little quotes glow, all right?
0:54
They do their thing, that just takes you home. Feel free to download this image or just hotlink it, whatever you want
1:00
to get that image in there as well. And then finally, there's this little search thing here and this is actually a font from Font Awesome
1:09
Font Awesome's a great resource and basically lets you include just HTML elements that come in as styled fonts
1:17
and what's awesome about that is they scale perfectly to all sizes and you can make them any color you want with CSS.
1:24
If that was an image, you couldn't style it, right? But because it's actually a font, that looks like an image
1:30
there's thousands of these at Font Awesome super good resource to know about. So rebuild this top section don't worry about the little node bit.
1:37
You can just take an image in there or just leave it blank, whatever it's not really the point
1:40
it's just that top nav bar you're supposed to work on today. So your goal for today will be to build a navigational unit out of an unordered list.
1:48
Now should you really do this? No. Not for a real site, this is actually using bootstraps so, for example, notice if I make it smaller
1:55
some of them go away make it smaller still, becomes this pop-out menu and there's all sorts of advantages to using these web front-end frameworks
2:03
which we'll talk more about on day four. So probably this is not the best use of actually creating a nav
2:10
but it's not about I'm teaching you how to build a nav for your site it's more the idea of learning how to style these things to control them
2:18
and here's a pretty cool application of that.