Project: Pet Behaviour Experts

Context

This project was completed as an assignment for a course on jQuery. The subject was of my choosing, so I chose to create a site intended for pet owners, to better understand their pet's behaviours. Below is a list of key features.

  • There was to be at least 3 complete pages.
  • A navigation menu with at least 5 links.
  • The use of at least 4 different examples of either manipulating data on the pages, or changing the visual appearance of certain elements (including animations), both for enhanced design and user engagement.

Technologies applied: HTML5, CSS3, jQuery, Bootstrap, and Photoshop

Page Designs

Home

Home page screenshot for Pet Behaviour Experts

Cats

Screenshot of Cats page from Pet Behaviour Experts project

Contact

Screenshot of Contact page from Pet Behaviour Experts project

Enlarging Elements

For this section of the cats page, I applied a function that enlarges images. The top image shows the default size with the enlarge button beneath it. The bottom image shows the same image enlarged with a return button beneath it to change it back to its default size.

Image of cat playing with toy
Enlarged image of cat playing with toy

FAQs About Cats With Toggle View

For this element, the user sees a list of frequently asked questions about cats. They just have to click anywhere on each line to toggle each answer. Look closely at the bottom question for comparison between the top and bottom images.

Close-up of Cat FAQs section Close-up of Cat FAQs section opened

Appending A Title To Grouped Images

I made this a home page feature in lieu of a single banner image, with the title on the bottom, to help set the tone for the rest of the site.

Close-up of grouped images with a combined and appended title

Pressing A Key To Read Tweets

The user is given the option to press the "t" key on their keyboard to toggle tweets (see bottom image for comparison), instead of clicking on the link provided. This feature can be handy for those with certain physical limitations which can make using a mouse difficult.

Close-up of Twitter keystroke section Close-up of Twitter msg revealed

< Go back to portfolio page