WDD 130 | Rafting Website Project Introduction

Introduction to the Whitewater Rafting Website

Overview

This assignment introduces the course's website project, a whitewater rafting site. The concepts presented aid in the design and development of websites. This course uses a fictitious, whitewater rafting website as a learning project. A completed, reduced rafting site plan is provided for reference.

Prepare

Read and reference: 📑 The Whitewater Rafting Site Project Description
This document provides an overview of the project.
Read: 📄 Website Planning Document
This resource introduces the common components of a website planning document.
Read: 📄 Working with Wireframes
This resource introduces you to wireframes used in design and as part of the planning process.

Instructions

Review the Site Plan

Example Website Plan: Whitewater Rafting Website Plan (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 fee to choose this logo from the resources provided or use another logo of your own making. 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, online coolors.co tool. You do not need to create an account but are free to 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. Identify the colors you selected by writing down the color codes for each of the following labeled colors to be use in your CSS on the website:
  - primary-color
  - secondary-color
  - accent1-color
  - accent2-color
  Do not feel like you will be stuck with these colors. Changes can be made to the site plan as you move forward.
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 and record the names of the fonts with the following labels. Consider what fonts you will use with headings and body text.

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

Create a document and then upload it in I-Learn. Include the following information on the document:

The image file you selected for the site logo.
Write out the color codes for the following colors:
- primary-color
- secondary-color
- accent1-color
- accent2-color
and the names of the fonts you chose for the following labels:
- heading-font
- text-font
Provide the URL of your color palette from coolors.co. It will look something like this:
```
https://coolors.co/f2d7ee-d3bcc0-a5668b-69306d-0e103d
```