UDACITY Front End Web Development Nanodegree
Project 1: Animal Trading Card

Using HTML, and CSS(via Visual Studio Code)

by Laura Vara

Live Animal Trading Card website: https://vara-co.github.io/animal-trading-card/

NOTE: An extra html file had to be created in order to deploy the live webpage via github. Thus the one with the name index.html which is identical to card.html

Index

1. Content of the repository
2. Instructions for the Project
3. References

Content of the repository

• index.html <-- This is the HTML used to deploy the live Animal Trading Card web page. It didn't want to deploy card.html.
• card.html <-- Original HTML file created for the project. A copy was made named index.html to deploy it as a live website.
• styles.css <-- CSS file with all the styling needed to meet the requirements plus my own creative twist.
• Resources directory:
  • AnimalTradingCard_bkgnd.jpg <-- web page background image created with AI
  • Pop_outCaribou.png <-- Animal image without a shadow
  • Pop_outCaribou2.png <-- Animal image with shadow for pop-up effect
  • Mock_AnimalTradingCardproject.png <-- Prototype image I designed prior to starting the project to have an idea of what I wanted to create.

Instructions

Given a predetermined HTML file with code and a blank CSS file, link your CSS file to the HTML and edit them acordingly to create an Animal Trading Card
You are to replicate this image and add a few things after all requirements have been met:

Requirements

• 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 iimage (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 ste 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 meaninful names.
    

  • Separation of Concerns:

    * Students separates HTML from CSS by linkig 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.
    

Result

References for the Animal Trading Card Project

Most of what's in this challenge, was covered in class or during the lessons. However, resources that weren't covered will be referenced here.

• Background CSS size: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images

• Center align: https://www.w3schools.com/css/tryit.asp?filename=trycss_align_padding2

• Center align elements: https://www.w3schools.com/css/css_align.asp

• List editing so margin could be adjusted and bullet points removed: https://www.w3schools.com/css/css_list.asp

• Google font types: https://fonts.google.com/selection

• Google font APIs Documentation: https://developers.google.com/fonts/docs/getting_started

• Google font "Cinzel" used for the Animal name: https://fonts.google.com/specimen/Cinzel

• W3 Schools color picker: https://www.w3schools.com/colors/colors_picker.asp

• H3 and image overlap on CSS: https://stackoverflow.com/questions/270493/how-would-you-make-two-divs-overlap

• Shorthand borders: https://www.w3schools.com/css/css_border_shorthand.asp

• Box Shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

• Padding: https://developer.mozilla.org/en-US/docs/Web/CSS/padding

• Caribou References:

  • Image: https://pixabay.com/illustrations/ai-generated-caribou-winter-8634005/
  • Webpage background created using Night Cafe Studio: https://creator.nightcafe.studio/
  • Caribou Information: https://www.adfg.alaska.gov/index.cfm?adfg=caribou.printerfriendly#:~:text=Caribou%20have%20large%2C%20concave%20hoofs,which%20both%20sexes%20grow%20antlers.
  • ECOS Environmental Conservation Online System (Caribou): https://ecos.fws.gov/ecp/species/4618#:~:text=The%20average%20lifespan%20for%20caribou,calves%20typically%20survive%20to%20adulthood.

---