#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.
0:02 Again, this a hands-on day for you.
0:05 So the idea is to rebuild a navigation
0:08 out of an unordered list.
0:10 So here you have a graphic, this is the top banner of
0:13 talkpython.fm, one of my podcasts.
0:16 So, what you're going to do is you're going to take
0:18 an unordered list like this one you have down here
0:20 of course, actually put it in HTML source
0:22 don't just copy it over
0:24 and your goal will be to apply CSS styles
0:27 to it until it looks more like what's up here.
0:30 Each one of those are hyperlinks
0:32 that's also a hyperlink from Font Awesome
0:34 more about that in a minute.
0:36 You could try to style this thing out
0:37 that's one hyperlink
0:39 but it has a different styles and it has hover behaviors
0:42 and all sorts of cool stuff like that
0:45 so try that out for real
0:47 and pop over here and I'll show you what it means.
0:48 So if you hover over it and notice how the little
0:51 quotes glow, all right?
0:53 They do their thing, that just takes you home.
0:54 Feel free to download this image
0:56 or just hotlink it, whatever you want
0:59 to get that image in there as well.
1:02 And then finally, there's this little search thing here
1:06 and this is actually a font from Font Awesome
1:08 Font Awesome's a great resource
1:11 and basically lets you include just HTML elements
1:14 that come in as styled fonts
1:16 and what's awesome about that is they scale
1:19 perfectly to all sizes
1:21 and you can make them any color you want with CSS.
1:23 If that was an image, you couldn't style it, right?
1:26 But because it's actually a font, that looks like an image
1:29 there's thousands of these at Font Awesome
1:31 super good resource to know about.
1:32 So rebuild this top section
1:34 don't worry about the little node bit.
1:36 You can just take an image in there
1:37 or just leave it blank, whatever
1:38 it's not really the point
1:39 it's just that top nav bar you're supposed to work on today.
1:42 So your goal for today will be to build
1:44 a navigational unit out of an unordered list.
1:47 Now should you really do this? No.
1:50 Not for a real site, this is actually using bootstraps
1:52 so, for example, notice if I make it smaller
1:54 some of them go away
1:56 make it smaller still, becomes this pop-out menu
1:58 and there's all sorts of advantages to using
2:00 these web front-end frameworks
2:02 which we'll talk more about on day four.
2:04 So probably this is not the best use
2:07 of actually creating a nav
2:09 but it's not about I'm teaching you how to build
2:12 a nav for your site
2:13 it's more the idea of learning how to style these things
2:16 to control them
2:17 and here's a pretty cool application of that.