MAT 125: Web Design 1: Fundamentals : EXERCISES

Project Two: Responsive Design & Business Web Site Research

Part One: Research responsive web design on the internet. Write up 3-5 paragraphs on what you have found. Be sure to save your sources. You will post these in the footer on page two of this project.

Part Two: Choose a type of business you would like to develop a website for. You will use this fictitious business for Project 3. Do research into other businesses in the 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?

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 2 column page layout/design to use on all pages of this website. Use a headline on all pages (could be "Project Two - Web Research"). Add a page identifier to each page.
  • Page One: Your Business
    1. Create a page explaining what business type you are researching and creating a website for (This website will be Project 3).
    2. Use Headlines and paragraphs to break up the copy that you are writing.
  • Page Two: Responsive Design
    1. Research Responsive Web Design on the web.
    2. Write several paragraphs about responsive design.
    3. Discuss why using it is important.
    4. Write a brief analysis comparing all the business websites you chose
    5. Post links to your sources in your page footer.
  • Page Three - Six: Business Research
    1. Find 4 or more business websites (in the same field as the one you will be working on for Project Three).
    2. Create a page for each. For Page names use Example 1, Example 2, etc (or similar). DO NOT USE Page 1, Page 2, etc
    3. Discuss each businesses page design on their respective pages in your website.
    4. Add a screen capture of a page of their traditional sized website (reduce image to fit on your web page)
    5. Add a screen capture of one of their pages from a small browser window or phone size. Make this close to actual size.
    6. Compare the small & large pages for design content
    7. Does design & page contents transform well (large vs small)?
    8. Are the websites responsive? Certain business types are more likely to be than others.
    9. Check the source code and see how many CSS External style pages are linked.
    10. Write several paragraphs discussing this.
    11. Post link to their websites in your page footers.

Page Layout

  • Use a consistent 2 column page design
  • Master Headline on all pages
  • Page Identifier on each page
  • Use a Google Font for headlines
  • Link all the pages together. Use the style of navigation covered in either 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
  • Folder name Project2
  • 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 Fictitious 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 (you can create one for yourself)

Project Two Grading Rubric
Item/Points 10-13 14-17 18-20
Function Some Most All correct
Navigation Minimal Basic Above & Beyond
Requirements Some Most All
Effort Minimal Basic Above & Beyond
Design & Creativity Minimal Basic Above & Beyond
Research and Writing Minimal Basic Well Done


This Project is worth 120 points.
Each criteria is worth 20 points.
Doing the minumum will not get you the total amount of points.

  • Functionality
  • Navigation
  • Project Requirements
  • Effort
  • Design & Creativity
  • Research & Writing
  • Points will be deducted for late work.

Due Date

See Schedule

Online Demos

Refer to all Demos especially 6-8