1
00:00:00,000 --> 00:00:09,514
[MUSIC]

2
00:00:09,514 --> 00:00:13,441
Hi, I'm Laura,
an instructor here at Treehouse.

3
00:00:13,441 --> 00:00:19,358
HTML and CSS are the two languages we
use together to create the structure and

4
00:00:19,358 --> 00:00:20,942
style of webpages.

5
00:00:20,942 --> 00:00:27,646
Whether you're creating a simple website
or a complex application like Google or

6
00:00:27,646 --> 00:00:32,809
Amazon, HTML and CSS play vital
roles in making it all happen.

7
00:00:32,809 --> 00:00:37,036
A typical web page can be broken
down into three key layers that

8
00:00:37,036 --> 00:00:40,788
work together to provide
a seamless user experience.

9
00:00:40,788 --> 00:00:44,726
These layers consist of
a content layer responsible for

10
00:00:44,726 --> 00:00:47,658
presenting the information on the page,

11
00:00:47,658 --> 00:00:53,021
a presentation layer that defines how
that information appears visually,

12
00:00:53,021 --> 00:00:57,652
and a behavior layer that allows
users to interact with the page.

13
00:00:57,652 --> 00:01:03,330
HTML, or Hypertext Markup Language,
takes charge of the content layer.

14
00:01:03,330 --> 00:01:06,565
It forms the structural
core of a web page.

15
00:01:06,565 --> 00:01:11,182
On the other hand, CSS, which stands for
Cascading Style Sheets,

16
00:01:11,182 --> 00:01:13,944
is in charge of the presentation layer.

17
00:01:13,944 --> 00:01:18,424
It focuses on enhancing
the visual aspects of web pages,

18
00:01:18,424 --> 00:01:23,853
including elements like colors,
typography, layout, and more.

19
00:01:23,853 --> 00:01:27,113
The behavior layer is
managed by JavaScript,

20
00:01:27,113 --> 00:01:29,879
which adds interactivity to the page.

21
00:01:29,879 --> 00:01:34,033
For instance,
it can trigger actions such as displaying

22
00:01:34,033 --> 00:01:37,676
a larger image when a user
clicks on a smaller one.

23
00:01:37,676 --> 00:01:42,332
HTML and
CSS form the foundation of every website.

24
00:01:42,332 --> 00:01:48,005
But for major platforms like YouTube,
LinkedIn, and Netflix, HTML and

25
00:01:48,005 --> 00:01:53,966
CSS are just two of the many technologies
they use to deliver their services.

26
00:01:53,966 --> 00:01:59,223
You may have heard of JavaScript, Python,
or Ruby, and these are just a few

27
00:01:59,223 --> 00:02:04,421
of the technologies that are used to
create today's intricate websites.

28
00:02:04,421 --> 00:02:08,543
Web development is typically
divided into two main areas,

29
00:02:08,543 --> 00:02:12,345
front-end development and
back-end development.

30
00:02:12,345 --> 00:02:19,075
Front-end developers use HTML, CSS, and
JavaScript to build what the client sees,

31
00:02:19,075 --> 00:02:23,423
the elements that run directly
in the user's browser.

32
00:02:23,423 --> 00:02:28,792
Meanwhile, the back-end developers are
responsible for what runs on the server.

33
00:02:28,792 --> 00:02:32,354
They use languages like Python, Ruby, and

34
00:02:32,354 --> 00:02:37,751
Java to work with databases to save,
change, and retrieve data.

35
00:02:37,751 --> 00:02:43,442
As an example, JavaScript runs in the
browser to add interactivity to a page.

36
00:02:43,442 --> 00:02:48,747
If you wanted to have a window pop
up each time a user clicks a button,

37
00:02:48,747 --> 00:02:53,589
or if you wanted to display a group
of images with a slideshow,

38
00:02:53,589 --> 00:02:58,079
you'd use HTML and CSS to build and
style the slideshow.

39
00:02:58,079 --> 00:03:02,201
And JavaScript to program
the slideshow images so

40
00:03:02,201 --> 00:03:05,054
that they slide in and out of view.

41
00:03:05,054 --> 00:03:08,653
Or think about a login page for
a website like Amazon.

42
00:03:08,653 --> 00:03:13,463
You'd use HTML to create input fields and
a submit button, and

43
00:03:13,463 --> 00:03:18,192
use CSS to control what the button and
input fields look like.

44
00:03:18,192 --> 00:03:20,790
When a user hits enter or click submit,

45
00:03:20,790 --> 00:03:25,517
JavaScript can be used to validate
the information they've entered,

46
00:03:25,517 --> 00:03:29,077
such as checking for
an at symbol in an email address.

47
00:03:29,077 --> 00:03:34,530
JavaScript can also provide error messages
or confirmations upon submission.

48
00:03:34,530 --> 00:03:40,182
And then you might need a back-end
language like Python, Ruby, or Java to

49
00:03:40,182 --> 00:03:45,764
save the username or email addresses
to a database for future retrieval.

50
00:03:45,764 --> 00:03:51,238
That's how HTML and CSS fit into
the larger field of web development.

51
00:03:51,238 --> 00:03:56,930
Front-end developers use HTML and CSS to
build what the client sees on the browser.

52
00:03:56,930 --> 00:04:01,484
So whether you want to build your
own website, web applications, or

53
00:04:01,484 --> 00:04:06,431
just know how to modify existing websites
and apps, starting with HTML and

54
00:04:06,431 --> 00:04:08,415
CSS is your best foundation.

55
00:04:08,415 --> 00:04:11,326
Now, we've only begun
to scratch the surface.

56
00:04:11,326 --> 00:04:17,735
We'll dive deeper into HTML and CSS, then
get you all set up to code along with me.

57
00:04:17,735 --> 00:04:18,740
Let's get started.