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

NFT-preview-card-component using Flexbox and Bem

#bem
P
Tokhirkhujaโ€ข 120

@tokhirboiskhonov

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


The 8th small project was completed. It was a little bit easy and took almost an hour to finish.

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • The result is identical to the design, there are many hours behind achieving this impeccable result.
  • When you use the hover effect and cursor: pointer on an element, it usually implies interactivity. To enhance user experience, consider wrapping the name of the "Equilibrium #3429" text in an <a href="#"> tag. This way, users can click on it, expecting some action, like navigating to a page with more information about the collection.
  • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information.
  • For a photo of a person, use their name as the alt text and remove thearia-hidden="true" of this image

I hope you find it useful! ๐Ÿ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

0
Daniel ๐Ÿ›ธโ€ข 36,140

@danielmrz-dev

Posted

Hello @tokhirboiskhonov!

Your solution looks great!

I have a suggestion for improvement:

  • For semantic reasons, use <main> to wrap the main content instead of a <div>.

๐Ÿ“Œ This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

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