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.
- 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. - Add the common sub-folders to the chamber folder to house the images,
CSS, and JavaScript.
- images
- styles
- scripts
- 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.
- 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:
- Your chamber of commerce site plan including your wireframe design of the home page.
- The overall chamber of commerce project description.
- Add the standard head and meta content with valid title and description content.
- Include a favicon for your chamber site.
- Add social media meta settings for the title, type, image, and url.
- 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.
- 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. - 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.
- 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
- Use a normalize or reset CSS. Be sure to list it before the base.css file.
- 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.
- 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.
- The main content are pieces must show some difference between the mobile and larger views in terms of layout.
Testing
- Use this page ☑️ audit tool.
- Validate your HTML and CSS.
- 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.
It is best to test your page in a Private or Incognito browser window.
Submission
- Update your course home page with a link to your chamber home page.
- Commit and push your work to your wdd230 GitHub Pages repository.
- Return to I-Learn to submit your course home page URL.