DTC 355: Fall 2020: Major Project #2: HTML Website


Summary

Using HTML and CSS skills introduced in class, you will create a small website for a fictional business of your choosing. Drafts of your site will be due for peer review by Friday, October 16, 2020, and Friday, October 23, 2020. The final site will be turned in as a URL before class on Monday, November 2, 2020.


Description

You should invent a fictitious business for which you can find or generate fictitious written and visual content. Your business should fit into one of these categories:

  1. Bakery
  2. Art Gallery
  3. Environmental nonprofit
  4. Restaurant
  5. Marina
  6. Bus tours
  7. Food pantry
  8. Clothing company
  9. Wildlife conservation charity
  10. Performing arts group
  11. Coffee shop
  12. Florist
  13. Homeless shelter
  14. Cultural preservation
  15. Sports team
  16. Youth development nonprofit
  17. Private charter flights
  18. Jeweler
  19. Medical research charity
  20. Antique dealer
  21. Museum
  22. Mobile party DJ
  23. Personal trainer
  24. Daycare center
  25. Animal shelter
  26. Student club or group
  27. Professional photographer
  28. International development nonprofit
  29. Disaster relief group
  30. Zoo or aquarium

The site should exist on your personal domain name under the directory “html”, e.g. “https://www.yourdomain.com/html/”.

All pages should have working navigation to explore the site. Although your work will be primarily HTML and CSS, you can also use Bootstrap 4 (introduced later in class), which adds a little bit of JavaScript.


Specific Requirements

Your site should:

  • Exist on your personal domain name under the directory “html”, e.g. “https://www.yourdomain.com/html/”.
  • Use the file “index.html” as the home page within that directory.
  • Be coded with proper and easy-to-read formatting in HTML and CSS, as reviewed in class. Use tools such as the W3C Validator and the HTML Beautifier to check your code.
  • Use visual design standards reviewed in previous course readings and lectures: margin, white space, colors, image use, etc.
  • Use common web elements such as navigation, footer, etc.
  • Contain at least 8 pages for your fictional business, including pages similar to these:
    • Home: an introduction to the business, with the business name, a summary of the business, a representative stock photo image, and navigation to the rest of the site.
    • About: a fictional description of your business.
    • Testimonials: 3-5 made-up testimonials from fictional customers of your business.
    • Contact: a contact form which submits to a thank-you page, as described in class.
    • Plus at least 3 additional pages of your choosing.
  • Include clear and obvious navigation on every page.
  • Use images intelligently on each page (and not just in the background). Images should be taken from “Free” Online Sources or generated by you personally.
  • Use at least one font loaded from Google Fonts or other online font sources.
  • Include Google Analytics tracking code and AddThis social media code (introduced in class).

All pages should have working navigation to explore the site. Although your work will be primarily HTML and CSS, you can also use Bootstrap 4 (introduced later in class), which adds a little bit of JavaScript.


Deliverables

For all deadlines and milestones, the only deliverable is a complete working URL to your web site.

Drafts of your site will be posted as a URL on Blackboard discussion boards for peer comments.

Your final HTML web site must be submitted to Blackboard as a complete working URL, e.g. “https://www.yourdomain.com/html/”. Do not submit any Codepen links. Only submit your web site link. Screen shots of your web site, or documents of your code, will not be accepted.


Deadlines and Milestones

Drafts of your site will be due for peer review by Friday, October 16, 2020, and Friday, October 23, 2020.

The final site will be turned in as a URL before class on Monday, November 2, 2020.


Grading Considerations

Your web site will be graded on the following aspects:

  • 50%: the complexity of your site layout, and how accurately it works:
    • images and fonts load correctly
    • images are sized well
    • links go to their intended pages
    • text looks formatted correctly
  • 35%: the accuracy and readability (neatness and organization) of your HTML and CSS code:
    • code is indented well
    • the syntax of code is consistent in terms of spaces, letter case, etc.
    • code has useful comments where appropriate
  • 15%: overall visual design of the site in terms of:
    • white space
    • colors and palette
    • image use
    • typography, including choices of font and size between headers and body text

Extra Credit

You can earn extra credit for any or all of the following:

  • Applying advanced Bootstrap 4 effects — up to 10% extraCorrectly use advanced Bootstrap 4 effects as shown in class, such as image carousels.
  • Applying PHP to simplify site management — up to 10% extra: Correctly implement the simple PHP and HTML code snippets as shown in class. Note: the HTML output must include a comment with the name of the individual snippet files, for verification.
  • Applying responsive CSS — up to 15% extra: Correctly implement responsive CSS design snippets as shown in class, so your site adapts to being used on smaller, vertical (portrait) screens and not just desktop browsers.

If you attempt advanced code shown in class, such as image carousels or PHP, they will only improve your grade if they work right. Accurate, usable code operation/rendering is more important than attempting something cool that doesn’t work.