Original subtitles

So before we start this basic HTML

and CSS Crash Course,

let me tell you again that you should only take this

if you have no knowledge about HTML and CSS at all.

So if you do, then just move on to the next section.

But for the rest of us let's now get started

and learn a little bit about HTML structure and elements

And let's start by creating a new product folder here

on the desktop, which I'm just gonna call HTML CSS.

And in this section,

we're actually not even gonna have any starter files.

So we're just gonna create everything from scratch. Okay?

So let's go back to VS code

and open this newly created folder.

And here we go.

So let's open up

or actually let's create an index.HTML file.

An index.HTML is always the name of the main file

in any project. Okay?

Let's hide this sidebar here

and I'm gonna use command + B for that,

or control + B on windows. Alright?

So HTML stands for hypertext markup language

and we use it to describe the content

of web pages basically.

And an HTML document is made out of elements

and we write elements using an opening

and closing tag.

The main element in all HTML documents

is always the HTML element.

So we write HTML and then VS code automatically gives

us the closing tag.

So you'll see the closing tag has just

the same name as the opening tag,

but then it has this slash here to close it. Okay?

So every HTML document always has to start with

the HTML opening tag and then close with

the HTML closing tag.

Then inside the HTML element

we always have to head and the body.

So let's write that head and body.

So this is always the structure that we use in HTML.

Now, whatever we put into this head here

is basically like the settings of the page.

So it's like describing the page.

For example, with the title.

So for that, we use the title element

and let's call this one learning HTML and CSS.

And then once again VS code automatically gives us

the closing tag here.

So this title here is what's gonna be visible

in Google Chrome.

So basically this title of the page right here. Okay?

And you will see that in a second.

Other things that we put here in this head

which is again like the settings of the page

is CSS styles or FATF icons.

So that little icon that appears here in browser tabs

and stuff like that.

Then whatever we put into the body

is what's actually gonna be visible on the page.

And let's start by adding a heading here. And for that,

we use the H1 element.

And this is a level one heading. Okay?

so you have H1, H2 all the way to H6.

And they will have different styles automatically applied

by the browser. Anyway, let's now give it to your title.

And let's say, "JavaScript is fun,

but so is HTML and CSS."

So just like before, we put the extra content here

between two tags. So the opening tag,

which is H1 and then the closing tag

which is this /H1 to close the element.

And different types of elements have different purposes.

For example, H1 is to describe a heading.

But we have other ones.

For example, we have the P element to describe a paragraph.

So let me show that as well.

So that's right. And a little bit longer text here.

So you can learn JavaScript without HTML and CSS,

but for dumb manipulation

it's useful to have some basic ideas of HTML and CSS.

And of course the texture doesn't really matter,

It's just that we have some content on the actual page.

And speaking of the page,

let's now actually preview it here in Google Chrome.

And for that let's use the live-server tool

that we installed in the previous section. So for that,

I'm gonna use the integrate a terminal

by hitting control + /.

Okay. So again,

this very weird shortcut

or I can also do it from the menu.

So that's gonna be new terminal down here. Okay?

Then I can clear the terminal from all

this weird stuff with command or control + K.

And so now it's a bit cleaner.

Again, it's not important at this point

that you really understand everything about the terminal.

We will learn really a lot about it kind of by the end of

the course. For now, all we want to do

is to use the live server, just like we did

in the previous section.

So when we hit enter on this,

this will now open up the page

in this Chrome window here,

and indeed here we go.

And you can already see that

the browser applied some basic formatting based on

the type of element.

So this H1 here is way bigger and bolder than

the main text down here, which is this paragraph, right?

And let's add another paragraph here

so we can see it appear on the page as well.

So P again, just another paragraph.

So when I saved us now,

the results should automatically appear here

on the right side.

And here we go.

And again, as I told you in the previous section,

if this life server is not working for you,

then that's no problem at all.

You can always just open the HTML document itself.

Anyway, let's take a look at another heading here.

So as I was saying, there is not just H1,

but also other type of headings.

So let's simply put one here.

So let's say an H2 another heading.

And so as you see this one here is a bit smaller

than this one.

And if I would change it to an H6

and you'll see automatically it changed the six here.

And that's because of an extension that I have.

I'm not sure if I showed it to you in the last section.

So that extension is called the auto renamed tag.

And the one that automatically closes a tag that it opened

is this auto close tag extension up here.

So these two extensions that I have here,

they are very useful for writing HTML.

Okay.

And here you already saw this reloading.

And so you see that H6 is actually even smaller

than the paragraph text. Okay?

So you see that these elements

which are composed of an opening and the closing tag

are really used to describe content in this way.

Now, of course we can do a lot more

than just headings and paragraphs.

For example, links or images.

But for that, we need to learn about attributes.

And we're gonna do that in the next video.

Now, just to finish this lecture,

I wanted to show you that we can actually create

this bare bones structure of HTML

in a very easy way in VS code.

All we have to do is basically type ! + tab

and like magic, all of appears.

So we still have the HTML tag and in there

we have to head and body just like we had before.

The difference is that we also got this doc type here,

which essentially identifies

this document as being HTML five.

And we also get this language here on HTML.

So in this case,

it's telling the browser that

we're using the English language.

Here is some other stuff that's also important

but I'm not gonna go into now.

And then here is the title that we just specified also in

our document up here.

So now I will just go ahead

and take this content and put it here in

this structure because it's actually a more complete.

So just take this and cut it,

put that here,

delete all of this, give it a save

and let's put this one here back to H2

and here we go.

Actually, we can close this one and alright.

So see you in the next lecture

were We're gonna talk a little bit about attributes

and classes and IDs.