#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Your-turn: Day 3
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.