NFT preview card component using CSS Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Zakaria,

  Congratulation on finishing this challenge. I have few suggestions regarding your solution:

  HTML

  • The most important part in this challenge interactive elements. Since there's a :hover state on the image and means it's interactive, So there should be an interactive element around it. When you create a component that could be interacted with a user , always remember to include interactive elements like(button, textarea,input, ..) for this imagine what would happen when you click on the image, there are two possible ways:
    1: If clicking the image would show a popup where the user can see the full NFT, here you use <button>. 2:If clicking the image would navigate the user to another page to see the NFT, here you can use <a>.

  • 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.

  You should have used <a> to wrap Equilibrium #3429.

  • For any decorative svgs, each svg tag should have aria-hidden="true" and focusable=”false” attributes to make all web assistive technologies such as screen reader ignore those svgs.

  • Profile images like that avatar are valuable content. The alternate text should not be image-avatar.You can use the creator's name Jules Wyvern. Read more how to write an alt text .

  • The icon view does not really need to be in the HTML. You can use CSS for it.

  • If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the <div class="card__line"></div>, you can use border-top: to the avatar's part.

  • Consider using min-height: 100vh instead of height: 100vh to the body , that let the body grows taller if the content of the page outgrows the visible page.

  • There are so many ways to do the hover effect on the image, The one I would use is pseudo elements::before, ::after. You can use pseudo-elements to change the teal background color to hsla. Then the opacity can be changed from 0 to 1 on the pseudo element on the hover. Also using pseudo elements makes your HTML more cleaner as there's no need for extra clutter in the HTML.

  • Remember a modern css reset on every project that make all browsers display elements the same.

  Aside these, your solution looks great. Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Zakaria•60

  @zakariabelassriPosted about 2 years ago

  Thank you so much @PhoenixDev22 for your suggestions, it was very helpful and made learning easier.

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @zakariabelassri Glad to hear that it was helpful. Happy coding!

  1