HTML Tutorial - Website Crash Course for Beginners

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.