NFT preview card component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @jilliannoreen ,

  Congratulation on completing this frontend mentor challenge.

  I have some suggestions regarding your solution:

  • There should be two landmark components as children of the body element - a main (which will be the NFT card ) as you did and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

  • Anything with a hover style in design means it's interactive. you need to add an interactive element <a> around the image , Equilibrium #3429 and Jules Wyvern.

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).

  • look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

  • The icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

  • There are so many ways to add the hover effect on the image , The one I would use, using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover as there is no reason to have the extra clutter in the html.

  The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • The avatar's alt should not be creator image. It's meaningless , you can use the creator's name Jules Wyvern. Read more how to write an alt text

  • You can use <figure> and <figcaption > for the avatar's part.

  CSS

  • To use more semantic tags , you can use <ul> to wrap class="nft-other-info"and in each <li> there would be<img>and <p>.

  • width: 270px;an explicit width is not a good way . consider using max-width to card instead and a little margin to the card .That will let it shrink a little when it needs to.

  • height: 460px; It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

  • No need for the <div class="card-line"></div> , you can use border-top to the class="nft-creator" .

  General points :

  • It's recommended to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  • Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  Overall , your solution is good. Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Jillian Noreen•60

  @jilliannoreenPosted over 2 years ago

  Hello, @PhoenixDev22. I really appreciate the effort you put into reviewing my solution and providing me with thorough feedback. I'm glad you took the time to explain things really well. It definitely helps me understand what I need to work on. I will certainly put your advice into action and implement the changes you suggested. Thank you so much!

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @jilliannoreen You’re welcome. I’m glad it was helpful. Looking forward seeing more solutions from you .

  1