This is an HTML Crash Course. I'm Beau Carnes and I'm going to teach you the basics of HTML. Let's jump right into it.
You probably already know that HTML is used to create web pages. It stands for Hypertext Markup Language. Every website on the internet uses HTML and CSS.
Most also use JavaScript. In a website, HTML is the structure. CSS is the style, and JavaScript is the functionality.
Here's a great interactive diagram from code analogies calm, you can see we have the page, the structure, styling and functionality, and we move this slider. So it's like the house. So pages like the house.
So the structure or the HTML is like how many bedrooms or how many rooms, the CSS, the styling is like the color, the color of the brick here. And then the functionality of what you're doing like eating is the JavaScript, you can actually see the HTML that makes up any element on a web page by right clicking an element, and then going to inspect. And this, all this right here is the HTML.
In this crash course will mainly discuss HTML. Afterwards, you'll probably want to learn CSS and JavaScript. At the end of this course.
I'll also show you how to get your HTML page online using hosting or. com. to host the website hosting are provided a grant that made this course possible.
Hosting her provides web hosting databases, domains and other services. Before you learn how to write HTML, you have to make sure you have a place to write the HTML, a program used to write code or HTML is called a code editor. There are a few places you can write HTML online without installing anything, such as code pin.
io, or replique Comm. I'll quickly show you how to use code pin to write HTML, then I will show you how to install and use a program on your computer called Visual Studio code. I'm going to be using Visual Studio code for this course.
But you can use any code editor you like. If you already know where you're going to write your HTML, you can jump right to the part of the course where I start teaching HTML. So if you want to use code pen, which is the easiest way to get started, we can just go to code pen.
io, and then click start coding. So you can see there's a place for HTML, CSS, and JavaScript. But we're just going to be doing HTML in this course.
So let me show you an example. If I make a paragraph, and type in hello world, you can see that it appears right down here. And then it keeps updating automatically, you can see it updated with my mistake, and then I corrected it and then it went back to the correct way hello world.
So you can also just change move these stuff around, change the view. And this can make it a little easier to write the HTML on this side and then see the result on this side. Now I'll show you Visual Studio code.
If you just do a search for Visual Studio code, you can go right in here. And then I will click download, and the button will automatically download Visual Studio code for whatever operating system you're using. I'm not going to show the full download and install process that should be pretty self explanatory.
Once you get Visual Studio Code opened, it should look something like this, you won't have these recent files here. And also I zoomed in a little bit so everything's a little bigger on the screen. But you're going to want to click new file.
And now I'm just going to go to File, Save. And for the title, I'm going to type in index dot HTML and make sure you are in the directory you want. I already created a directory called HTML course.
So it's pretty standard to name your main file index dot HTML. In fact, web browsers will often look for a file with that exact name. When your website is loading up.
You can actually call your HTML file anything it could be called cats, dot HTML or new dot html. But it's generally good to stick with index dot HTML for your first file. Okay, you got a place to write the HTML.
Let's start writing HTML. In this course, you will learn HTML by creating a simple page. I recommend that you type along with me will create a web page line by line and I'll explain the key concepts as I go.
I'm going to first create an extremely basic HTML page and then I'll explain it okay HTML is made up of elements in element is an individual component of HTML. So this right here is an H one element, an element will often have an opening tag like this, and a closing tag, and it will contain everything within the opening and closing tags, you can see a closing tag often has a slash right in these angle brackets right before the name of the tag. So this is an h1 tag that's opening and closing h1 tag.
Most elements are container elements. That means they hold content between the opening and closing tags. For instance, it's this h1 element is holding the content, hello world.
But some elements are stand alone, like this one right here. And we'll talk about a few more later. This one right here doctype doctype.
html. This is what all HTML files are going to start with. This is the first element on every HTML page, it tells the browser to expect HTML and what version to use.
And this just means to use the newest version of HTML. And then we have this HTML element. So this is the opening tag.
And this is the closing tag. And all of this are the contents of the HTML element. All page content must be contained in these HTML tags.
And then we have this body tag here. So here's the opening body tag and the closing body tag. And here is the contents of the body, the body is going to contain all the visible content in a page, often above this body element within the HTML element, you're going to have a head element that is going to contain the page title and metadata.
We'll talk about that much later. So for now, let's focus on this the h1 hello world, the H in h1 stands for headings. So h1 is is an h1 element is used to define headings, and there's h1, h2, h3, h4 h5, h6, and the one is going to be the biggest Heading Two is going to be slightly smaller, three is gonna be smaller still, and so on.
So let's see what this looks like in an actual web browser. So I'm going to save this Command S or Ctrl S, or you can go to File, Save. And now I'm going to open this in a web browser.
To do this. To open it, I'll just find the file in my file browser. So here's my folder.
Here's the file, I just created index dot HTML, I'll just double click that file. And you can see it says hello world. That's the h1 element I just created.
Let me reposition these windows. That's better. Now I can see the HTML code on this side.
And I can see the web browser what the HTML is creating over on the right side. So I told you there are different types of headings like h1, h2, h3, I'm gonna create another heading. So h two, and I'm gonna call this cat photo app.
And if I save this, and then I refresh, you can see hello world is really big. And then cat photo app is a little smaller because it's an h2 element. Another common type of element is a p element.
A p element is used to create paragraph text on websites. So I'm going to create a p element, you may have noticed that the code editor automatically puts the ending tag, when I put the beginning tag, the code editor is automatically going to put the ending tag right in here for us. So that's pretty nice.
And you may have also noticed that the beginning and ending tag can be on the same line like the h1 element, or they can be on different lines like this body element. Okay, so right within this paragraph tag, I'm going to put Click here to view more cat photos. And if I save this and refresh, we can see the paragraph.
paragraph text is the main text on a web page that people read. Okay, now I'll talk to you about commenting. Comments allow you to leave messages without affecting the output displayed to the end user.
It's common in pretty much all programming languages to have comments. It also allows you to make code inactive. For instance, if we put this h2 element within the inside a comment then it wouldn't appear on the page anymore.
So let me show you how to add a comment. I'm gonna put less than sign exclamation point dash dash. And then the code editor automatically adds the end of the comment.
So here's the beginning of the comment. And here's the end. And whatever is in between these dashes is the comment.
So I'm going to put to do and link to cat photos. So this will just remind me to do that later. And now we can remove this h1 tag.
This was just an example. Because this app is really this website is actually a cat photo app. We don't need this hello world here.
But I save that, you'll see that the Hello World is gone. And also, the comment does not appear on the page. html five has tags that identify different content areas.
These tags make your HTML easier to read, and also help with search engine optimization and accessibility. We're going to identify the main section of this page by any main element with a main opening tag and closing tag. So right after the title, I'm going to put main, the code editor automatically puts the closing tag, I'm going to do Ctrl x or Command X to cut it.
So I'm gonna cut this closing tag and paste it right here. And this is a good time to talk about nesting. HTML elements are often nested within other HTML elements.
So on this page, we have this body element right here, this is the opening tag and ending tag. And inside the body element is all this stuff right here, which is nested, and the body element is actually nested within the HTML element. And we have this main element inside nested within the main element is this comment in this paragraph tag, what I'm going to do is select everything within the main element.
And I'm going to hit the Tab key that's going to indent all of the everything within the main element. indentation spacing, and new lines do not impact how a browser renders a page. But it can make HTML easier to read.
And the general best practice is to indent all nested elements. So you can see this is indented. And then this is indented.
And this is indented. So every sect, anything that's nested is indented within the elements that is nested in. And you can see when I select this, you can see these little dots, those are spaces.
So though I just click the tab button to indent this, and it just added two spaces before each line. So you could also just use the spacebar to indent those, this page is going to have a few different sections. So we'll indicate the first section by adding an h3 element with the text cat photos above the comment.
So I'm going to put h3 here, photos. And if I refresh, you'll see that we have this is the H two heading and this is the h3 heading, it's just a little smaller. Now we're going to make this look a little cooler by adding an image.
So right after this paragraph, I'm going to put an image tag. Now an image tag and image element does not have a closing tag, it only has an opening tag, it just has one tag. Most elements have an opening and closing tag.
But there are some elements that only have a single tag, they don't have a closing tag. But we are going to have to do something to specify what the image is that's going to display. And that's where HTML attributes come in.
html attributes are special words used inside the opening tag of an element to control the elements behavior. So let me show you how to do that in an image element. So in this image element, I'm going to put a space, I'm putting the space before the closing bracket.
And I'm gonna put SRC stands for source, the source of the image will be equals. And then I'm going to put a website here. So it's gonna be HTTPS, colon slash slash, FCC that I am slash FCC, re.
Relaxing cat. Now this is the URL of an image that already exists on the internet. So if I save this and I refresh the page, we see this cute relaxing cat right here.
So it's displaying this image and the source of the image is this URL, it's getting the image from that URL. So this is the attribute and attributes are always paired with values. There's always in the value here is this the value is always going to be in quotation marks.
attributes are selected from a predefined set of possible attributes depending on the element. So SRC is specific to an image element and a few other elements. And depending on the element, there'll be a different list of attributes that can go along with it.
But the values are more variable, they're going to be in quotation marks. And they could be lots of different things depending on what applies to the attribute. And we're going to add another attribute right now.
So after this attribute and value, I'm going to put a space and then this is going to be an alt attribute. So the value of this alt is just going is going to be a cute orange cat lying on its back. So an alt attribute is basically a way to describe the picture with text.
The text inside an alt attribute is used for screen readers to improve accessibility. And it's displayed if the image fails to load. So you should always use an alt attribute with every image.
Now we'll add an anchor element that will link to another website, an anchor element, or the A element can is used to create a link that you click on to go to a different page or website. So let me show you how to do that. It's just a four anchor.
And then we have the opening and closing tags. But we're going to specify what the website that we're linking to is. So to specify that we're going to use an attribute called href.
equals and then here's where we're going to put the website we're linking to. For this example, I'm just going to put cat photos, calm, cat photos, calm. And then inside.
So we have this opening tag and this closing tag. And whatever is in between the opening and closing tag of an anchor element is what the text is of the link. So I'm going to put cat photos.
So if I save this and I refresh over here, we can see cat photos. And I realize I forgot to put the HTTPS, colon slash slash. So we need that this part for the links.
And now if I save this refresh here, that click on and cat photos, this is not a real website. It's just an example website for this. So it just says it cannot be reached.
But that's how you create a link. Next thing is I'm going to actually put this link into this paragraph, see how we have the word cat photos here, I want the link to be right there. So I'm going to cut this out Ctrl or Command x.
And now I'm going to select this text cat photos, delete that Ctrl V to paste in the link, I save that and then refresh, we can now see that the link is right in that sentence. It's right in that paragraph. Now you saw when I clicked on this, it just opens right in the same tab.
But what if I want to open up into a new tab? Well, we need another attribute. So right in this anchor tag, I'm going to write after the href attribute, I'm gonna put a space and then add another attribute, it's going to be the target attribute, target equals underscore blank.
Now, if I refresh this, I click here, it opens up a new tab, the website still doesn't exist, though. Since this isn't a real website, we're not actually even going to use it here. I'm going to erase this URL here, and just put a hash sign or pound or a number sign here.
This will keep the text as a link, but it will no longer link to anything. It's just a placeholder. It's also often used when changing the behavior of a link using JavaScript.
So if I just refresh here, I click here, it still opens in a new tab, but it just loads the same website in that new tab. And we can turn this image into a link, I just have to put an anchor tag here, there's opening anchor tag, I'm going to copy the closing tag, I'm going to cut it and put it at the end. And now I'm going to put h ref.
And I'm just going to put in a placeholder link in here. So if I refresh here, if I move my mouse over the cat photo, you can see it turns into a pointer because it's a link. Now, if I click here, you can see nothing really happens because it's just the placeholder and it's not opening into a new, it's not opening into a new tab.
So it just basically refreshes the page, or really does nothing when I click there. It's finally time for a new section of the page. So before the closing of this main element, I'm going to add another heading and H three.
And this is going to say cat lists. And now we're going to learn how to create lists in HTML. The first list is going to be things cats love.
So let me add a new paragraph. This is things cats love. And then after this, I'm going to add an unordered list ul, this ul element is an unordered list.
And you can see I put the opening and closing tags on different lines. Because in between, we're going to put three list items. The first thing cats love are is catnip.
And then another list item is laser pointers. And the final list item is lasagna. And now I'm going to add after this list, well, before I add this next thing, let's check what it looks like in the browser.
So here is the unordered list, we see these bullet points and we see the three items. After this, I'm going to add an image of one of the things on the list. So put the image tag, and then I'll put that SRC the source of this image, instead of linking to a URL like the other image on the page, we're going to link to a file right on my computer, I'm just going to put was on dot jpg.
And then for the alt tag, is going to be who is on Yeah. Now before I refresh my page, I want to show you something. So in the same folder on my computer with my HTML file, I also have this lasagna dot jpg.
So as long as you have an image in the same folder as your HTML file, you can just link to it by putting the file name right in here. And then when we upload our files to our web server to host our website elsewhere, there's also going to be folders there. And we just have to make sure that images are in the right folder here.
So if I refresh my page, we should see a picture of lasagna, one of the things that cats love, in the description of this video, I have a link, so you can download the picture yourself to put it into your website. Now we're ready for another list. And this time, it's going to be things cats hate.
So this time, instead of using an unordered list, I'm going to put in an ordered list o l, and they're going to be three list items. The first item is flea treatment. Second list item is thunder.
And the third list item is other cats. Oops, oh I other cats. Let's see what that looks like.
So you can see the ordered list is numbered, we have 123 here of the things that cats hate, I'm going to add another image right below this. So image SRC in this image is called cats that jpg. All cats.
And just like before I have the link to this image in the description in this image is already in the same folder as my HTML file. So if I refresh here, we see three cute cats, which are things that cats hate. Well, at least according to this website, on the internet.
And as you know, you can believe most things on the internet. But cats don't just kind of hate these things. They really hate these things.
So around the word hate, I'm going to surround it in a strong element. So I'll put strong and this closing tag, I'm going to cut this closing tag and put it at the end of the word hate. So now, if I refresh this, you can see that this is bold here.
And we're going to do something similar for things cats love. I'm going to surround this in an E m tag to emphasize the word love, which is also the same as italicize. So if I save this and refresh, we can see things get love.
And we have italicized here. Now we're going to add another common thing on website, which is a form. So we're going to add a form element with an opening with an opening and closing form tag.
So right after this image, I'm going to put form and then I'll put those on different lines there will indicate where to submit the form data by adding an action attribute on the form element. So it's gonna look like this. action equals slash submit cat photo Just like that.
So now when you submit this form, we still have to add the submit button. But once we do when you click the submit button, it will submit all the data to that URL. Now, we're not going to actually create that part of this website.
This is just a basic HTML Crash Course. So we are not going to do anything to handle this form data, I'm just going to show you how to create the form. And you'll have to look for another tutorial to learn how to create the website that handles that form submission.
But the first thing in this form is going to be a text input element. So right here, I'm going to put an input element, and I'm going to add a type. And the type is going to be text, this is going to make a text box.
So if I save this and refresh over here, we can see at the very end, this text box, which I can put all these any, any text in this text box down here, input elements do not need closing tags, we're going to add placeholder text to this input. So this is going to be another attribute place. place holder equals cat photo URL.
So placeholder tags, you're just about to see what that is. But it's this light gray text that appears in the in this input box until you start typing. As soon as you start typing, it goes away.
So that can indicate what's supposed to go into the input box. Under this input element, I'll add a submit button. So this is going to be a button element.
And it's going to have a type of Submit. And this is this is going to have a closing tag opening and closing tag. And whatever text you put in between the opening and closing tag of a button is going to appear on the button.
In this case, we'll have it say Submit. So if I save that, and then I refresh, we can see that there's a submit button right here. Now if I click the submit button, remember, we haven't implemented what happens after you click the submit button at that URL.
But that's how you would submit the data. Clicking the button will send the data from the form to the URL we specified in this action attribute up here. Let's make it so it's required to put it in the URL before we can click the submit button.
That's pretty simple. Just in this input to make that input required. I'm going to put an attribute required.
Most attributes have values. But in this case, this does not have a value, it's just the attribute use that to put the word require doesn't have to equal anything. And now if I try to click the submit button, it says please fill out this field.
You can use radio buttons for questions where you want the user to only give you one answer out of multiple options. Here's how you put a radio button, we're going to put two radio buttons for an indoor or outdoor cat. So right before this text box, I'm going to put an input element.
And that type this time is going to be radio. And then I'm just going to put indoor. And then I'll put another one input type equals radio.
And this is going to be out door. I save this and refresh. You can now see indoor and outdoor.
Right now, if you click on it, they both stay clicked. So we're going to eventually make it so when you click on one it unclicks the others you can only have one clicked at a time. We also want to make it so when you click on the text, it will make the button clicked.
To make the text also click the button we're going to nest everything within a label element. So I'm going to put a label and then this closing tag, I'm going to cut that and put it at the end here. And you can see it does.
Go to the next line. And then I'll put a label here. And then I'll cut this label and then put it here and I'm going to save and refresh.
And now if I click the text outdoor, the radio button clicks click the text indoor the indoor button clicks. All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group selecting any single radio button will automatically the Select To the other buttons within the same group, ensuring only one answer is provided by the user.
So I'm going to add the attribute indoor outdoor to each radio button. So here it goes right here, I'm going to put name, indoor, outdoor. And since I'm adding the same one to every radio button, I'm just going to copy this.
And I'm going to paste it. Now if I refresh, we have indoor. So when I click one, the other one D selects.
Next up, I'm going to add an ID attribute to these buttons. an ID attribute is used to identify specific elements in other sections of HTML, CSS, and JavaScript. So I'm going to add an ID attribute set to equal indoor on the first real input element.
And Id attributes have to equal outdoor on the secondary input element. So I'm going to put the ideas I'm going to put as the first attribute ID equals indoor. And then ID equals outdoor.
Now one thing about these attributes is that the order doesn't matter. So you can see on this input element, there's three attributes, there's the ID, the type and the name, the order doesn't matter. I could have put name, type ID, or type ID name, the order doesn't matter.
So it's as long as you have a space in between each element, or each attribute, it's going to all all work, it's considered best practice to set a four attribute on the label element with a value that matches the value of the ID element of the input element. This allows assisting technologies to create a linked relationship between the label and the child input element. So let me show you how you would do that.
It's very simple. So for this label, I'm going to put four and that's going to be set to the same thing as ID, which is indoor. So now we know that this label is for this input, because it has the same the for indoor, oh, but I door indoor.
And we'll do the same thing right down here, for out door, and racist extra space. So yeah, now we know this labels for this input, I'm going to actually zoom out a little bit on the code. So you can see more of what's going on.
It doesn't it doesn't go to the next line as much doesn't wrap to the next line quite as much. Now, none of this stuff, we did actually change what the web page looks like. But we are just about to change something, you can see everything's on the same line, indoor outdoor, and this text, this text box are all on the same line.
This is because line breaks in HTML have no impact on how a browser renders the page. To add a line break, we're going to use the br tag for break. So after this first indoor one I'm going to put BR and I'm just going to copy this.
And I'm going to put a br tag after each of these input elements. And if I save that refresh, now you can see we've indoor line break, outdoor line break, and then the text box. And then there's another line break and then the submit button forms commonly used checkboxes for questions that may have more than one answer.
The code for a checkbox is very similar to that of a radio button. So let me show you how to add a checkbox, we're going to add a check box to check if a cat is loving or not the personality of the chat the personality of the cat. So here, I'm going to put a label just like the radio buttons, and it's going to be for loving.
Then I'm going to put the input element and input elements going to have an ID of loving. It's going to have a type of check box, Matt add some more quotation marks here. And is going to have a name of personality.
And then I'm just going to have to put the word loving that's the word that's going to appear. And you know, let's just make this consist we'll have this have a capital I capital O. Okay, let me refresh.
And so we've been indoor, outdoor, and we can check loving, we can check it off and on. Let's add a line break here. And then I'm going to add two more checkboxes, I'm just going to copy this checkbox.
And then put two more in here. Now I'm going to add some line breaks in the HTML, which will not appear on the website. This is just to make it easier to see the difference.
So we have the radio buttons, and we have the three checkboxes. But we're going to put some more personality traits. So this one is going to be lazy, some cats are lazy.
And the next one is going to be energetic, and energetic. Now let's save this and refresh. So now we can see the radio buttons, we have these checkboxes where you can check any number of things.
And we have this text box where you can type in stuff here. To set a checkbox or radio buttons to be checked by default, just add the word checked to the inside of the input element. Let me show you.
So we have this input element right here, I'm just going to add the word checked. This is an attribute with no value. So we have checked there, and then I'm going to add checked here.
I can spell it. There we go, refresh. And now the indoor is automatically checked and loving is automatically checked.
We're getting close to being done with this page. And I'm finally going to tell you about one of the most commonly used HTML elements of all, which is the div element, also known as a division element. It's a general purpose container for other elements.
One of the reasons it's used so much is because div elements are often used to target with CSS. So you may want to style a whole section of your web page in one particular way. And you can wrap that all within a div element.
And then you can use CSS to style that div element. So we're going to put our lists in a div element. So I'm going to put an opening div tag here.
And then we have the closing div tag, I'm just going to cut this, I will actually zoom in on the code just a little bit more. And at the end of things, cats hate the end of this other list, I'm going to put the closing div element. Now I'm going to indent everything in here.
So you can see it's nested within the div. So now we can see that inside this div, we have the things cats love, and that things cats hate. So the way that you would often style something like this with CSS is to add a class attribute.
So I'm going to put class equals lists. Class attributes are very commonly used in HTML, specifically to style with CSS. So you can actually target all elements with the class of lists to make them have all the same style.
So maybe you went everything with the class of list like this to have a blue background. Or maybe you want to border around everything. Or maybe you want all the text to be a different color, or the text size we different.
And you can in the CSS, you can actually target anything with the clip anything inside a div with class lists can have a certain style. Now, we're not going to go too far into that, because again, this course is just about HTML, you'll just have to look at an S CSS course to learn more about that. So now we're going to add a footer to the web page.
So we have the main section, we hit the closing main tag, I'm going to add a footer element. Now, the stuff inside a footer element is not going to look any different on your page. This is mainly for screen readers and SEO purposes.
So so the different sections of your web page can be identified. And inside this footer, we're going to put a paragraph tag, it's going to say no copyright free code camp. org.
So if I save this and refresh, we can see no copyright free code camp. org and we can make this into a real link by putting a href equals http colon HBS colon slash slash, Free Code, camp that org and then I have to put this closing in element, the closing tag after the Free Code camp. org text here.
So they save that and refresh. Now we see this is now a link to Free Code Camp that org. And one other thing I want to show you is that we could style a lot of times the text and a footer is smaller.
Now we could style that with CSS, or we can just put a small tag around everything. So when we put the closing small tag at the end here, and save that, if I refresh, you can see now this text is a little smaller. Now let's go all the way back up to the top of our HTML page.
And we'll look at this HTML element, you'll notice that everything is inside the HTML element. And inside this, we are going to specify the language of the website, we want to specify that this isn't in English. So up at Lang equals e en for English.
And I told you earlier that before the body section of a website, you'll often have a head section of a website. And so let's add that now. Got the head section, the head section is where it where metadata elements go sub sub that's not going to actually show up in the content of your website.
Things such as link meta title style. So let me give you an example. One of One very common one is title.
So I can create a title for this website, I'm going to put cat photo app. I'm going to save this and see how here it says index that HTML if I refresh, now it says cat photo app sitting that right from the title here. Another thing that's common to use in the head, or to put in the head of a website is links to the external CSS file that's going to be used to style the page and the external JavaScript file that's going to be used to add functionality to your page.
And actually, that's it. This is a complete HTML page that we have created. So the next step is to update this to our web hosting provider.
So we can actually get this website on the internet. so other people can go to a URL to access this website with hosting, or you can deploy websites directly. If you haven't learned tools like Git and Linux yet, this approach can save you a lot of time and stress, start off by going to a hosting or.
com. And you can click Start now or just scroll down. And I would recommend if you're just starting out, just go with the cheapest option the single shared hosting.
And we'll just select that. And then you just go through this checkout process, choosing the options you want, you'll probably I would recommend the 12 month option. And then you just put in your payment information.
I'm not going to show you the full account creation process. But after you get your account created, you'll get logged in, it's possible during the account creation process, you will have chosen a domain name. If you haven't, there could be a button on this screen to create a domain name.
So if I scroll down, I can see at the very bottom amazing cat photos. com, the domain name I got for our awesome website that we just created. So to upload the photos to the website, we'll have to go to hosting I'm going to go to this menu up here and click hosting.
Now amazing cat photos calm I'm going to manage the hosting. Okay now we just have to scroll down to this file section and I go to File Manager. So now I'm going to make sure to go into the public HTML directory and there may be something in this folder if there is just delete it so you have nothing in the folder.
And now I'm just going to add my files I can either drag them in from a folder on my computer, or I can click Upload Files. And I was going select the files so here are the three files index dot HTML cat JPG and lasagna dot JPG and open and upload. And it's as simple as that the website should now work you may have to wait a few hours if you just create a your website.
Sometimes it can take a few hours from x from after you buy your website until when you can actually go to the URL and it will go to these files. Sometimes it can even take a day. But once everything connects and everything works, then if you make any changes it will happen instantly.
Just the first time when you get set up it could take a little while. So let's try going to the website. So I'll go to WWW dot amazing cat photos calm.
If you try and it doesn't work you may have to hit you may have to add the www That at the beginning of the URL so www dot amazing cat photos calm and this is the website we created awesome hosting are made that super easy. Okay you know the basics of HTML. The next step is to start learning CSS and JavaScript.
Well thanks for watching.