💯Challenges

Challenge 1 : API Content

• Find an API data source that interest you

• Display the fields of content for:

• Use more semantic figure and figcaption elements for group images with text i.e. captions, descriptions, headers, etc.

• Option A: In class examples

  • https://www.csscolorsapi.com/

  • https://opentdb.com

  • https://v2.jokeapi.dev/

• Option B: Find your own

  • https://github.com/public-apis/public-apis

Challenge 2: Astro Template

• Use provided template

  • https://github.com/ewuweblab/external-api-data-astro

• Utilize Astro framework for

  • Retrieving data

  • Templating data

  • Programmatically display data Reminders:

• DO NOT statically “hard code” the data

Challenge 3 : Style It.

Optionally: See Grid Layouts for Repeating Content

• Determine styling for your chosen content

• Use CSS Flexbox module -- see template

• Use CSS Grid module module -- see template

• Customize the template as you like

Challenge 4 : Code

• Refactor using Astro concepts of

  • Layouts

  • Components

• Understand API concepts

• Use JSON data

• Reminders:

  • DO NOT statically “hard code” the data

Challenge 5 : Process

• Provide URL to your project repo stored on GitHub

  • Example: *https://github.com/YourUserName/RepoName*

• Provide URL to your project website deployed via Netflify

  • Example: https://YourAppName.netlify.com