If your page does not appear correctly, look over the code carefully. Common errors include misspelling HTML or CSS keywords; missing quotation marks, angle brackets, or close tags; and mixing up () with {} symbols or the : and ; symbols.

The sytax highlighting (coloring of the code) will often help you find the errors you make.

In 1993, Mosaic (the first Web Browser) was released and popularized the World Wide Web.

6. Add a div for the game window. Style the div as you please.

Is the px after the width and height values important?

Very. The 'px' (for pixels) is the unit of measurement. If no unit of measure is given, then the CSS will not work as expected in all browsers.

7. Keep your page open in a web-browser. When you make changes just refresh the page so it updates.

What happened to the "This is my first game!" text?

The text is still there. You just can't see it because the font color is the same as the background color.

Keep the page open in a web-browser so you can refresh the page (instead of re-opening it) each time you update code.

Indent your code!

Proper indentation will ensure that your code is organized, which becomes very important as your code gets larger and more complex.

Use tabs to indent your code, not spaces.

You will also learn that proper indentation of code will greatly reduce the number of errors you make and help you find the mistakes when you make them.

You can indent entire portions of your page by selecting all the code you want to indent and pressing tab. This shifts the entire selection to the right. You can also shift an entire section to the left by using command+shift on a MAC or control+shift on a PC. If your text-editor is not set to allow this, check in the preferences to set it to do so.

Follow these rules for indentation.

If there is little content between an open and close tag, leave it on one line. This is what was done with title on line 3.

If there is more too much content for one line between an open and close tag, use multiple lines and indent everything between the tags. This is what was done with the html, head, body, and style. Note that the div also is done in this way even though there is little content between the open and close div tags. This is because you will be putting more code here later!

Use tabs to indent, not spaces.

Elements inside of elements should also behave in this way. For example, the contents of html are indented by one tab, but the contents of head are indented an addition tab.

If you indent correctly, the end tag should always have the same horizontal alignment as the start tag. For example, the <body> and </body> are both indented one tab.

Use Shortcuts

You will be much more efficient if you use the following shortcut commands:

Command-S: Save the file

Command-X: Cut the selected text

Command-C: Copy the selected text

Command-V: Paste the selected text

On a PC, use the Ctrl key instead of Command key. You can also click and drag a selected portion of text to move it to a different location.

Do I have to use shortcuts to Save, Copy, and Paste items?

No. You can Cut, Copy, and Paste using using the menu. However, using shortcuts for these common tasks will save ALOT of time.

In most text editors, you can also move text in your code by highlighting it and then clicking on the highlighted area and dragging it to a new location.