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 wireframe as a guide to enhance the layout of the about.html page.
    Wireframe Design for Rafting Project About Us Page - Updated
    Figure 1: Wireframe Design for Updated About Us Page
  2. Open 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.

    This CodePen example uses a CSS Grid in the header. The header contains three child elements:

    • img
    • h1
    • nav

    An example of how to use CSS Flex is found on the unordered list <ul> element within the <nav>. Each of the list items <li> are flex items working together under the flex parent.

    .
  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 providing a consistent look and feel across the site.
  7. Layout the History section elements as shown in the wireframe layout.
  8. Style the Adventures section with five images to span the section horizontally using a CSS layout method. Use figure elements to contain the img elements and use figcaption captions for each figure image, labeling them with the trip adventure name or the water 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.
  7. Check that the total transferred kiloBytes, page weight, does not exceed 500 kB.

    Use the total transferred kB information provided by the browser's DevTools Network panel. You will want to reload the page using Empty Cache and Reload when testing in the Network panel. If the total transferred amount is greater than 500 kB, it is likely that you forgot to optimize images.

Submission

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