Instructions
instructions
User Manual: Pdf
Open the PDF directly: View PDF 
.
Page Count: 2
14/01/2018 Grow with Google Challenge Scholarship: Front-End Web Dev - Udacity
https://classroom.udacity.com/courses/ud304-gwg/lessons/42d3d82e-6056-4162-9183-750d863c24f6/concepts/7d411cb8-f24f-41c9…
1/2
Project Overview
Are you starting to feel like a web developer yet? You
should!
Before you move on, I have one more challenge. I
want you to use what you've learned up to this point
to complete the following project. Simply titled,
"Animal Trading Cards", this project combines the
skills you mastered in the problem set and asks you
to re-create a webpage from a design prototype.
This is a common workow 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. However, for
this project, I've provided you with the design
prototype and the HTML. The design prototype used
in this project is inspired by trading cards and
features a sh you might recognize from a popular
animated lm. You’ll be creating the card and
swapping out the sh with an animal of your choice.
Project Instructions
Review the Animal Trading Cards project rubric.
1. Download and unzip fend-animal-trading-
cards-master.zip. Inside, you'll nd 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
Animal Trading Cards Overvi…
Lesson 8:
Project: Animal Trading Cards
1. Animal Trading Cards Overview
2. Animal Trading Cards
14/01/2018 Grow with Google Challenge Scholarship: Front-End Web Dev - Udacity
https://classroom.udacity.com/courses/ud304-gwg/lessons/42d3d82e-6056-4162-9183-750d863c24f6/concepts/7d411cb8-f24f-41c9…
2/2
NEXT
end up squished or distorted. Later, we’ll talk
about how you can x 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)
Supporting Materials
fend-animal-trading-cards-master.zip
Animal Trading Cards Overvi…
Lesson 8:
Project: Animal Trading Cards
1. Animal Trading Cards Overview
2. Animal Trading Cards
