MAT 125: Web Design 1: Fundamentals : EXERCISES

Project One: A Simple Website. A Day in the Life ... (of a Pet or Shoe)

Time to try to fit all the pieces together for the first time and make a simple website by using the HTML concepts we have covered so far.

The concept / content of this site is a "Day in the Life" (from the perspective of a shoe or a pet.). Use each page to create a snapshot of a specific time period in the day for your shoe or pet. Add photos (from the perspective of your shoe or pet), and commentary that reflects the specific activities happening at that time of day.

LINK all the pages together having all links to all pages on every page. You may additionally choose to have the links go from one page to the next. Be sure to include links back to the previous page.

Minimum times of day to be covered are 7am, 11am, 3pm, 7pm and 11pm. Add more times if you wish.

Write enough text to make a complete storyline.

By Due Date:

Create five or more HTML pages using Brackets
TOPIC: Day in the Life of Your Shoe or Your Pet
Create your own page content (text and images) for the website.
Your first page is ALWAYS index.html

  1. Minimum Number of pages: 5
  2. Link All the pages together. (Using Relative Links)
  3. Use the Elements from the Exercises and CSS we have covered so far in class.
  4. Style pages using CSS using a consistent Page Layout Design
  5. Create a thorough storyline - at least a couple of paragraphs per page.
  6. Folder Name: Project1
  7. 1st Page Name: index.html The remainder of the page names should match the page content.
  8. Use Google Fonts for your headlines (or more)
  9. Be sure to use the Design Concepts covered in the Demos for Exercise 5!

HTML Elements - Mandatory MINIMUM from Class Exercises

There are basic elements required from each lesson we have covered. To get a better grade or more points you need to go above and beyond the minimum requirements.

  • Minimum From Exercise One:
    • Two sizes of h tags on every page
    • Correct use of h (headline) & p (paragraph) tags
  • From Exercise Two:
    • Minimum of 2 different types of lists
    • Use CSS Document and Inline Styles to define page styles, font-families, font-sizes, link colors, background colors, background-images, image placement, etc.
    • OPTIONAL: Use an external CSS style sheet
  • From Exercise Three:
    • Background Images placed with CSS
    • Use CSS to float images left or right with added margin to space text away
    • Save images for web use so they load quickly
  • From Exercise Four:
    • Links to your internal pages
    • Links to some external pages (open in a new tab)
    • Links to different locations on a page (Jump Links)
  • From Exercise Five:
    • Review Design Lecture in Demo#5 for good page layout
    • Use an overall wrapper Div for page containment
    • Add a Google font for headline enhancement


  • Shoot your own digital images.
  • Scan images.
  • Use image resources on the web.

Other Project Requirements

Optional: You can use an image, typically thumbnail sized, instead of text to link to other pages, websites, or larger images.

  • HTML tags as listed.
  • At least 5 pages of content (this does not include the HTML Elements page).
  • A Complete Storyline - to fulfill class writing requirements and to make your website more interesting
  • One HTML Elements page which describes which HTML elements were used and where. See Example
    • This page MUST be linked to the HOME page.
    • It is NOT one of the required five pages.
    • List the elements/tags you have used and which pages they are on.
  • Be Creative and have FUN! Don't just look for the minimum requirement.
  • Remember the opening page must be named index.html
  • Folder must be named Project1
  • Place images in an images folder
  • Upload files to server, then proof your work. Open your files in FireFox, right click, choose View Page Source. HTML errors show in red. FIX THEM.

Link to Past Project One Examples

Project One Grading Rubric
Item/Points 7-11 12-16 17-20
Coding Some Most All correct
Requirements Some Most All correct
Item/Points 7-9 10-12 13-15
Function Some Most All
Navigation Some Most All
Effort & Depth Minimal Basic Requirements Above & Beyond
Design & Creativity Minimal Basic Requirements Above & Beyond


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

Coding (20 pts)
Meeting project requirements (20 pts)
Functionality (15 pts)
Navigation (15 pts)
Your effort/depth (15 pts)
Design & Creativity (15 pts)