Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Welcome to HTML and CSS

4:28 with Treasure Porth

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.

Teacher's Notes
Video Transcript
Downloads

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:

Further Reading:

Introduction to HTML
Getting Started with CSS

[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