CODE CREATIVE
RESPONSIVE WEBSITE
CONSISTENT READABILITY
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.
CHALLENGE EXERCISE
  1. Stylize your title and navigation links using Google Fonts.