MAT 125: Web Design 1: Fundamentals : EXERCISES

Project Three: Fictitious Business Web Site Using Simple Responsive Design

Choose a fictitious business you would like to develop a simple responsive website for. Review the research that you did for Project Two into other businesses in the same field. What did their websites look like? Were they responsive - did 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.
  • Ideas for page content:
    • Page One: Index page 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. Explain how you used responsive design in your website.
  • Link all the pages together. Place all links on every page. Use the style of navigation covered in Exercise 7 or 8
  • External links should open in a new window
  • Use a wrapper div to contain your content with a set width
  • Opening page must be named index.html
  • Use page names that match page content
  • Folder name Project3

Page Layout

  • 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

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

Project Three Grading Rubric
Item/Points 10-14 15-17 18-20
Function Some Most All correct
Navigation Minimal Basic Above & Beyond
Responsive Design Minimal Basic Above & Beyond
Requirements Some Most All
Coding Accuracy Poor Mostly Correct Accurate
Effort Minimal Basic Above & Beyond
Content Minimal Basic Above & Beyond
Design & Creativity Minimal Basic Above & Beyond
Critique Participation Minimal Basic Well Done


This Project is worth 180 points.
Each criteria is worth up 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
  • Critique Participation
  • Points will be deducted for late work.

Due Date

See Schedule

Online Demos

Refer to all Demos especially 6-8