HTML Project
Alright, so now we've learned the basics of HTML and we've made ourselves a little web page to practice writing code for the first time! Once you've gotten comfortable with indenting, opening and closing tags, and have a sense of what elements to use for what kind of content, it's time to get started on the first step of building out our game page!
Your end goal today is to have a website that looks something like this:
It might not look like much yet, but HTML is all about the structure of your page and the content you want to showcase. The design and bells & whistles will come later when we start working with CSS and JavaScript.
This is your game page, so feel free to add whatever elements you want to make it yours! Use the boilerplate code provided below as a jumping off point - we've included the basics to get you off and running, but feel free to customize whatever you want.
Getting Set Up
Step 1
Create a new folder by highlighting the main folder on the left and click "create new folder" and name it whatever you want. This is going to be where we house our main project for the next few days.
Step 2
Create an index.html file in your project directory. It's important that the file is called index.html and not INDEX.HTML or Index.html! You should see something like this in your editor, note that the index.html file is indented in from the my_game folder on the left, which tells me that it is properly placed INSIDE that folder.
Step 3
Let's prepare the skeleton for our game page! Try to resist the urge to copy and paste, and instead type this code out in your own editor. You can change the text in <title></title> and inside the <p></p> tags to make it your own, but make sure you leave <div id="game"></div> in it's entirety.
<!DOCTYPE html>
<html>
<head>
<title>Sarah's Game</title>
</head>
<body>
<p>Hello from index.html!</p>
<div id="game"></div>
</body>
</html>
Save the file and open it in your browser (go into Explorer, locate the folder you created and double click on the index.html file - you can keep this window open moving forward, and every time you make a change, just reload the page instead of reopening it), if everything worked as expected, you should see this in your browser:
