MAT 125: Exercises & Projects

Final Project: Fictitious Business Web Site Using Simple Responsive Design


Choose a fictitious business you would like to develop a simple responsive website for. Do some research into other businesses in this same field. What do their websites look like? Are they responsive - do they adjust to different window sizes from a large window in a normal monitor, down to the size of a tablet and also to a size that would be viewed in a phone? What type of content did they have? How many pages?

Use this web research to develop ideas for page layout and relevant page content.


Project Requirements

  • Choose the business type you will be creating a website for
  • Post the business information on the Discussion Board. Include a business name if possible.
  • Create a simple responsive website with 4-6 pages of content. Use one of the two styles we have covered, either the Ex9 - simple responsive website with 2 columns or Ex10 - FlexBox styled responsive website with 2 or more columns.
  • Ideas for page content:
    • Index Your first page (index.html) can explain what the business is - an about us type page.
    • Page Two - Six: Create several pages of relevant content that fits with the type of business you have chosen. Some ideas for pages could include: product or menu pages, a contact us page, history page, etc.
  • Add an Artist Statement page that is linked from the footer on the index page following the format we have been using in the last set of exercises. Include your wireframe, font and color choices. Be sure to explain how you used responsive design in your website.
  • Link all the pages together. Place all links on every page. Use the styles of navigation covered in Exercise 7 -10, either as a horizontal navigation bar or add the navigation into the aside area
  • External links should open in a new window
  • Use a wrapper div to contain your content with a set max-width
  • Opening page must be named index.html
  • Use page names that match page content
  • Folder name Final

Page Layout

  • Use either type of Responsive Design covered in class from Exercise 9 (media styles) or 10 (flexbox)
  • All images must be formatted for web
  • Style images using CSS (padding, margin, borders).
  • Use the p & h tags to format your text.
  • Use CSS to format all text, fonts, colors, sizes, padding, margin, etc.
  • Create a CSS External Style Sheet for main page styles (create consistency)
  • Use CSS Document Styles for specific page styles.
  • Use CSS Inline Styles as needed
  • Use Google Fonts for headlines

Some Suggested Business Choices

Choose one of the following businesses or think of your own.

  • Diner / Restaurant
  • Coffee Shop
  • Floral Shop
  • Bike Shop (motorcycle or bicycle)
  • Graphics Business
  • Artist Portfolio
  • Your Choice
  • Whatever you choose, let me know!

Points Possible: 160

Review the Demo pages for CSS style use.

Final Project Grading Rubric
Item/Points 0-6 7-11 12-17 18-20
Function Poor Some Most All correct
Navigation Minimal Basic Well Done Above & Beyond
Responsive Design Minimal Basic Well Done Above & Beyond
Requirements Few Some Most All
Coding Accuracy Poor Mostly Correct Well Done Accurate
Effort Minimal Basic Well Done Above & Beyond
Content Minimal Basic Well Done Above & Beyond
Design & Creativity Minimal Basic Well Done Above & Beyond

Evaluation

This exercise is worth up to 160 points.
Each criteria is worth from 0 to 20 points.
Doing the minumum will not get you the total amount of points.

  • Functionality
  • Effective Navigation
  • Responsive Design
  • Project Requirements
  • Coding Accuracy - Proof in FireFox
  • Effort/Depth
  • Content
  • Design & Creativity