WDD 230 - Web Frontend Development I

04: Project - The Chamber of Commerce Home Page - Start

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.

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 three CSS files to the project's styles folder, base.css, medium.css, and larger.css.

HTML: Structure

1. Add the standard head elements and meta including a relevant title, meta description, and meta author. The page self-audit tool will provide you with feedback.
2. Design and include a favicon for your chamber site.
3. Add social media meta settings for the title, type, image, and url. Do not worry about getting some of this content exactly right as the values can be adjusted later.
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. Much of the layout work on this will be completed in the next lesson.
   • a call to action link to join the chamber of commerce. Much of this work will be completed in the next lesson.
   • 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 chamber project. You do not need to have all of the page finished at this point. You will work on this project throughout the course, adding, updating, and revising.

1. Use a common or customized normalize or reset CSS as the first item in your CSS cascade.
2. Using the base.css file, begin providing baseline styling for your project using your color schemas and the 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

• Use this self audit tool to check on some basic elements and gain access to validate your HTML and CSS quickly.
• Test your page in the latest version of your browser in responsive mode using the Inspect Device Toolbar (Dev Tools).
• Check for JavaScript runtime errors in the console or click the red, error icon in the upper right corner of Dev Tools.
• Generate the Dev Tools Lighthouse report and run diagnostics for Performance, Accessibility, Best Practices, and SEO in both the mobile and Desktop views. Note anything that you understand and can fix especially if one of the numbers is below 87% compliance.
  It is best to test your page in a Private or Incognito browser window.

Submission

1. Update your course home page main menu to make sure the "Chamber" menu item links to the chamber folder.
   ☝🏽Remember that index.html is a default file name for default file that will be rendered when pointing to a folder. This means you do not need to reference index.html in the addressing. When you reference the chamber folder from the course home page, it is sufficient and accurate to write the following href:

   <a href="chamber/">

2. Commit and push your work to your wdd230 GitHub Pages enabled repository.
3. Return to I-Learn to submit your course home page URL.