[MUSIC]
0:00
Hi, I'm Laura,
an instructor here at Treehouse.
0:09
HTML and CSS are the two languages we
use together to create the structure and
0:13
style of webpages.
0:19
Whether you're creating a simple website
or a complex application like Google or
0:20
Amazon, HTML and CSS play vital
roles in making it all happen.
0:27
A typical web page can be broken
down into three key layers that
0:32
work together to provide
a seamless user experience.
0:37
These layers consist of
a content layer responsible for
0:40
presenting the information on the page,
0:44
a presentation layer that defines how
that information appears visually,
0:47
and a behavior layer that allows
users to interact with the page.
0:53
HTML, or Hypertext Markup Language,
takes charge of the content layer.
0:57
It forms the structural
core of a web page.
1:03
On the other hand, CSS, which stands for
Cascading Style Sheets,
1:06
is in charge of the presentation layer.
1:11
It focuses on enhancing
the visual aspects of web pages,
1:13
including elements like colors,
typography, layout, and more.
1:18
The behavior layer is
managed by JavaScript,
1:23
which adds interactivity to the page.
1:27
For instance,
it can trigger actions such as displaying
1:29
a larger image when a user
clicks on a smaller one.
1:34
HTML and
CSS form the foundation of every website.
1:37
But for major platforms like YouTube,
LinkedIn, and Netflix, HTML and
1:42
CSS are just two of the many technologies
they use to deliver their services.
1:48
You may have heard of JavaScript, Python,
or Ruby, and these are just a few
1:53
of the technologies that are used to
create today's intricate websites.
1:59
Web development is typically
divided into two main areas,
2:04
front-end development and
back-end development.
2:08
Front-end developers use HTML, CSS, and
JavaScript to build what the client sees,
2:12
the elements that run directly
in the user's browser.
2:19
Meanwhile, the back-end developers are
responsible for what runs on the server.
2:23
They use languages like Python, Ruby, and
2:28
Java to work with databases to save,
change, and retrieve data.
2:32
As an example, JavaScript runs in the
browser to add interactivity to a page.
2:37
If you wanted to have a window pop
up each time a user clicks a button,
2:43
or if you wanted to display a group
of images with a slideshow,
2:48
you'd use HTML and CSS to build and
style the slideshow.
2:53
And JavaScript to program
the slideshow images so
2:58
that they slide in and out of view.
3:02
Or think about a login page for
a website like Amazon.
3:05
You'd use HTML to create input fields and
a submit button, and
3:08
use CSS to control what the button and
input fields look like.
3:13
When a user hits enter or click submit,
3:18
JavaScript can be used to validate
the information they've entered,
3:20
such as checking for
an at symbol in an email address.
3:25
JavaScript can also provide error messages
or confirmations upon submission.
3:29
And then you might need a back-end
language like Python, Ruby, or Java to
3:34
save the username or email addresses
to a database for future retrieval.
3:40
That's how HTML and CSS fit into
the larger field of web development.
3:45
Front-end developers use HTML and CSS to
build what the client sees on the browser.
3:51
So whether you want to build your
own website, web applications, or
3:56
just know how to modify existing websites
and apps, starting with HTML and
4:01
CSS is your best foundation.
4:06
Now, we've only begun
to scratch the surface.
4:08
We'll dive deeper into HTML and CSS, then
get you all set up to code along with me.
4:11
Let's get started.
4:17