A6: Business/Service-Oriented Site

Final Project

This project focuses intensely on design, CSS styling methods, responsive layout, navigation, functionality, and the separation of presentation from content.


Create a website for a real or mock business/service-oriented site (this can include a professional portfolio as well). Even if the site is geared towards for-profit business, it should be limited in it services or products offered. This limitation serves a few purposes:

  1. Limit the realistic scope of the production work to make the site “doable” in the given time-frame
  2. Choosing something that offers limited services or products will help you to create a more realistic website. For instance, it is reasonable for an upscale restaurant to offer a limited menu, while it is less realistic (less competitive) for a sporting goods store to show its product line on the web without listing all of its products from a database. It is manageable to make a site with a short list of products/services with what you have learned and within the given time frame; it is unreasonable to try to create a convincing site, though, with 100, 1000, (etc.) product entries.
  3. If you wish to create a site using a “product” that would traditionally need to sell hundreds of items available online, consider marketing to a smaller niche market for a “boutique” version of the product. For instance, if you want to have a footwear site, sell only high-end, designer boots, and limit the merchandise.

Some Ideas

To help you think of types of sites that might be appropriate for this time frame and scope-of-work, read through some possible ideas:

  • Professional Portfolio
  • Upscale restaurant
  • Charity organization
  • Pet adoption
  • Local park or recreation facility
  • After School Program
  • Day Spa
  • Bar or Nightclub
  • Recreational sports club/team
  • Fraternity/ sorority/ honors club
  • Contractor services
  • Dentist/ Physician services
  • Boutique clothing


  1. HTML pages must be written in valid, HTML5
  2. The site must have a “responsive design”, utilizing media queries that address a minimum of three breakpoints for optimal viewing on small, mid-range, and large screens.
  3. All styling should be accomplished through external style sheets.
  4. You must have a MINIMUM of four separate pages within the site
  5. You must have a global navigation toolbar on each of the pages that is responsive.
  6. You must have the following links available from every page (they do not necessarily have to be in your global nav bar):
    • a contact link
      • This should have relevant contact info (this can be dummy info if you wish)
    • link to a page/section telling us about the site/company/mission
      • About the site, the organization, or the artist. This is a good place for a mission statement or artist statement. It can also be where you put any credits to resources used for the production of the site.
    • links, a sitemap, or other resources
      • This should be a place where you provide links to external resources, OR you can make a sitemap of links to all pages within your own site, OR you can make it some other type of resource page. For example, you might want a page providing informational links to other useful community resources if you are doing a community or charity-based site. You could also make this page an FAQ page for a business, providing commonly asked questions and their answers. It could also be a consumer-education page that helps customers better understand your the company’s services and why they might need them. This type of page is good for technical trades, like electricians, chimney sweeps, pool repairs, plumbing, etc. You can also propose an alternative to this link type.

    The remaining minimum pages are up to you as far as content. For instance, you could have a “products/services” global link that takes you to a page with several local link page choices, like “massage,” “manicures”, “pedicures,” “sauna”, and “facials.” You could also choose to have a products page that simply lists all of the products on that same page if they make sense together.

  7. You are required to create a basic form (it does not need to actually function). The most common type of form that you could use is a contact form. The form must contain the following input types:
    • input, type=”text”(for thinxgs like name, address, etc.)
    • textearea (for users to leave comments)
    • either radio buttons or checkboxes (for things like preferences)
    • a select/option input type (examples: select a state abbreviation, select “how did you hear about us?” option, etc.)
    • submit button
    • Your form must also use ADA accessible <label for=””> tags
  8. Use at least ONE of the following:


Acceptable coding and what to avoid

You have learned a lot so far in this class, and you have a good base set of code resources to work from. While you are allowed to look back to previous assignments for layout, coding, and styling practices, you should be careful to make this project uniquely its own.

Avoid duplicating previous assignments in a way that the new one cannot transcend the former styling, layout, or content. Your grade will be significantly docked if the new site does not have its own unique look and feel in spite of using some repurposed code and structure from another project. A large part of this assignment is assessing your ability to synthesize the things you learned so that you can create original and new work. Therefore, be sure to actually use critical thinking to “synthesize” your knowledge with skills … and not merely copy old work and pass it off as new.

Lastly, you are allowed to use other people’s third-party javascript widgets/plugins to enhance the user experience on your site. You are NOT, however, allowed to use website templates of any kind. Using third-party javascript is acceptable for this assignment because our class is not primarily focused on learning how to author javascript. It is, however, focused on students learning how to create well-designed responsive layouts using HTML and CSS.

If you are unsure about what will be okay to use, just ask.

Digital Art, Design, and Communication Education