Animal Trading Card Student Project #1 during Google Front-End Development Nanodegree Program at Udacity
This is #1 student project made for Udacity classroom on Front-End Web Developer track.
GitHub: link - https://github.com/udacity/fend-animal-trading-cards/
Package ZIP: link - https://github.com/udacity/fend-animal-trading-cards/archive/master.zip
This is a common workflow for front-end web developers. Typically, provided with a design prototype that needs to be translated to an actual, functional website.
The design prototype used in this project is inspired by trading cards and features a fish you might recognize from a popular animated film. The task is to create the card and swap out the fish with an animal of student's choice.
-
Replace the placeholder image in
card.html
and information with your favorite animal's image and information. For the image, you will want to use an image with awidth
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. Also, don't forget to change the image'salt
attribute to the name of your animal. So,alt="name-of-your-animal"
should be replaced with the actual name of your animal. -
Add the favorite animal's image and information, add the proper CSS to
styles.css
to recreate thedesign-prototype.png
by applying the style rules in step 4. You’ll need to modifycard.html
to includeattributes
and useselectors
to specify the elements you want to style. Also, make sure to link to your stylesheet incard.html
or else your CSS will not be applied to your webpage. -
The CSS should apply these styles to match the design prototype:
- italicized text for the animal's interesting fact
- bolded labels for the animal's list items (e.g. 'Habitat')
- no dots for the animal's list items
- border around the animal's name, image, and information
- border around the animal's information
- spacing between the animal's name, image, and information (you will need to use the property padding)
Original photo by Koji Kawano
link http://kkimagery.com/wp-content/uploads/2012/06/Seagull.jpg
This repository is the starter code for all Udacity students. Therefore, we most likely will not accept pull requests.
For details, check out CONTRIBUTING.md.