Web Development Using HTML


Assume that during the summer you are hired by a Pet store company named Durham House of Pets (DHP) to do an internship. Ms. Smith the VP for Information Technology (IT) at DHP has reviewed your resume and noticed that you took a course on Management Information Systems (MIS) at UNH and that in one of the course modules you learned how to develop web pages. She would like you to create a website for DHP.

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:

  1. Appropriate Titles
  2. Appropriate Headings
  3. Appropriate details and descriptions
  4. Appropriate graphics and links
  5. Navigation through your sight must be intuitive
  6. There must be no dead links
  7. 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:

  1. For this project, you will make up all the content.
  2. 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.
  3. 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.


If you write some code that does not seem to work you likely have a simple problem. Try the following:

  1. 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>)
  2. 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.
  3. 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.
  4. 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.

About the Author

Follow me

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}