WDD 130: Web Fundamentals

W06 Rafting Project: Trips/Adventures Page

Overview

The rafting site project contains a total of four (4) pages. The Trips page provides information about the specific trips, adventures, and packages that the rafting company offers to clients.

Reference examples of the type of content that could be included on the trips page:
Rafting Site Description

Instructions

Setup and Design

  1. Create an trips.html in the wwr directory that contains the same header, navigation, and footer as the other pages on the site. (Hint: copy and paste like you did for the Contact Us page.)
  2. Prep the new page by changing the title and meta description in the head section. Remove the non-relevant content within the main element.
  3. The following components are required on the Trips page:
    1. Call to action to contact the company. This action opens the Contact Us page on the site.
    2. At least three detailed trip descriptions with photos.
    3. A table outlining all the available trips with relevant information.
    4. For full credit consideration, you cannot just have a simple, single column flow layout.
  4. Create a wireframe design sketch of the Trips page layout and content. Be sure that you include the required components, described above, in your layout. Save the wireframe as an image in your wwr images folder.
  5. Be creative in your design, but remember that your header, navigation, and footer layout and content should be the same as other pages on the rafting site.

Build

  1. Build the structure of your trips.html page using HTML.
  2. Using the same rafting.css file, make additions and any required changes to the CSS.
  3. Create a link to the Trips page wireframe image in the footer of your trips.html page only.

Testing

  1. Validate your HTML and CSS using the Web Developer browser extension.
  2. Validate accessibility using the Web Developer browser extension.
  3. Check for color contrast violations at the AA level. Use DevTools CSS Overview to test: How to Use CSS Overview
  4. Every page in this course will be expected to pass the development standards checklist. Review your rendered page and markup against this checked items.