Project Overview

Simply titled, "Animal Trading Cards", this project combines the skills mastered in the problem set and asks to re-create a webpage from a design prototype.

This is a common workflow for front-end web developers. Typically, you'll be provided with a design prototype that needs to be translated to an actual, functional website. In most cases, designers only provide you with the design prototype. For this project, the design prototype and the HTML have been provided. The design prototype used in this project is inspired by trading cards and features a fish you might recognize from a popular animated film. You’ll be creating the card and swapping out the fish with an animal of your choice.

Project Instructions

  1. Download and unzip Inside, you'll find card.html, styles.css, placeholder.png, and the design-prototype.png.
  2. Next, open card.html and replace the placeholder image and information with your favorite animal's image and information. For the image, you will want to use an image with a width of 300 pixels. If your image is larger, you can set the image's width to 300 pixels in your CSS, but be aware that your image might end up squished or distorted. Later, we’ll talk about how you can fix this problem using responsive images. Also, don't forget to change the image's alt attribute to the name of your animal. So, alt="name-of-your-animal" should be replaced with the actual name of your animal.
  3. Once you've added your favorite animal's image and information, add the proper CSS to styles.css to recreate the design-prototype.png by applying the style rules in step 4. You’ll need to modify card.html to include attributes and use selectors to specify the elements you want to style. Also, make sure to link to your stylesheet in card.html or else your CSS will not be applied to your webpage.
  4. The CSS should apply these styles to match the design prototype:

    1. italicized text for the animal's interesting fact
    2. bolded labels for the animal's list items (e.g. 'Habitat')
    3. no dots for the animal's list items
    4. border around the animal's name, image, and information
    5. border around the animal's information
    6. spacing between the animal's name, image, and information (you will need to use the property padding)


I have decided to use the image of a Philippine Tarsier for this project.


Full Page View in CodePen

Step-By-Step Process

Animal Trading Cards <!-- Step 1: Add link to the stylesheet -->
<!-- Step 2: Add Name of the Chosen Animal -->

Philippine Tarsier "Mamag"

<!-- Step 3: Add image link that includes the animal name as attribute --> Philippine-Tarsier <!-- Step 4: Add class for information section of the card -->
<!-- Step 5: Add interesting fact text -->

A species of tarsier endemic to the Philippines weighing as small as 3 ounces, the Philippine tarsier is the second-smallest primate in the world.

    <!-- Step 6: Add description list -->
  • Scientific Name: Carlito syrichta
  • Behavior: Shy Nocturnal & Solitary
  • Conservation Status: Near Threatened
  • Average Lifespan: 24 years
<!-- Step 7: Add additional description of the animal-->

Their eyes are disproportionately large, having the largest eye-to-body size ratio of all mammals. These huge eyes provide this nocturnal animal with excellent night vision.


  • Adjust width and include margin to put the card at the center

    .card { width: 320px; border: thin solid; box-shadow: 5px 5px gray; margin: auto; padding: 5px; background:#589ca7 url('') no-repeat center top;)}

  • Adjust header to align with image and information

    .name { padding-left: 10px; font-family: Calibri, Candara, "Segoe UI", Optima, Arial, sans-serif; }

  • Style the image to have a margin, and to adjust the width

    .Animal { width: 300px; border: thin solid gray; border-radius: 6px; margin: 10px; }

  • Style to italize and to justify

    .fact { font-style: italic; text-align: justify; }

  • Adjust information including border, margin, alignment and font

    .info { border: thin solid gray; border-radius: 6px; margin: 6px; padding: 5px 5px; text-align:justify; font-family: Calibri, Candara, "Segoe UI", Optima, Arial, sans-serif; font-size: 14px; }

  • To bold the labels

    span { font-weight: bold; }

  • To remove the bullets in the list

    ul { list-style: none; }

1,433 0 0