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.
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:
- Art Gallery
- Environmental nonprofit
- Bus tours
- Food pantry
- Clothing company
- Wildlife conservation charity
- Performing arts group
- Coffee shop
- Homeless shelter
- Cultural preservation
- Sports team
- Youth development nonprofit
- Private charter flights
- Medical research charity
- Antique dealer
- Mobile party DJ
- Personal trainer
- Daycare center
- Animal shelter
- Student club or group
- Professional photographer
- International development nonprofit
- Disaster relief group
- Zoo or aquarium
The site should exist on your personal domain name under the directory “html”, e.g. “https://www.yourdomain.com/html/”.
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).
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.
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
You can earn extra credit for any or all of the following:
- Applying advanced Bootstrap 4 effects — up to 10% extra: Correctly 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.