TASK #1
TASK:
Create a webpage for your "Cookie Clicker" game.
HINT #1:
You will need to use create a web page in Aptana
(File -> New From Template -> HTML -> HTML 5 Template). Be sure to edit the title element and
add delete the elements that are in the body.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Add a stylized header with title.
HINT #1:
You will need to copy the header from
index and add another div
to the bottom which will contain the header text. You will also need to create
a class
that will be used to stylize the header text.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Add a background image to the header using CSS.
HINT #1:
You will need to create an appropriately
sized banner picture
using Photoshop. Save your image into the 'images'
folder. Next, you will
need to create an id
that uses the picture as it's background.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Split the article up into two sections: left and right.
HINT #1:
You will need to create two appropriately sized divs whose column
number adds up to 12. The left side will contain the picture of the cookie and the right side will contain the
buildings that are available for purchase.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Split the left side into two sections: top and bottom.
HINT #1:
You will need to create two 12 column boxes
that will be placed in the left side. Be sure that your boxes are stacked on top of each
other on your web page.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Add a picture of a cookie to the top section.
HINT #1:
You will need to add the picture inline
using
the img tag. Be sure to use the built-in class "u-max-full-width"
so that the picture stretches.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #7
TASK:
Create two divs after the picture of the cookie and add the text "0 Cookies" and "per second: 0" to each section.
HINT #1:
You will need to add to 12 column boxes to the left side after the
div that contains the cookie. Then you will need to add the appropriate text to each element.
CHECK UP:
Watch the video below to check that you completed the task.