Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This lesson defines HTML and CSS, shows where and how it’s used on websites you visit everyday, and looks at the example project you will be working on throughout the course.
New Terms:
HTML - HyperText Markup Language, a set of tags we use to describe the structure of web pages.
CSS - Cascading Style Sheets, a language used to describe how an HTML element should look when displayed in a browser.
Website examples:
-
http://www.rawnet.com/
-
http://www.rawnet.com/what-we-do
-
http://www.ted.com/
-
http://bennettfeely.com/csscreatures/
-
http://bellbros.com/
- http://mrdoob.github.io/three.js/examples/css3d_periodictable.html
Further Reading:
[MUSIC]
0:00
Hi, I'm Treasure.
0:04
Welcome to HTML and CSS basics.
0:06
HTML and CSS are the two languages we use
together to structure and style webpages.
0:10
Pretty much everything on the web
uses HTML and CSS to some degree.
0:15
From simple websites to huge and
0:20
complex web applications,
like Pinterest and Twitter.
0:22
HTML, which stands for hypertext
markup language, is simply a set of
0:26
tags we use to describe to the browser
how our webpages are structured.
0:31
We do this by surrounding the content
of our webpages with these HTML tags.
0:35
Then, we use CSS or cascading style
sheets to tell the browser what
0:40
we want the content between
the tags to look like.
0:44
You can think of coding a web page as
sort of like making a blueprint for
0:48
the browser.
0:51
With your HTML,
0:52
you're saying hey browser, this particular
section of my website is a paragraph.
0:53
And with CSS, you're saying, hey browser,
I want this paragraph's text color to be
0:58
white and it's background color to
be black, and on and on like that.
1:02
So what can you do with HTML and CSS?
1:07
You can present a lot of content in well
organized and visually appealing ways.
1:10
You can build a stunning portfolio
to impress potential employers.
1:21
You can enhance your content
with funny animations.
1:35
While many websites add effects and
interactivity with JavaScript and
1:39
communicate with servers to store and
retrieve data, HTML and CSS
1:42
are fundamental building blocks that make
up much of what you see in the browser.
1:46
You see HTML and CSS every single day
on popular websites like Facebook,
1:50
Pinterest, Tumblr, and Twitter.
1:55
Now let's dive in and
1:58
take a look at the example website we'll
be working on throughout this course.
1:59
You can launch it and follow along with me
by clicking the Launch Workspace button
2:04
at the bottom right of your screen.
2:08
I'm also going to click this
preview icon at the top right so
2:10
we can see what our project
looks like in the browser.
2:13
Let open up index.html and
take a look at it.
2:17
As you can see, all of our
content in wrapped in HTML tags.
2:22
Most tags have an opening tag and
a closing tag.
2:27
HTML tags can have what
are called attributes on them
2:33
like the class attribute on this h1 here.
2:37
Attributes help us give the browser more
information about how the tag should
2:40
work or look.
2:44
In this case, adding a class attribute
is one way we can tell our CSS
2:46
which element on the page
we want to add styles to.
2:50
We'll go into more detail about
classes in a later video, but
2:52
right now just notice that our h1
tag has two classes, tag and name.
2:57
Now let's open up our CSS file.
3:04
We can see that a CSS file includes
many HTML tags and classes.
3:07
These HTML tag names and classes tell
a browser where to apply the style.
3:13
For example, here's that class that we
saw assigned to our h1, this tag class.
3:19
You can see that we're assigning the
background-color of tag to this number,
3:25
which is called a hexadecimal value,
and is basically just code for
3:30
hey browser,
display a light grey background color.
3:33
Let's delete this number and
type blue and see what happens.
3:37
We'll refresh and
3:46
now the information that's between
the h1 tags has a blue background color.
3:48
We've just used CSS to select
a specific part of the web page.
3:52
An html tag and change its color.
3:56
And that is fundamentally how you can use
HTML and CSS together to create webpages.
3:59
Learning HTML and CSS is a great way to
get started with coding because it's so
4:05
easy to pick up the basics and
start making your own webpages right away.
4:10
Throughout this course, we'll be learning
the basic components of a web page and
4:14
many of the most common and
useful HTML tags and CSS properties.
4:18
By the time we're done,
4:22
you'll have all the knowledge you'll need
to start building web pages on your own.
4:23
So let's get started.
4:27
You need to sign up for Treehouse in order to download course files.
Sign up