Exercise 03

SINGLE PAGE TUTORIAL

In this exercise you will create a single page, which presents a tutorial of a topic of your choice. You may choose any topic but I suggest your idea is in line with class content.

Keep the "idea" and the "instruction" simple and "on track". A tutorial does not need to be complicated to be effective.

You may use images, screen captures, and video/audio to enhance your instruction.

Basic Requirements

  • The layout should not be responsive;
  • Do not include a main navigation menu at this time;
  • Do not include a footer at this time;
  • The content width should not exceed 600 pixels;
  • In the root-level for your tut create a folder labeled "images". Now, create a folder labeled with your last name, e.g., prior, within the "images" folder. Place "all" image files in your folder. You may link to content on another server using an absolute path.
  • At one point in the series of exercises we will place the images folder on the class server. Each student will need to then update the path for each linked image using an absolute url. We will go over this part in class when we migrate the image folder.
  • You will create/place your html in the root-level folder;
  • Label your html page with your last name, e.g., prior.html;
  • Label your CSS file with your last name, e.g., prior.css;
  • Create a "css" folder in your root-folder.
  • Create a folder in the "css" and label the folder with your last name. Use only lower-case letters.
  • Place your "css" file in the folder with your name, which is now in the "css" folder.
  • At one point in the exercises each student will need to update the path for the linked css to an absolute url. We will go over this part in class when we migrate the css folder.
  • Remove all tags elements from the html doc except for the tag elements you use in your tut;
  • Do not create a style for the body element. The body element is for use in the "index.php" page only.
  • Do not style "any" html element directly. You must use ids and classes only to style elements.
  • IMPORTANT! - Your id and class names must be unique. We do not want tut id's and classes to inadvertenly style elements in the main interface.
  • At one point in the exercices we will remove the link your css styles in your final html tut page. The css file will be called from the data base when the tut page is called.
  • Create a ".txt" file with the following information and place in the root-level folder:
    • The title for your html page (the code title element);
    • The title for the tutorial;
    • A brief description of your tutorial (this is the meta description);
    • Ten or less keywords, which name and define or describe the tutorial, (i.e., meta keywords as used in the meta tag in the head of an html page.)
    • The href to any Google font you may use in the tut.
    • Provide "any" information or notes, which may help those developing the "index.php" template page.
    • Label the text file with your last name and "-read-me.txt", e.g., prior-read-me.txt;
  • Place your root-folder on the class server in the approriate exercise folder;
  • ASK during class if you have a question;
  • See videos in the "RESOURCES" section for additional information.

RESOURCES

I suggest you download the videos to your desktop for the best playback.