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.