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