WDD 130: Web Fundamentals

W06 Project: Rafting Site – Home and Trips Pages

Overview

Complete your rafting site project by adding two (2) more pages to the site:

• Home (index.html) – This is the landing page.
• Trips (trips.html) – This page will display the different rafting trips available.

Instructions

Fix any problems from earlier assignments

This is your final submission for this project, so it is important that you fix any issues that you may have in your previous pages.

1. Review the Rafting Site Project Description.
2. Review your feedback for the About Us (about.html) page and make any needed corrections.
3. Review your feedback for the Contact Us (contact.html) page and make any needed corrections.

Develop the Home page

Based on the Rafting Site Project Description, develop the main home page for the site according to the following requirements:

1. The home page is named index.html and is located in the wwr rafting website project directory.

   The name index is a default name which is referenced by the web server to be delivered to the requesting client for any directory in which it resides.

2. The one (1) common CSS file is used throughout the site, rafting.css.
3. One large full-width 'hero' image is used and it includes a heading message that is positioned on the hero image using position absolute.
4. A newsletter sign up form that requests at least a name and an email.
5. A call to action with link to the trips.html page that compels visitors to visit the trips page.
6. A CSS grid layout with at least two additional images and corresponding content about the white water rafting site purpose and offerings.
7. The layout of the page cannot be a simple, single column flow layout for full-credit consideration.
8. Be creative in your design, but remember that your header, navigation, and footer layout and content must be the same as other pages on the rafting site to support good design and user experience on the site as a whole.

Develop the Trips page

Based on the Rafting Site Project Description, develop the Trips page.

Start by doing the following:

1. Create a trips.html file 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. Prepare the new page by changing the title and meta description in the head section. Remove the non-relevant content within the main element.

Then, develop the page according to these requirements:

1. Contains a 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.
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.

Verify your pages.

There is not a specific audit tool for this final assignment. Instead, you should verify that your pages meet the requirements listed above and follow the development standards of the course.

1. Review the Web Development Standards Checklist and compare each of your pages against the standards.
2. Verify that all folders and files on the rafting project website meet the course's naming conventions.
3. Verify that the validation report at https://validator.w3.org/nu reports no errors for every page.
4. Verify the validation report at https://jigsaw.w3.org/css-validator/ reports no errors and
   only one (1) css file was used for the entire project.
5. Verify that each page title element has relevant content that is reflective of the page content and the website as a whole on all pages.
6. Verify that each page meta description element has relevant content that is reflective of the page content.
7. Verify that there are no color contrast violations at the AA level. Use DevTools CSS Overview in DevTools to run the test on each page.
8. Verify that the Home page contains a hero image with heading, a newsletter, call to action, uses CSS Grid as assigned, and contains the required content.
9. Verify that the Trips page contains contains the required content.

   Full credit consideration requires layouts on these two pages that is beyond a simple, single column layout, is visually appealing, and adheres to design principles of ease of use, uniform alignment, proximity of components, and use of white space.

10. Verify that each individual page does not exceed the 500 kB transferred size as reported by DevTools Network with an empty cache reload. The focus here is that images have been optimized and that no outside library/framework is used.

    Note that The Google Map in the Contact Us page does not count when measuring total transferred kilobytes per page.

Submission

1. Commit your changes and push them to your wdd130 GitHub Pages enabled repository.
2. Submit the your rafting project URL in Canvas.

   https://githubusername.github.io/wdd130/wwr/