WDD 230: Web Frontend Development I

W01: Project Milestone - The Chamber of Commerce Site Plan

Overview

Site and application planning is a critical step in successful design and development projects. The website plan provides a blueprint from which to design and develop the project for a chamber site for a local town of your choice.

Review prior coursework involving website planning and development. Ask yourself, and others, about what planning section seemed to help the most with the build of the site. What items changed after addition information was given? What kind of questions should be asked of the client in order to get a clearer purpose of the intent and goal of the website or web application?

Instructions

The project is to build a chamber of commerce site. In this activity, you will build a web site plan plan document in HTML. Use some basic styling but be sure to demonstrate your planned color schema and typography by using your choices in this site plan document.

The site plan may change over these first few weeks of course which is OK.
  1. Become familiar with the chamber project description, which provides overall site specifications.
  2. Select a town, city, municipality, or region to be the location subject for the chamber of commerce project site.
    It is recommended that the location be somewhere with which you are familiar.
  3. In the VS Code editor, add a new file to the "week01" directory named "chamber-site-plan.html".
  4. Add supporting CSS files as needed. The styling can be basic. Start using the selected color schema and typography in this site plan.
  5. Include the following content and use appropriate HTML elements to outline these sections with descriptions in of the site plan document:
    1. Site Name: This is the name of the site normally based upon the locale and purpose. A representative domain that is available to purchase would be normally important but not required in this class. Provide a valid site name that is relevant to the locale. Include the word "Chamber" in the site name and a short reason why the the site name was selected.
      Example: Carlsbad Chamber of Commerce. This name represents a city in which the chamber operates.
    2. Site Purpose: The site purpose should attempt to provide scope to the website content in describing what services and information will be provided. The client typically drives this content by stating functional specifications. It is OK to be less formal than this given example. Provide at least two purposes for having the website developed and running.
      Example: "The Carlsbad Chamber of Commerce acts as a regional economic catalyst, leadership convener and community champion. We promote business through member services, economic and community development, and public policy that balances economic prosperity" - carlsbad.org site description
    3. Scenarios: Scenarios are questions that are asked by a site visitor who represents the target audience of the organization or company. The questions will drive the content of the website as it provides answers to the questions. Again, much of the content specifications will actually be provided but start thinking about the target audience of a chamber of commerce site. Visit real chamber of commerce sites. Include at least three scenarios.
      Examples
      • What events will the chamber be holding this month that promote business-to-business networking?
      • Where can I find contact information for the chamber's board of directors?
      • What has been the population growth in the area?
    4. Color Schema: The color schema refers to the carefully selected site colors that reflect the organization's purpose and trademark. The planning document defines the color scheme through a color palette that labels color style definitions and swatches for site elements. Define at least two colors and show where each color selected will be used, such as headings, paragraphs, background colors, accents, and so on.
      How to Choose Good Website Color Schemes - websitebuilderexpert.com
    5. Typography: The typography section of the planning document provides examples of the fonts to be used and where they are to be applied. No less than one font and no more than three fonts selections need to be selected. Indicate where each selected font will be used (such as headings, body, and so on). Other fonts can be used for special circumstances or sections as needed.
    6. Wireframe: Provide a rough sketch of the design of the chamber home page layout. Wireframe diagrams can be simple and do not need to have actual content, just representations of content and their layout relationship. Provide a sketch for the mobile view and for an larger, such as desktop, view for the home page.
      🎦 What is a Wireframe? - evolve
      Wireframe sketch tool: wireframe.cc
  6. Test for basic HTML components and page content by running your page through the audit tool.
  7. Update your home portal page (index.html on the wdd230 root) with a link to this HTML file.
  8. Commit and push your work up to your GitHub Pages repository.
  9. Return to I-Learn and submit your GitHub Pages home URL.