WDD 230: Web Frontend Development I

W02: Project - The Chamber of Commerce Home Page

Overview

We begin building the actual chamber of commerce website project, starting with the home page. The chamber home page welcomes the visitor with key information and invitations to engage with the organization.

In subsequent weeks you will add additional enhancements to this home page and add additional pages to the chamber site. These additions and enhancements will be treated as project milestones, cumulating in a final, assessed version which is the final project, due at the end of the course.

Instructions

File and Folder Setup

Set up the chamber of commerce project directory and file structure.

  1. Add a new folder to your main wdd230 directory named chamber.
    This folder will contain all of the project's pages and assets and we will treat it like it is its own, independent website.
  2. Add the common sub-folders to the chamber folder to house the images, CSS, and JavaScript.
    • images
    • styles
    • scripts
  3. Add a new file named index.html to the chamber folder. This is the home page.
    You should not confuse this file with your course home page that is also named index.html. Do not be tempted to name it something else. Treat the chamber directory as its own, self-contained website. index.html is a standard, default served file when a user requests a directory.
  4. Add two CSS files to the project's styles folder, base.css and larger.css.

HTML: Structure

Use the following references as you layout, provide content, and style your page:
  1. Add the standard head and meta content with valid title and description content.
  2. Include a favicon for your chamber site.
  3. Add social media meta settings for the title, type, image, and url.
  4. Start building the home page by provide the HTML structure supporting a consistent look and feel using a header, navigation, and footer. These three common components are required at a minimum. Your own design may warrant other components.
  5. The main area will have content specific to the home page. The five required components are as follows:
    • a hero image
    • a call to action link to join the chamber of commerce
    • a current event(s) section
    • a weather card section
    • a section containing one to three company 'spotlights' advertisements.
    The content for these sections can be placeholder and fictitious at this point. Much of the content will be replaced in the coming weeks with data driven components including the actual weather and member information. Do not spend time too much time on the content.
  6. The footer area must contain contact information and some additional development information including: your full name, the fact that this is a project for WDD 230, and the last modification date of the page, which is driven dynamically through JavaScript.
  7. Work to meet the Development Standards for the course.

CSS: Styling

Begin styling your page. Remember that these styles will be used on all the pages of your project. You do NOT need to have this finished at this point. You will work on this project throughout the course, adding, updating, and revising.

Example for Reference

These screenshot examples are just for reference. You do NOT NEED to have all of this done this week. Examples

  1. Use a normalize or reset CSS. Be sure to list it before the base.css file.
  2. Using the base.css file, begin providing baseline styling for your project using your color schemas and wireframe as a guide to match the design identity and general layout.
    Do not worry if you feel like you need to make changes from your original plan. This is a normal part of the design process. You will be able to make changes as you go along.
  3. The main navigation menu must support the pages listed in the chamber project description and be responsive, using a responsive, 'hamburger menu'. This means that in the mobile view they are exposed with a click of the hamburger button and that in the large view they are displayed horizontally.
  4. The main content are pieces must show some difference between the mobile and larger views in terms of layout.

Testing

Submission

  1. Update your course home page with a link to your chamber home page.
  2. Commit and push your work to your wdd230 GitHub Pages repository.
  3. Return to I-Learn to submit your course home page URL.