TASK:
Download the Skeleton boilerplate and create a new project.
HINT:
You will need to download the Skeleton Boilerplate and copy the files contained therein. Then, you will need to create a new project in Aptana called "Responsive"
and paste the files in.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Create a header that is split into two parts.
HINT:
You will need to add a header
element. Then, you will use the div
element to create two elements inside of the header.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Add the title to the left and the navigation links to the right.
HINT:
You will need to add the title text
to the first div
element inside of header
.
Then you will need to create a set of navigation links
using the ul element
and place them inside of the second div in header
.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Add a CSS file and stylize the title using text-shadow.
HINT:
You will need to create a CSS
file(File -> New From Template -> CSS -> Blank File) in Aptana.
Then, you will create a class
that uses the text-shadow property and use it in the CSS file. Remember that you must use the class in the HTML file to see any change.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Stylize the navigation links using float and text-shadow.
HINT:
You will need to create a class
in your CSS file for the links and use the float and text-shadow properties.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Create a set of padding classes.
HINT:
You will need to create a set of classes
that will add differing top and bottom padding properties to elements. Then you will need
to create another set that adds padding to both sides of an element.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #7
TASK:
Use the padding classes on the title and links.
HINT:
You will need to add the class names you
created in the last task to elements in your index page. Remember that elements can use
multiple classes.
CHECK UP:
Watch the video below to check that you completed the task.