[MUSIC]

Hi, I'm Treasure.

Welcome to HTML and CSS basics.

HTML and CSS are the two languages we use together to structure and style webpages.

Pretty much everything on the web uses HTML and CSS to some degree.

From simple websites to huge and

complex web applications, like Pinterest and Twitter.

HTML, which stands for hypertext markup language, is simply a set of

tags we use to describe to the browser how our webpages are structured.

We do this by surrounding the content of our webpages with these HTML tags.

Then, we use CSS or cascading style sheets to tell the browser what

we want the content between the tags to look like.

You can think of coding a web page as sort of like making a blueprint for

the browser.

With your HTML,

you're saying hey browser, this particular section of my website is a paragraph.

And with CSS, you're saying, hey browser, I want this paragraph's text color to be

white and it's background color to be black, and on and on like that.

So what can you do with HTML and CSS?

You can present a lot of content in well organized and visually appealing ways.

You can build a stunning portfolio to impress potential employers.

You can enhance your content with funny animations.

While many websites add effects and interactivity with JavaScript and

communicate with servers to store and retrieve data, HTML and CSS

are fundamental building blocks that make up much of what you see in the browser.

You see HTML and CSS every single day on popular websites like Facebook,

Pinterest, Tumblr, and Twitter.

Now let's dive in and

take a look at the example website we'll be working on throughout this course.

You can launch it and follow along with me by clicking the Launch Workspace button

at the bottom right of your screen.

I'm also going to click this preview icon at the top right so

we can see what our project looks like in the browser.

Let open up index.html and take a look at it.

As you can see, all of our content in wrapped in HTML tags.

Most tags have an opening tag and a closing tag.

HTML tags can have what are called attributes on them

like the class attribute on this h1 here.

Attributes help us give the browser more information about how the tag should

work or look.

In this case, adding a class attribute is one way we can tell our CSS

which element on the page we want to add styles to.

We'll go into more detail about classes in a later video, but

right now just notice that our h1 tag has two classes, tag and name.

Now let's open up our CSS file.

We can see that a CSS file includes many HTML tags and classes.

These HTML tag names and classes tell a browser where to apply the style.

For example, here's that class that we saw assigned to our h1, this tag class.

You can see that we're assigning the background-color of tag to this number,

which is called a hexadecimal value, and is basically just code for

hey browser, display a light grey background color.

Let's delete this number and type blue and see what happens.

We'll refresh and

now the information that's between the h1 tags has a blue background color.

We've just used CSS to select a specific part of the web page.

An html tag and change its color.

And that is fundamentally how you can use HTML and CSS together to create webpages.

Learning HTML and CSS is a great way to get started with coding because it's so

easy to pick up the basics and start making your own webpages right away.

Throughout this course, we'll be learning the basic components of a web page and

many of the most common and useful HTML tags and CSS properties.

By the time we're done,

you'll have all the knowledge you'll need to start building web pages on your own.

So let's get started.