Waterfall

Skills Pre-Assessment

Please complete as many of the below requirements as possible. Please complete the assessment and submit before class Thursday. Please email the URL of the page you create to (tswallace@ualr.edu)

Download all files in this exercise >>

File Management

  • Create a root folder for this assessment called pre-assessment
    • Create a sub-folder named assets and 4 sub-folders of assets named images, style, scripts, resources
  • Do not put this project in the root of your web site. Place it in a sub-directory called pre-assessment. Feel free to use any FTP client you’d like.
    (Ex. http://ualr.edu/username) it should be placed in its own sub-folder called pre-assessment.
    (Ex. http://ualr.edu/username/pre-assessment) This will be the address you send me when you have completed the assignment. You are free to use your Bluehost Web Hosting if you’d like.
  • Make sure that all files are in their proper directory before submitting this project.

HTML (Head)

  • Download the following html document and save it as index.html in the project root (right-click link – save as)
  • Open the file in your editor of choice
  • Add your name to the title of the page
  • Add the author meta tag to the head section
  • Properly declare the language
  • Place an html comment next to each meta tag explaining its purpose.

CSS

  • Download the following style sheet and name it screen.css. Make sure to place it in the appropriate directory (right-click link – save as)
  • Attach it to your document making sure to declare a media type
  • Add a CSS comment that explains what the first rule in the style sheet does.
  • Set the background of the page to this image and repeat on the x-axis
  • Set the background color of the page to match the background image.

Fireworks

If you are unfamiliar with Fireworks you are welcome to use and application or web-based service to complete this step.

  • Download and place in the resources folder one of the following four images to use as a header 1 | 2 | 3 | 4
  • Crop to 800px X 140px
  • Add your name to the image. Make sure that it is readable and there is good contrast between the type color and the background color.
  • Optimize and export the image to the proper location in your site. Must be less than 40kb

HTML & CSS

  • Change the H1 text to your name
  • Add the image you created above to your header section using an appropriate image replacement technique. If you are not familiar with this concept please do a little research to familiarize yourself with current approaches. Do not simply delete the H! text!  Review
  • Make sure the banner image is clickable. It should already be linked to index.html
  • Add title attributes to each of the horizontal navigation links
  • Add an additional link with title attribute to the navigation section. This link can point anywhere.
  • Add a class to the second paragraph of the content area named “alert”
  • Create a class in your style sheet named “alert” and set the background color and color of the text to something other than black.
  • Create style rules for the h2, h3, and h4 in the content area. Change the colors to match the header image you selected. There should be some visual difference between these headings. How you chose to accomplish this is up to you.
  • Add an html comment next to the h2 that says “Hey Thomas!”
  • Add the copyright symbol, the year, your name, and a functioning back to top link in the footer.

Content

  • Answer the three questions in the content area. The second question requires you to edit the html. I will be grading the source code so make sure you mark this up in the code instead of the visual editor.
  • Download and insert the following image into the content area of your page. Use CSS to float the image to the right, place a border around the image, and add margin around the image.

Validate

  • Validate your html and add a link to the validation results in the footer.

Upload and send me the URL (tswallace@ualr.edu). Make sure you do not overwrite your existing site!

We will review this exercise in class on Thursday. Please be prepared to ask questions and participate in the discussion.