Learn Programming by Creating Games with JavaScript

Lesson 1 - Create Home Page for Web Site

SUMMARY

In this lesson we will create a home page for an imaginary video game company. This page will provide links to the games that you either have or will create. You will use a table to layout the page.

In the next lesson we will begin our second game, Pong.

DISCUSSION

There are many websites that discuss tables. Visit the links to learn about tables:

Web Design - Tables 1
Web Design - Tables 2
W3schools
Maricopa.edu - SUPER TUTORIAL

EXAMPLE - Page Layout with a Table

Font Size: 10pt 12pt View Large Version
Ctrl-C to Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

GAME DEVELOPMENT

1. Using Notepad, create a home page for a website for an imaginary video game company. The page will contain an index of your games along with other information about your game company. Your page should look similar to the one below and meet the following requirements:

A table should be used to provide the page layout. The table should have two rows. The first row should have one cell and the second row should have three cells.
The first row should have a banner with a logo for your company. Create your own logo; do not download it.
The first cell in the second row should contain an index for the website. Include links such as Products, Contact, and Services.
In the middle cell in the second row, add links to your games (Hit the Target and Pong) and descriptions of these games. Ensure that the links change colors when the user moves the mouse over them.
In the third column in the second row, add news or advertisments.

screen shot

2. Using Notepad, create a game page for Pong. The page should have a <div> to display the score and other messages, an image with the paddle, and an image for the ball. Use style to position the <div> and images. Refer to the Home page for a screenshot of the game. The game will be run in a window with a width of 500 and a height of 400 pixels.