MAT 125: Exercises & Projects

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 and Design 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.

Post your choice of topic - Pet or Shoe - in the Discussion for Project One Subject Choice

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. A couple of paragraphs per page to tell the story in the pictures, matching the time of day.

Links to Past Project One Examples . (These were done prior to the addition of Exercise 6 to this section.)

Project Requirements

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
   Plus an Artist Statement linked from the page footer area that gives a rundown of how you used parts from each exercise to complete your project.
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 three 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 Exercise 5! The Basic page layout design concepts and use a Mood Board or Style Tiles to plan your color palette and font use. Create a wire frame of your planned page layout.

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 (headline and subhead)
• 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 to keep your page design consistent
• From Exercise Three:
• Background Images placed with CSS
• Integrate text and images by using CSS float on placed images (left or right) with added margin to space text away, but have it next to your image content.
• 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)
• Use Brackets HTML Editor to complete the project.
• From Exercise Five:
• Review Design Lecture in Demo#5 for good page layout
• Create a wire frame of your planned page layout.
• Use an overall wrapper Div for page containment
• Add a Google font for headline enhancement
• Develop a Mood Board or Style Tiles to plan your color palette and font use.
• From Exercise Six:
• Add one of the items covered in this exercise, your choice. Table, IFrame or simple Google Form

Images

• Shoot your own digital images. Resize for good web use.
• Scan images.
• Use image resources on the web.