WEBVTT

00:00:00.280 --> 00:00:02.637
- Now that you've seen a ton of HTML text,

00:00:02.637 --> 00:00:05.704
the whole rest of this course
is going to be about CSS,

00:00:05.704 --> 00:00:07.828
and everything you can do with CSS.

00:00:07.828 --> 00:00:10.078
To get you excited and get you to stay on,

00:00:10.078 --> 00:00:12.317
I want to show you one
of the best examples

00:00:12.317 --> 00:00:14.176
of everything you can do.

00:00:14.176 --> 00:00:18.021
And that's a site called csszengarden.com.

00:00:18.021 --> 00:00:20.409
And you can check it
out for yourself after.

00:00:20.409 --> 00:00:23.920
CSS Zen Garden is a simple site
with heading and background

00:00:23.920 --> 00:00:25.800
and text and all that stuff.

00:00:25.800 --> 00:00:27.893
But the thing that's cool about it

00:00:27.893 --> 00:00:31.307
is that it's a gallery
of designs of people

00:00:31.307 --> 00:00:36.307
that take the exact same
HTML and only change the CSS

00:00:37.837 --> 00:00:42.483
to see how much they can
change with just CSS.

00:00:42.483 --> 00:00:43.498
Let me show you.

00:00:44.449 --> 00:00:45.682
Here's another one.

00:00:45.682 --> 00:00:49.282
Remember, this is the exact same HTML

00:00:49.282 --> 00:00:51.404
that you saw in the previous page.

00:00:51.404 --> 00:00:54.120
The only difference is CSS.

00:00:55.003 --> 00:00:56.421
Here's another one.

00:00:56.421 --> 00:00:58.418
So not only do the colors change,

00:00:58.418 --> 00:01:01.759
but things get laid out on
the page in a different order.

00:01:02.542 --> 00:01:04.887
And this one makes it really different,

00:01:04.887 --> 00:01:07.708
so now it looks like this
cityscape with this title

00:01:07.708 --> 00:01:11.089
that comes down here, and
there's credits over here,

00:01:11.089 --> 00:01:16.089
and oh my things are animating,
and all of this is just CSS.

00:01:16.608 --> 00:01:19.059
Maybe it's not CSS that you know yet,

00:01:19.059 --> 00:01:20.618
but if you keep going,

00:01:20.618 --> 00:01:23.181
all of this will be
available at your fingertips.

00:01:23.181 --> 00:01:24.516
If you put in enough work,

00:01:24.516 --> 00:01:26.176
you'll be able to make beautiful websites

00:01:26.176 --> 00:01:29.225
that look exactly how
you want them to look.

00:01:29.225 --> 00:01:30.191
Keep going.