Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: The power of css
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Now I hope that you are comfortable heading down this path, to get better with CSS and web design.
0:07
I want to show you something that is maybe way at the far end of like where most of us are going to be but is also super inspirational.
0:14
So I don't know if you've seen this before but this place called CSS Zen Garden; basically there is this page here and it has some content on it
0:23
and they ran some kind of competition on this page, where they said can you take this page, which to me
0:29
looks very much circa 2005, year 2000 sort of Wordpressy feeling. You can see things got like "Road to Enlightenment", some plain text,
0:38
"So What is This About", "Participation" and "Benefits" and so on. And they took a bunch of submissions and you can go over here
0:44
and click this and see all of them but I pulled up a few that I think are pretty remarkable.
0:49
So what you are going to see on the next five tabs is exactly the same HTML file
0:54
the only thing they have done is change the styles, that they are applying to them.
0:59
Change the styles, right; the styles also may include like background images, so really think of this like changing the images
1:06
and change the style but the structure of the HTML should be unchanged. Check this out. So, here is the first one, remember, exact same content.
1:14
How about that? So this is kind of like an old style sort of printed book field and as you scroll through it you can see The Beauty of CSS Design,
1:22
A demonstration of what can be accomplished, the "Road to Enlightenment", selecting the design, and so here is a bunch of various things,
1:30
now let's go back and just compare - A demonstration of what can be accomplished, the "Road to Enlightenment", "Participation",
1:37
here is the various people that are showing up here, things like that. Cool, right? Again, just changing the CSS. Let's try the next one.
1:46
Here again is the same page and if I make it a little wider, it even goes to the side a little bit here
1:51
and you can see we have this kind of robot, like 1960s robot character in this background and again, The Beauty of CSS,
1:57
A demonstration of what can be accomplished and if you scroll down you can see the robot sort of stays there,
2:02
that's cool and "Participation", look at how awesome it is, look at how different these designs are and all they are doing is putting different styles
2:08
and layouts on the various text blocks and images and so on. Here is another. Again, super different, A demonstration of what can be accomplished,
2:16
but what you can see here is what can be accomplished is quite amazing. So these are all the various pieces,
2:23
I don't totally love this design but I love how it's so different than the others.
2:27
Here is another, kind of some cool CSS animations again, these various pieces, all the text, laid out entirely differently.
2:36
So, I really like this one, that's cool. And then, we can kind of look at this last one, it's a little bit like a boy scout type of thing,
2:43
the zen garden troupe, here you can see they've got their very awesome Apple or is that an Apple or Macintosh, something like that.
2:50
Old school Apple there and again, very very different look and feel compared to what we have before.
2:55
All of that came from this standard basic page by just changing the CSS file and the images the CSS file brings in.
3:04
So there you have it, if you need to get inspired about what CSS can do, you can go and head on over to csszengraden.com
3:12
and you can see all sorts of amazing designs. Right here all of these are, remember, the same HTML, it's just different CSS coming into play.