Animal Trading Card Project - Udacity [Front End Web Development Nano Degree]

Reviewer Feedback:

"Dear Student,

This work shows lots of effort and time has been put into this work to achieve this submission. You successfully created a card showing some fun facts about your favorite animal. I learned a lot in the process. I must commend the effort and acknowledge the fact that you have a mastery of the course content at your palm. Please keep up the spirit and remain brilliant."

Grade - Passed

Project Summary

In this project, you'll have the opportunity to demonstrate your new web development skills by re-creating 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 into an actual, functional website. The design prototype used in this project (which you can see in the image below) is inspired by trading cards and features a fish you might recognize from a popular animated film. You’ll be creating a card like this and swapping out the fish with an animal of your choice.

Project Criteria

Design Specifics

• Page resembles card from design prototype.
• The text is italicized for the animal’s interesting fact.
• The labels are bolded for the animal’s list items.
• The dots are removed from the animal's list items.
• Uses border around animal’s name, image, and information (interesting fact, list items, and description).
• Uses border around animal’s information.
• Uses spacing between animal’s name, image, and information.
• Card width should be fixed and include the spacing around the image (Since image is 300px wide, card should be 300px + spacing on either side. Card should not expand with the browser window).
• Feel free to customize your information and styles so long as you follow the above rules. For inspiration, you can try playing around with background colors or border radius!

Custom Image and Text

• The placeholder image and information is replaced with favorite animal image and information.
• The image is 300px wide or the image's width is set to 300px.
• The image’s alt is relevant to the animal used.

CSS Classes

• The HTML includes classes that are used for styling.
• Classes are given meaningful names.

Separation of Concerns

• Student separates HTML from CSS by linking to stylesheet.
• HTML code does not include <style> elements or style attributes in the body.

Code Quality

• Code is ready for review, meaning new lines and indentation are used for easy readability.