WDD 130: Web Fundamentals

Introduction to the Whitewater Rafting Website

Overview

This assignment introduces the course's website project, a whitewater rafting site.

Prepare

1. Read and reference: The Whitewater Rafting Site Project Description
   This document provides an overview of the project.
2. Read: Working with Wireframes
   This resource introduces you to wireframes, which are used in the planning process.
3. Read: The Website Planning Document
   This resource introduces the common components of a website planning document.

Instructions

Review the Site Planing Document

• Download and read the Whitewater Rafting Website Planning Document (pdf).
• Note the example content in the following sections:
  • Site Purpose: The owner of a white rafting business wants to have a relevant and useful online presence. Identify the stated purpose and/or goals of having the website.

    If you are unfamiliar with whitewater rafting organizations/companies, review the provided examples in the provided Whitewater Rafting Site Project Description.

  • Target Audience: Locate the statement(s) specifically identifying the target audience for a water rafting website. What are the characteristics of the target audience? What are the scenario questions posed about the target audience that will drive the content of the site?

    You may need to review the example questions posed about target audiences from the Website Planning Document.

  • Logo: A logo was provided. You are free to choose this logo from the resources provided or use another logo of your own design. Here is a link to the repository of logos: Whitewater Rafting Logos. When you build your pages, you will need to match the name of the fictitious company provided in the logo with your headings, as needed.
    If you choose a logo from those provided in the linked document, you can right click on the image and Save image as... a file to the images folder within your wwr folder.
  • Wireframes: The given wireframe is for the home page of the rafting site in a future week. Additional wireframes will be provided when you are assigned to build that page. You will have the chance to design your own wireframe for the other pages.

Customize Your Website Project: Logo and Style Guide

• Choose a logo from the provided resources or create your own logo for the whitewater rafting site. The logo should be a simple, clean design that represents the fictitious company. See the Logo section above for more information.
• Choose a color palette:
  1. Navigate to the free coolors.co tool. You do not need to create an account but may do so if desired.
  2. Choose a color scheme by designing a palette of 3–4 colors that you think will work well for a rafting site.

     Keep the site purpose and audience in mind. Start by thinking of a color you like or think will work well for a rafting site.

  3. Once you have built your palette, note that at the bottom of each color column there is a six digit hex code. This is what is known as a hexadecimal color code (base 16 or 0 to F) and is usually preceded by a "#".
     Copy that code for the colors you would like to use on your rafting site.
  4. Record the color codes and assign one color code for each of the following labeled colors for use in your website's CSS:
     • primary-color
     • secondary-color
     • accent1-color
     • accent2-color

     You can change these colors later as changes can be made to the site plan in future weeks.

  5. Save your color pallette URL from coolors.co using the URL in the address bar of your browser.

     The color palette URL is the URL that appears in the address bar of your browser when you are on the coolors.co website. It will look something like this: https://coolors.co/f2d7ee-d3bcc0-a5668b-69306d-0e103d.

  6. Be prepared to submit your color pallette URL and a list of colors.
• Choose your Typography:

  Using the Google Fonts API, choose two (2) fonts to use for the rafting site. Consider what fonts you will use with headings and with body text, then record the names of the fonts and assign one font to each of the following labels.

  Demonstration using Google Fonts: Google Font Lab

  • heading-font
  • text-font
  Check Your Understanding

  This is an example of embedding code in the <head> of your html for two fonts with limited styles (400,700,900) from Google Fonts:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Roboto:wght@400;700&display=swap" rel="stylesheet">

  And then, in CSS, use the font-family declaration. This is just an example application to all headings:

  h1, h2, h3, h4, h5, h6 { font-family: 'Merriweather', serif; }
  

Submission

In this assignment you will create a portion of the site plan. The items that you will provide include a logo, four colors, two fonts, one for the headings and the other for the general body, and a coolers.co link showing the colors you have selected.

Submit a Word document that includes:

1. The image file you selected for the site logo.
2. Write out the four (4) color labels (listed below) with the color codes you selected:
   • primary-color ____________
   • secondary-color _____________
   • accent1-color _____________
   • accent2-color _____________
3. Write out the two (2) font labels (listed below) and the names of the fonts you selected:
   • heading-font _____________________
   • text-font ________________________
4. Provide the URL link to your color palette that you designed in coolors.co
   Here is an example URL link:

   https://coolors.co/f2d7ee-d3cc0-a5668b-6306d-0e103d