Below is a description of what each page MUST contain.
About Us: (index.html)
History – Include a brief description of the company’s background e.g. when it was founded, by who, what products it sold in its early days, how it has grown over the years etc.
Why use us– Describe why your clients should do business with you. Try to think of a reason or reasons that distinguish you from other pet stores e.g. your experience your, products, your employees, your location etc.
Our Team: (employees.html)
Create a page that shows some of your employees. Be sure to include the following. A picture of each employee, their name, title, years working at your company, and phone extension.
Products: (products.html)
Dog Supplies (dogsupplies.html)
Dog Apparel – Products names and pictures
Dog Food- Products names and pictures
Cat Supplies (catsupplies.html)
Cat Toys – Products names and pictures
Cat Food– Products names and pictures
Fish Supplies (fishsupplies.html)
Fish Tanks – Products names and pictures
Fish Food– Products names and pictures
Policies: (policies.html)
Financing– List your financing policies
Delivery– Discuss your delivery policies
Return Policies – Describe your stores return policies
Contact us: (contact_us.html)
- Embed a map in the contact_us.html page that shows show the Corporate Office location.
- Include the following information at the bottom of the contact_us.html page:
Corporate Office
Postal Address- Head office location
Phone – Head office phone number
Fax – Head office fax number
E-mail – clickable email address which when clicked has the Head office email address and the subject line should read “Corporate Inquiry”
Regional Offices: – (You must have at least 2 regional offices)
Postal Address- Regional office location
Phone – Regional office phone number
Fax – Regional office fax number
E-mail – clickable email address which when clicked has the Regional office email address and the subject line should read “Regional Office Inquiry”
- Include a linked icon that goes to a Facebook or any social media page
All pages must have:
- Appropriate Titles
- Appropriate Headings
- Appropriate details and descriptions
- Appropriate graphics and links
- Navigation through your sight must be intuitive
- There must be no dead links
- The design should be simple and clean
In your project you must make use of the following:
- HTML5
- CSS
- Colors
- Images
- Internal links
- External links
- Lists
Your project will be graded based on:
- Functionality: Whether or not all pages, links are working, can read the text, can navigation is easy.
- Content: Whether or not the content on each page makes sense
- Creativity: How creative you are in terms of content, design, layout of your website.
- Appeal of the website: Your website should look good
- Professionalism: It is a corporate website, not a personal website.
- Make sure you validate your website at: http://validator.w3.org Links to an external site.
Please note:
- For this project, you will make up all the content.
- You are not permitted to use the same layout that I used in the HTML Lesson video (Module 3 – Web Development: Lesson 3: Using HTML to Build a Website). Doing so will result in a grade of zero.
- You should NOT send me any HTML files via email since this is a website and not just a collection of files. Websites must be published on Github pages. I will not grade any files sent via email. I will only grade work that has been uploaded onto Github pages.
TROUBLESHOOTING HTML
If you write some code that does not seem to work you likely have a simple problem. Try the following:
- Remember that file names (HTML and images) are case sensitive. Make sure that you keep all file names in lower case(e.g. mypic.jpg and NOTJpg) . In your code, when you refer to a file make sure the code is typed in lower case(e.g. <img src = mypic.jpg>)
- You may have forgotten to save your change or refresh the browser. To ensure you are viewing your latest modifications, save your file then refresh the browser.
- Check the syntax of your tags very carefully. HTML5 is a very forgiving language, which means something will usually show up in the browser, but it may not be what you expect. Since you should be making small changes, saving and testing your file, it should be fairly straightforward to find any errors in code. Just go back to the last thing modification you made. The most common mistake made is forgetting to close a tag. You can validate your code by typing in the URL to your website into an HTML validator such as http://validator.w3.org/ Links to an external site.
- Always check to make sure that you have used the extension “.html” to save your pages. Turn the file extension option on by opening any folder on your computer and clicking Tools>> Folder Options>> View. Make sure the checkbox for Hide extensions for known file type is NOT checked. This will allow you to see the file extension for all files on your computer. If you have accidentally saved your .html file as something like .htm.txt, simply right click on the file, select rename, delete the .txt extension, click enter.
Some Rubric
Some Rubric
| Criteria |
Ratings |
Pts |
| This criterion is linked to a Learning OutcomeFunctionalityAll pages and links are working, Text easy to read Navigation is seamless |
| 10.0 ptsFull Marks |
0.0 ptsNo Marks |
|
10.0 pts |
| This criterion is linked to a Learning OutcomeContentAll content specified in the assignment instructions is included The content on each page makes sense |
| 10.0 ptsFull Marks |
0.0 ptsNo Marks |
|
10.0 pts |
| This criterion is linked to a Learning OutcomeCreativityThe level of creativity in terms of content, design, layout of the website. |
| 10.0 ptsFull Marks |
0.0 ptsNo Marks |
|
10.0 pts |
| This criterion is linked to a Learning OutcomeAppealWebsite aesthetics, Site design and eye appeal. Appropriate colors, fonts, images,layout |
| 10.0 ptsFull Marks |
0.0 ptsNo Marks |
|
10.0 pts |
| This criterion is linked to a Learning OutcomeProfessionalismIt is a corporate website, not a personal website. |
| 10.0 ptsFull Marks |
0.0 ptsNo Marks |
|
10.0 pts |
| This criterion is linked to a Learning OutcomeValidity of HTML & CSS codeErrors in the HTML were revealed by the HTML CSS validator http://validator.w3.org |
| 10.0 ptsFull Marks |
0.0 ptsNo Marks |
|
10.0 pts |
| Total Points: 60.0 |
https://tjc960116.github.io/pet1/index.html
