Google-dev-scholarship_Mockup-Project_Trading-Card

Animal trading cards

This project is part of the Front-End Web Developer Nanodegree Program hosted by Udacity in colaboration with Google. Below you can find the description and requirements of the project.

Project Submission

Use what you've learned about CSS to convert a design prototype into a functional webpage!

Once you're satisfied with your result, check your project against the Project Rubric to make sure you've satisfied all requirements. Create a zip file containing card.html, styles.css, and your new animal image (unless you linked to an image hosted online). Submit your project to be reviewed. Have fun and be creative 🐠 🐍 🐅 🐼 🐫 ! Writing CSS isn't an exact science, so feel free to experiment. For example, you might want to add rounded corners or a background color to your card. Your submission should resemble the design prototype, but it's okay if it doesn't match exactly, so long as you satisfy all the requirements.

CRITERIA

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.

Code Quality

• 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.