Your Favorite Games


Incremental Lesson 1 - Building A Display

About this tutorial

Category: Javascript
Difficulty: Beginner
Lesson 1 - Building A

In this series of tutorials, we aim to help beginners to javascript to construct a basic incremental game from the ground up using a combination of HTML, CSS, and Javascript.

First things first, what do these three things mean?

HTML - Hypertext Markup Language
This is the language that you use to put everything onto the screen. It's incredibly simple to grasp, and uses "tags" to tell the web browser how to display the information. Tags are denoted by "<" and ">" with the tag information contained within. We will be providing you with the tags as you need them, and explaining them so that you fully understand what each tag does before continuing.

CSS - Cascading Style Sheet
These documents tell the browser how the HTML should be styled, whether there should be borders, spacing, etc. Again, it's relatively simple to grasp, and we will be explaining everything as we go along. CSS uses special identifiers within HTML so that you can modify either a single HTML element (something contained within respective tags) or multiple at the same time.

The bulk of the programming of your game will come here. Javascript tells the browser how to react when the user clicks on a button or puts their mouse over a link. It's extremely versatile and can be very simple to start with, but can quickly become overwhelming if you don't follow a few simple rules.

In your first lesson, we will be taking you through creating a simple webpage and how to link the appropriate files together. Note that we will not be using any Javascript at this point, as we want you to fully understand the basics of creating and styling a simple page.

To get things started, you'll need a simple text editor and a web browser. We suggest using Notepad++ and Firefox, though you can use the simple text editor provided with your Operating System (Windows, OSX, Linux, etc) and whatever browser you like. For the sake of the tutorial, we will assume the former.

Open Notepad++ and create three new files. Save these individually as "Incremental.html", "Incremental.css", and "Incremental.js". These are your basic HTML, CSS, and Javascript files. Go to wherever you have saved these files and create two new folders, "css" and "js". Move the appropriate files into their directories. You'll have to reload the files into Notepad++.

Switch back to your html file (Incremental.html). We'll be using this file to start off with.

Here, you'll be using your first tag: <html> This tag tells the web browser that the document is a HTML document and should be treated as such. Follow this on a new line with <head>, then </head> on another new line. Notice that we now have two head tags? The "/" at the start of the second tags tells the browser to stop creating the element, in this case the "head" element.

The head element contains all the information that must be processed BEFORE the page is output onto the screen. This is where you can set the title of the page (the name that appears in the top bar of the browser), any specific information for the browser, and link any files. We'll do some of that now.

Inbetween the two head tags, enter the text <title>Basic Incremental Game</title>. This will display "Basic Incremental Game" in the top bar of the browser. While we're here, we'll also link in our javascript and css files to the html file. These tags are a little more complicated.

Enter <link rel="stylesheet" type="text/css" href="css/Incremental.css"> on a new line inside the head tags. Note that this tag has a few extra options added into it? Tags can contain more than one word to give the browser more information on how to interact with that particular object. In this case, we have three more options.

  1. rel: Describes the relationship between the two files.
  2. type: Denotes what type of file the linked document is.
  3. href: Tells the browser where to find the file.

Our file is a CSS document, so we'll tell the browser that it is a "stylesheet". Next, the file is a "text/css" document, so we'll tell it that too. Finally, the location of the file. We can do this by either specifying a URL (eg or a location relative to where the file is. In our case, we're using a file that we have created ourselves, so we'll use a relative location. Our css files are contained within the "css" directory, so we'll link to "css/Incremental.css".

Finally, let's link our Javascript file to the document. This is a far simpler process. Enter the line <script src="js/Incremental.js"></script> below your link tag inside the head tags. The script tag tells the browser to either use the code within these two tags or to load the file linked with the "src" option. Src works the same as the href option, so you can use a URL or a local file. Use the javascript file we created earlier.

Save your files and we're ready to test. Open your browser and open your HTML file into it. You'll be presented with a blank page and the text in the top bar "Lesson 1 - Building a Display". Congratulations!

Lets add a little more info to the page, since it is a little bland at the moment. Go back to your text editor and back to your HTML file. We're going to add some "body" to the file, so add two tags with that name, one to open and one to close, with a few empty lines between them. This is where we will add everything we want to display on the screen.

Add in the text "Hello World!" between the two tags, save, and open the file again in your browser. Congratulations! You've created your first web page!

Any plain text within the body tags, whether inside other tags or not, will be printed to the screen. Note, however, that the text needs to be formatted if you want more than just a long line of text. That will come in a future lesson.

Next lesson, we will be adding some more information to our page and begin styling it to display it a little nicer.