#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: CSS Zen Garden
0:00 If you've not done a lot of CSS
0:02 I think you'll be surprised at the power
0:05 and flexibility of CSS.
0:07 The primary idea is that we have our HTML markup
0:10 that has the content and CSS is supposed to style it
0:14 so it controls how it looks and feels on the page.
0:17 So the look and feel is separated from the content.
0:20 A nice programming concept, right?
0:23 This place called CSS Zen Garden takes this idea
0:26 and really puts it on display in a powerful way.
0:29 So, let's jump over here and check out a couple of sites.
0:33 Here we are at CSS Zen Garden.
0:35 You can click on 'view all designs'.
0:37 The idea is that we're going to go through an example
0:41 that says CSS Zen Garden, The Beauty of CSS Design
0:44 a demonstration of what can be accomplished.
0:46 A road to enlightenment, so what's this all about?
0:49 You can see there is a style on this page
0:51 it's not super impressive or whatever.
0:54 Here you can see little logos
0:55 you can see who are the contributors and so on.
0:58 However, basically, this was a challenge
1:02 and the design challenge was to take this HTML
1:06 and do something interesting and different with it.
1:09 I want to take you through five different designs here
1:12 that take the same HTML but put different CSS styles
1:15 and also, through CSS you can set things like
1:18 background images.
1:19 So, in a sense, maybe some different images as well.
1:22 All right, the first one, is this one.
1:24 It's like this cool, old book.
1:25 Let me make it a little skinnier.
1:28 Right, so we've got this cool, old book
1:30 and this is actually the same contents.
1:32 CSS Zen Garden, The Beauty of CSS Design
1:35 a demonstration of what can be accomplished
1:38 here's your road to enlightenment.
1:39 Look how cool this looks!
1:41 Here's the different contributors, versus
1:45 let's say this section right here.
1:46 So, we had that before
1:48 now we have it looking like a table of contents.
1:51 Really cool, right?
1:52 You can go and view all designs.
1:54 So, so nice. And really creative I think.
1:57 You flip through those two sites here
1:59 you don't feel like those are the same thing.
2:01 But they are, they definitely are.
2:03 Let's try another one.
2:05 Check this out, here's a cool little robot
2:07 and, depending on the size, that thing either
2:09 goes alongside the text or over the text.
2:13 So, here we have this robot here
2:15 and as we move him around they do different things.
2:19 We can go in and check out
2:20 notice how the robot gets scrolled over.
2:22 The road to enlightenment
2:23 what's this all about, participation.
2:26 Go down and find those
2:28 there's our folks again that we just talked about.
2:30 Notice they're in different places in the page.
2:32 The thing looks totally unique and different
2:35 and has cool little animations.
2:37 Let's try another.
2:39 Here's another one.
2:40 It looks kind of like something
2:42 out of a dystopian type of movie.
2:45 I don't know if it's good or not
2:46 but it's definitely different.
2:48 Right, here's CSS Zen Garden, Beauty of Design
2:50 demonstration of what can be accomplished.
2:52 So what's this all about, right?
2:54 There's all the pieces and whatnot.
2:56 Here's the people.
2:58 Okay, so quite cool, quite cool.
3:00 What about another one.
3:02 The Beauty of CSS Designs
3:04 let's make this one a little wider.
3:06 I see some cool stuff happens as you change the size there
3:09 make it a little skinnier.
3:10 This part becomes top most, there you go.
3:13 Pretty cool right?
3:14 Again, this is the same page.
3:16 The Beauty of CSS Design, demonstration, etc, etc.
3:20 Road to enlightenment.
3:22 Look how cool and different this looks.
3:24 Did they change the HTML? No, not at all.
3:27 The design challenge was that you cannot change the HTML.
3:31 They just changed the CSS. All right, last bit.
3:35 It's like this retro, Mackintosh type thing
3:37 from way back in the day here.
3:39 Again, demonstrating what can be accomplished
3:41 getting started, same thing.
3:43 Right, there's those little icons, very cool.
3:46 So, if you think of all these different sites
3:50 being completely controlled, starting from this
3:53 to be just, you know, specify the CSS
3:55 and accompanying images that the CSS sticks
3:58 into various places.
3:59 I think that's pretty remarkable.
4:01 Hopefully this inspires you to learn a little CSS
4:04 because it's truly powerful and once you master it
4:07 it's definitely a power that will
4:09 help you on the web, everyday.