Instructions
instructions
User Manual: Pdf
Open the PDF directly: View PDF 
.
Page Count: 2
| Download | |
| Open PDF In Browser | View PDF |
14/01/2018 Grow with Google Challenge Scholarship: Front-End Web Dev - Udacity Lesson 8: Project: Animal Trading Cards 1. Animal Trading Cards Overview 2. Animal Trading Cards Animal Trading Cards Overvi… 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 work ow 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-tradingcards-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 https://classroom.udacity.com/courses/ud304-gwg/lessons/42d3d82e-6056-4162-9183-750d863c24f6/concepts/7d411cb8-f24f-41c9… 1/2 14/01/2018 Grow with Google Challenge Scholarship: Front-End Web Dev - Udacity Lesson 8: Project: Animal Trading Cards end up squished or distorted. Later, we’ll talk Animal Cards Overvi… about how you Trading 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 1. Animal Trading Cards Overview 2. Animal Trading Cards your animal. 3. Once you've added your favorite animal's image and information, add the proper CSS to styles.css to recreate the designprototype.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 NEXT https://classroom.udacity.com/courses/ud304-gwg/lessons/42d3d82e-6056-4162-9183-750d863c24f6/concepts/7d411cb8-f24f-41c9… 2/2
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.4 Linearized : No Page Count : 2 Creator : Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/63.0.3239.84 Chrome/63.0.3239.84 Safari/537.36 Producer : Skia/PDF m63 Create Date : 2018:01:14 08:20:57+00:00 Modify Date : 2018:01:14 08:20:57+00:00EXIF Metadata provided by EXIF.tools