The Animal Shelter website is not a fully built out web application, but it has a lot of great features for more advanced web design students to learn how to design, build and make function properly. In the process of building this website, students learn a great deal of best practices from both a user experience design and coding perspectives.

The site is responsive and the first job is to take the design mockups, as created in photoshop, seen in this section, and convert them to HTML and CSS, making the design fully responsive along the way.

Beyond just being a simple HTML webpage, this site uses a database to store records for animals up for adoption, and the content of that data is pulled from the database and displayed on the front page.

You can view the completed project here:
https://mead.design/animalshelter

The database for this project is very simple. Just one table to keep track of the list of animals available in the shelter. If there were to develop into a more robust web application, additional tables would be needed for all kinds of information that would be necessary to track in a real business. But for the purposes of this project, it is important to keep it simple so that students can focus on how to get information into the database, then back out and displayed on their page.

You can see the fields that hold information about each animal in the image in this section.

The adopt page is the other page in the navigation that is linked up and much of the site’s functionality is built into that page. There is a lot of great examples in terms of both functionality and design. The slider at the top of the page will show pictures of animals that have been marked as feature animals in the database.

The column on the left is pulling records from the database about animals that are up for adoption, and a nice lightbox effect has been added to the photos, so when you click them, they actually open up larger, enticing potential viewers to adopt those animals.

At the bottom of the page is a form that allows users to add records to the database. On a real Animal Shelter website, this form would probably be behind a login area, but for the purposes of this project, it made sense to include it here.

When someone uploads a photo and adds the other required information to the database, the image is copied and cropped at multiple sizes and stored on the computer. If the user chooses to make this a featured image, it will automatically be included in the slider at the top of the page. This kind of dynamic functionality is representative of the amazing things that can be done with PHP and MySQL.

The pagination and search features also function properly and provide students with examples of what can be done even with simple one table database.

The “critter feed” on the right side of the page is real Twitter feed using the Twitter API to get data from a specific Twitter account and then I use PHP to extract the data and put it into a format that allows for custom styling.