NFT preview card component using flexbox

Hey there! 👋 Here are some suggestions to help improve your code:

• The "NFT image" alt tag description needs to be improved upon ⚠️. Assume that you are describing the image to a someone over the phone.

• The “icons” in this component are purely decorative. ⚠️ Their alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

• In this component, the "Equilibrium #3429" is a heading ⚠️. So it should be wrapped inside a heading element.

• Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it.

Here are some examples that you can freely use:

Josh Comeau Reset

Eric Meyer Reset

• You should never set a width to the body and you will want to change the height: 100vh; to min-height: 100vh; for improved responsiveness.

• For improved accessibility 📈 for your content, it is best practice to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

Thanks for taking your time for this detailed review.

I'm just learning web development, so your feedback is 100% valued to me. Most of the time I get confused about which CSS units to use for what. If possible could you please provide some resources to learning about when to use what CSS units.

You said I should not set width to body, so where I should use provided width for desktop & mobile? On a container?