WDD 130: Web Fundamentals

W04 Rafting Project: About Us Page Layout

Overview

Continue to work on the rafting site about.html page using the wireframe as a guide. The tasks include working on the layout and content of the header, navigation, sections, and footer.

Instructions

  1. Use this updated client wireframe sketch to enhance the layout of the about.html page.
    Wireframe Design for Rafting Project About Us Page - Updated
    Figure 1: Updated Wireframe Design for Rafting Project About Us Page
  2. Open up the about.html file and the rafting.css files for editing.
  3. Continue to make updates to the page.
  4. Use CSS Grid in the header to create the horizontal layout between the logo and the navigation bar.
  5. Use CSS Flex to create the horizontal layout in the nav.
    Help
    This ⚙️CodePen example uses a CSS Grid in the header that contains three element children (img, h1, and a nav). The nav itself is laid out using CSS Flex
    .
  6. Style the header, img, and nav as needed to create a well designed header that will also be used on the other pages of this rafting site to provide a common look and feel across the site.
  7. Style the History section elements as needed using a CSS layout method of your choice and add content.
    An example layout is given in the wireframe, however, the layout does not have to match this example perfectly.
  8. Style the Adventures section of five images to span the section horizontal using a CSS layout method. Use figure elements to contain the img elements and use figcaption captions for each figure image element by naming the trip adventure name or the rapid name, e.g., "Los Dientes del Diablo", "Big Mallard", "Half Day Adventure", etc.
    The Figure Element - MDN
  9. Style the footer so that the three social images fit in the space and are arranged horizontally and to the right as pictured in the wireframe.

Testing

  1. Every page in this course will be expected to pass the development standards checklist.
  2. Continuously test the page in the local browser using Live Server.
  3. Validate and correct any errors with the HTML and CSS.
  4. Commit the changes and sync/push them to the wdd130 GitHub Pages enabled repository.
  5. Enter your GitHub username into this evaluation tool to get a basic assessment of the HTML and CSS.
  6. Check for color contrast violations at the AA level by using the DevTools CSS Overview tool to test.
  7. Check that the total transferred kiloBytes, page weight, does not exceed 500 kB.

    Remember to use the development standards checklist on how to check the transferred kB using DevTools Network. Typically the issue is that you forgot to optimize all images that you are using on the site if the transferred value is greater than 500 kB.

Submission

  1. Submit the URL (web address) in I-Learn. URL example: 
    https://githubusername.github.io/wdd130/wwr/about.html