Building your HTML

The first thing you’re going to want to do is open up your code editing program. For me, I’m using VS code, which is stands for Visual Studio code. The first thing you don’t want to do is open up file open folder and navigate to your website directory. If you have not created one, simply just create one on your desktop for now. Alright, let’s look folder. So the couple things that I started off with, I actually started off with images, as you can see here, for my SpongeBob website, but all my other folders are empty. So the first thing you’re going to want to do is create a index dot HTML. This will be the living space for all your HTML. So right click, hit New File and you index dot HTML. Perfect. And the first thing that we’re going to want to do In this file is set up our HTML properties. So for us, we’re going to do doctype. html. This, this is actually being used for html5. Next, we’re going to create a line called HTML. And we’re going to add some spacing as this as this code editor automatically fills in the appropriate fields. Next, we’re going to hit tab and type in head. And again, some spacing. Inside here is where we’re going to actually link in our icon and our stylesheet. So first, let’s go ahead and create that style sheet. Right click on CSS folder and type in style dot CSS. Perfect. So back over here, let’s go ahead and create that link for icon And then also your style sheets. Perfect, we can close that. Great. So now we have our stylesheet being loaded in externally. So if we open our index dot HTML, we’re going to notice we open it, it’s just a blank page. So let’s go ahead and bring this over here. We’ll merge that over. There we go. Great. So now we can see by refreshing the page, we can start seeing things in real time. We’re also going to use this nifty tool called the inspector or developer tools in Chrome. So just right click In hit inspect or Ctrl Shift I. Inside here you can see my code is just right here. And then you have the body and the notice by highlighting, it highlights at the top in orange, that’s going to be critical for us debugging. So let’s go ahead and do the next line. Now if you remember from the scaffolding, we have the body and then we’re also going to have an h1 and then some more things inside. So let’s create a header first. Oops. Now if you want to be very clean, and concise, let’s add a commenting section here. So all you have to do is add cursor arrow, exclamation dash dash header. And that would automatically be your comment. So if someone’s reading your HTML, they’re going to see that showing up. So next we’re going to add in a href anchor. So what an anchor does is kind of like a blink, it’s going to link either out to another page. But in this case, we’re actually going to tell it to be a down arrow to to scroll down the page. So let’s use an ID to make it callable. And we’re going to use the main tag. Now for right now the main tag doesn’t exist. So just give us a moment and we’ll go ahead and create that. So we’re going to add an image, image source. And we’re going to use that image arrow. Now, make sure that you add an alt text This is for screen readers. And for people who cannot you know who are blind We cannot see things easily. This will be the alternate text for them. Next, we’re going to close out this h1 like so. Great. Now if we hit refresh on this page, we have an arrow. Awesome. And you can see that the mouse cursor makes it selectable. But it doesn’t do anything just yet. So let’s go ahead back to our HTML. And we’re going to get to the awesome fun part called main. This is where we’re going to house our entire project. Okay, now we’re going to create a div. And we’re going to call this product because remember, we’re making a product page. Inside here, we’re going to do an h2 reference. Let’s call it’s fun Bob Square Pants battle. For Bikini Bottom, rehydrated. Make sure you close out that h2. Next we’re going to add a paragraph. And we’re just going to simply type in. Are you ready, kids, the cult classic is back. I’m just going to copy and paste the rest of it as we don’t need to type all that out. And then make sure you close out that p tag again, that paragraph. Next we’re going to add an image. So again, Image Source equals image SpongeBob dot jpg, and we’re going to alternate name for that is logo. Make sure you close that out. Great. So let’s go ahead and refresh the page and see what we got. Wow. Much, much better. So don’t worry that it’s starting to look a little funky, we’d still have to apply CSS to the site. Next, we’re going to create another h2. And this is going to be another title for us, and we’re going to call it features. This is going to be the features for the game. Now, what we want to do is create a list. In this case, we’re going to create an ordered list. And you’ll see visually what this looks like in a moment. So of course, you’re going to add in oh well at the top, and then Li is going to be below it and we’re going to do is create multiple versions of these allies. So let’s first type in what our first feature of the game is. Much let’s make a copy of this. And since I know that there’s going to be three features, let’s go ahead and duplicate it and then paste in the next scene and the next piece. rate. If you want to see what that looks like, let’s refresh the page. And fantastic now you have an ordered list 123. If you would like it to be a regular list, don’t worry, we’re going to get to that very shortly. Next, we’re going to create another h2 and call it characters in the game. And again, don’t forget to close out that h2. Now we’re going to get to a structure called just or sorry, we’re going to get to a list. This is not ordered list. This is just going to have bullet points. So here I’m going to link it out to SpongeBob fandom page. So in this case, I want to link it to Patrick Star because he is one of the characters of the game. And we’re gonna call it Patrick Rick star Don’t forget to close that out. Perfect. So let’s make a copy of this again and we’re gonna make a few copies of this. And we’re just gonna fill in some more details. Got Squidward, Mr. Krabs all these great characters, so let’s just rename some of these Squidward tentacles. And Mr. Krabs All right, make sure again that you close out that list and let’s save And while Ah, there you go. Now if I click on this, it’s actually going to take us to a separate page. Now, or sorry, the same page. So if we want it to be a separate page, we can either alternatively click right click and do open link in New page. Or we can actually tell it in here to do it on its own. So we’re going to type in target tab. Wow, there we go, opens up a new tab and we can go back to our regular page at any point. So let’s go ahead and leave that for now. We’ll be the first one as a tab. Now the last bit that we want to add under the main section is a slider. We want to visually show off some of the cool pictures of the game. So we’re just going to call this a class and make it a slider. Now, again, make a new class, call it slide. And then we’re going to use this new html5 implementation and call it data background. And this is going to be our background images that load in. Fantastic. We’re going to do this for more time. So I am going to just paste in four more times. Great. Now that should be it for main. But now what happens if you look at this page? Well, shoot. It’s not loading that slider, huh? Well, it turns out we don’t have CSS and JavaScript enabled. But if you go down here, you can see that it exists. It’s just not able to be viewable in the HTML Page. However, if you look over here, you can see, hey, my h2 up here is highlighted. And I can make changes over here. We’re going to get to that in a moment when we get to the CSS. So back to the HTML, we’re going to create a new we’re going to create a new class or new, we’re going to create a footer. Now the footer is going to be kind of like at the at the now the footer is going to be at the very bottom of our page, and it’s going to tell us like the copyright information. So again, let’s make footer paragraph. This site was created during any wheelchair course by I’m going to add it a href because we’re going to link to my personal website HTTPS Adrian for And inside there, we’re going to make it say Adrian crisanto. Perfect, we’ll close it out. Fantastic paragraph, we’re going to actually want to have that copyright symbol. So we’re going to do ampersand copy 2020. Now, if we save out this page, perfect, you can see it down here. And if we click on this, it’s going to take you to my personal site. Now there’s one other piece that we need to add. And that is the scripting for JavaScript. We haven’t created it yet. So let’s go ahead back up to the J s folder, right click and create a new file called main dot j s. We can leave it blank for now. Now back to the HTML, we’re going to do a tag called script We’re going to make it a type text JavaScript source equals j s dot main dot j s. We’re going to close that out and that’s it. Great. Our website is nearly complete.