Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CSS grid, transform, positioning, flexbox

@wtwilliams310

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedback is welcome and appreciated.

Thank you.

Community feedback

@VCarames

Posted

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

  • The picture element is not needed for this challenge.
  • The NFT alt tag description needs to be improved upon. This is what your users are purchasing. You want to describe what the image is; Assume you’re describing the image to someone over the phone.
  • The “Icons” serve no other purpose than to be decorative; They add no value. Their alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

More Info:📚

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

  • The profile image alt tag needs to be improved. It should only state the following; “Headshot of -person’s full name-“

More Info:📚

Headshot Alt Text

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit 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! 🎄🎁

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord