Now, there are two items that you're going to need no matter what kind of operating system that you're on. The first item is a browser, but since I'm assuming you're watching this video in a browser, I'm assuming you already have that.

Now, the type of browser is also important. I personally prefer and recommend using Google Chrome, and the main reason for that is because Google Chrome offers some great developer tools.

Now, if you've never seen them before, the way that you can test them out is, if you come and right-click on any element on the page, then click on Inspect.

What this does is it brings up the actual HTML and CSS code right here, and you can play with it. You can see that on this Visual Studio code page, it selected this message element, and if I come here on Element Style, I can say, "Color," and then I can change it to red.

Then I could say font size and change it to 2em and you can see that I've actually altered the code right here and I'm able to see what this would look like in a different color and also a different font size.

Now, this does not change it on the visual code servers. If I hit refresh, you'll see that it goes back to normal. So what I just did was temporary, but this is very helpful when you're building out websites because it gives you the ability to make small changes and see what happens on the page. So, that's the reason why the browser that you choose is important.

Now the next item that you need is a text editor. There are all kinds of editors on the market. Some are free, some are paid, some are what are called IDE's, which stands for a integrated development environment. What we are going to use is just a very basic one, but it has a lot of features, called Visual Studio Code. It's completely free and it also works great on all the platforms.

So if you're on Mac, Windows or Linux, you can use Visual Studio code. You can get it for free by going to code.visualstudio.com and then just click on the green download button.

Now, I already have it installed, but all you need to do is click on download. It's going to download on your system and then you can double click that installer, run through and just add all of the defaults, there's nothing special that you need to add.

So just install it on your system and then when you open it up, you should have a program that looks like this.

Now, if you're opening that up for the first time, you've never used it before, then there might be some other text and instructions, but you can just ignore those.

Right here, we're just going to create our very first ever HTML document and we're going to see how we're able to open it up in the browser. So the way you can do it is by going to file, new file.

You can also hit control + N, or if you're on Mac, you can hit command + N. Then this is going to bring up a new file. Now, I'm going to hit save, so control + S. You could also go to file and then just go down to save or save as. And I'm going to save this on the desktop, you want to change the entire file name, you don't want this .text.

So I'm going to say index.html. Hit enter and now you can see that Visual Studio Code has actually changed the little icon here so that it's telling you that it understands this is HTML code. If you come down to the bottom right hand side where it says HTML, what this means is that Visual Studio Code is going to give some very helpful syntax highlighting.

And all that means is that as we're typing, it's going to pick up and give us some ideas for the type of code we want to write and it's going to show some of the different elements with different colors. It's a very helpful thing, especially as you're building out websites.

So I am going to build our very first website here. So I'm going to just say hi there. Now notice I'm not wrapping this in any other code. I'm just typing hi there and I'm going to hit save. Now, if I come back to the browser, I can hit control + o and that is going to open this up. If you're on Mac, it's going to be command + O.

Then go and find that file that we created. So, you can see right here. I have an index.html file

and if I hit open, you can see it says hi there.

So, we have created our very first web page. Now, it's not very exciting and there's a little issue with it. If you come to, let's just go to a demo site right here and click on view page source,

you'll see that we have all kinds of code here.

It has all of these different kinds of tags. It starts at the very top where it says DOCTYPE html, then it has all of the code underneath that. Now, that's what is required for this to be valid html, what we wrote is something you can see here, but it's technically not HTML. The browser is just taking a glob of text and it's opening it.

So let's fix this and let's build out our full, fully functional HTML page. So I'm going to get rid of this Hi there and if you're using VS code, it has a very helpful tool built into it called Emmet.

What that does is it gives you some auto complete features. So if you just start typing HTML five. Then what it's going to do is it's going to give us the ability to complete all of that base HTML code that you need. So right here you can see where it says HTML and so what you have here is it's called the simple HTML five starting point.

So you should just have to type that in and this little pop up should come up and say okay. Would you like to use the simple HTML starting point? You also have a few other options here. So if you click on HTML:5, it's going to be very similar.

Now, depending on the version of VS Code you have, these might look a little bit different and that really doesn't matter, what I'm doing is just a shortcut. After I click on that, you can see that it gives us all of this code automatically.

Now, some of this you're not going to need whatsoever, and I'm going to walk through line by line exactly what's needed and what's not. If for some reason you don't have that emmet auto complete, then you can just pause the video right now and then go and type out all of this code. Or you can get it from the show notes.

Now, let's walk through what is happening here because this is very important in understanding HTML and seeing exactly what's on the page. So, at the very top, what we're doing, this is called the declaration. This is a HTML document and we are saying that it is going to use HTML code inside of it. Obviously as you could see earlier, the browser doesn't need it to render the text, but if you are going to be building a web page, this has to be your very first line.

The next one is where we're going to be including all of our HTML code inside. Now, whenever you see these little greater than and less than symbols in HTML, what this means and what it's called is a tag. So you're going to be using tags throughout any type of HTML that you build out, any web pages are all going to use tags. So you have a beginning and then you have what is called a closing tag.

So at the very beginning tag, you can see it's just using the less than symbol then the HTML word and then it closes that off with the greater than symbol. Then everything inside of this, all the way down to the bottom is going to be inside of that tag.

So everything, this head, this body, all these elements, they are what are called nested inside of the HTML. Now whenever you use a closing tag, it's going to look almost identical except you're going to have this slash right in front of it and that's how you know that it's a closing tag.

Now moving down, you can see that inside of the HTML, we have what is called a head tag. And we have the beginning of the tag and then we have the closing tag. Then if you hover over your VS Code gives you a little bit of it's own tutorial.

So it says the head element represents a collection of meta data for the document. Now if that sounds weird to you and you don't understand it, don't worry. What that means is that all of the code that is placed inside of your head tag is, it's kind of invisible. It's invisible to the user.

So if you go to a regular website like we have right here,

this has a head tag. However, you don't actually see it unless you go and you view the page source and you can see you have your head tag right here.

So this does things like gives you the ability to implement custom fonts and it calls your CSS files. So it's a way that you can set up the way the document is going to work, but the users don't actually see it. So that is what you use the head tag for.

Moving down to line four, you see where it says meta and then charset utf-8. What this is, is this is what's called a meta tag and this gives you the ability to define some more information and some rules that you want the document to follow.

So right here what we're saying is that the character set, meaning the content inside of this HTML document, is going to conform to this kind of encoding, utf-8 encoding. So what that means is that you have all kinds of different encoding out there. So if you want to use emojis or if you want to use foreign characters or anything like that, then this is where you're going to define the type of encoding that's used.

I would say that, assuming that you are building websites for a US based audience or a UK based audience, you're just using standard English, then utf-8 is perfectly fine. If you're having to use other encoding, then you're going to have to change it. But for everything that I use for the most part, this is the encoding that gets used.

Now, the next meta tag here is what is called a http equivalent tag. And what this is doing is, if you have ever seen a website that looks different in one browser than another, then that is what this meta tag is addressing, specifically internet explorer. So for years and years, when I've built out websites, starting a very long time ago, internet explorer kind of had their own rule set when it came to how it was going to interpret how a website looked.

Its gotten a lot better through the last few years, but about, I'd say, five, ten years ago or so, you'd have to almost build an entirely different website for Internet Explorer. You'd have to have all kinds of other tools that would be put in and other rule sets. So what this meta tag does here is, it just says that we want to use the compatible mode with Internet Explorer.

Now, I'm giving you that information just so your aware of it. For the purposes of what we're doing right now, I'm just going to get rid of it. It's not necessary for what we're doing and I don't use it on most of my applications. But, I will tell you whenever I see anything like that, I'm going to give you a heads up because I'm assuming you're going to be working on other websites and you may need that. Or you may see it and wonder what it's there for. So I'll still mention it.

Now, the next line here is our title tag. Now you will notice that it starts off just like the HTML and just like the head tag. So you can see it has a beginning tag and a closing tag. So, if you want to say that this is My Cool Website, that is going to be the title for the document.

And if you go to the actual browser page, so now let's some back to our index.html and let's hit refresh right here. Do you see here at the very top where it says My Cool Website? That is getting pulled in from the title tag.

So if I want to say My Cool Website and then say again. And now come back, hit refresh, you can see it says My Cool Website Again. So whenever you want to change the title up here, this is what the user sees when they look up in their tabs, the title tag is where you are going to do it.

Now moving down to line six, this is the meta tag for the view port. Now what the view port is, is this gives us the ability to make our sites responsive. By responsive, what I mean is that it will look one way on a smartphone, but it will look completely different on a different device, such as being on the computer or a tablet. So if you want to see this application here, if I open this up in a new browser, you can see this is exactly how it looks when it's in desktop mode.

If I shrink it, this is the way it will look when it's on a tablet.

If I shrink it even more, you can see how the entire site adjusts and now the navigation bar is stacked on top of itself.

These items are stacked on top and now everything is sitting exactly like the way you'd want on a smart phone.

That is what the view port allows you to do, it's to implement the ability to know how wide and how tall the browser is so it can adjust if it's on a different device, so we're going to keep that one in there.

Now, the next two are ones that I'm going to remove because they're not needed, but we will later on get into what these represent. The very first one is a style sheet import link. So what this does, and you may notice this is whats called a self closing tag. So we have a link that starts out here, but instead of having something like we did with the title where we had a closing tag that was separate, the link tag actually is just one tag.

So it goes from all the way from the left all the way to the right. It doesn't have a closing one, it has a slash right before the greater than symbol. So this means, and it's what is called, a self closing tag. It's just using one.

And what this does, is it imports the style sheet. We're not going to worry about it now and we will get rid of that for the moment, but when you want to import a third party style sheet or you want to have a dedicated style sheet, this is the way that you can do it.

The same thing here, this is how you can import JavaScript code.

<script src="main.js"></script>

So now that we've done all this, we've cleaned up our head tag and nothing is on the page. So if I hit save and come back here, this is what we opened up. If I hit refresh, nothing's on the page and the reason for that is we have to add content.

Now, content goes inside of the body tag. So, if I open this up and I'm going to use a heading. So this is going to be big, so I am going to have a heading tag that says Hey from HTML. You may notice here that this heading tag has a start and a close and then I'm putting the content inside of that. If I hit refresh, now you can see it says hey from HTML.

So you're still rendering something out into the browser, but now it's actually valid HTML code because you have this doc type, you're letting the browser know that we're going to be opening up an HTML file. And then you have your head tag and then your body tag where all of the content is going to go inside.

So in review, we walked through the different tools that you need in order to get started with HTML and CSS and building out websites. And then also, the structure and the basic structure for building out a website.