Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: CSS: Layout demo intro

Login or purchase this course to watch this video and the rest of the course contents.
0:02 So, it's time to talk about layout,
0:05 and layout works in conjunction with the box model
0:08 to basically determine how things look on the screen, where they get placed,
0:12 when there is new line wraps and so on.
0:14 If you understand a few things about CSS like the layout,
0:17 the box model and the selectors, you are like 80% of the way there.
0:22 So, let's take a pretty cool example here, here we have a list of items,
0:25 they are actually hyperlinks that go to the various parts of our pages,
0:29 home, CSS selectors, CSS box model layout and float items,
0:33 so these should be pretty familiar to you by now,
0:35 that's just the little list that's on the home screen but notice this is on /layout,
0:39 there is no extra stuff, it's really just this little bit on the screen.
0:42 So we are going to do just a little bit of CSS and tweak with the layout
0:46 to turn this into a full-on navigational menu.
0:50 Now, just to be clear, this navigational menu is probably not
0:54 what you wanted to do for real navigation,
0:56 we are going to get to Bootstrap and responsive design
0:59 and drop down menus and all sorts of cool stuff,
1:01 but this is more just to show you like look how dramatically we can change
1:05 the layout and the appearance of a numbered list more or less,
1:10 so this is going to be really cool and it won't take much effort at all so let's go do this.