NFT Preview Card Component using HTML/CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi Dan,

  You're welcome and glad it was helpful.

  The question is: why did you use a <section>?

  According to MDN , <section> is a generic sectioning element that is used whenever it doesn’t make sense to use the other more semantic ones. It is a container that stores self-contained content that still makes sense when placed in a different context. If you are only using the element as a styling wrapper, use a <div>. Visually, your section is probably going to stand out somehow; a different coloured background or some other way to distinguish it from the other content on the page. Adding a label to the section allows it to stand out to non-visual users.

  You can read more in CSS tricks

  As you said, the price and the time are related in the whole component (NFT card). In my opinion, I would choose <ul> as it conveys semantic meaning and rearrange items.

  I’m not sure if I was good at explaining, Hopefully this makes it clear.

  Marked as helpful

  1

  ---

  

  Dan•300

  @dtp27Posted over 2 years ago

  @PhoenixDev22 That makes a lot of sense, and I'll be sure to read that article you sent.

  Thanks!!

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @dtp27 Glad it was helpful . Happy coding!

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Dan,

  Congratulation on completing this challenge. Excellent work! I have few suggestions regarding your solution, if you don't mind:

  HTML

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

  • The link wrapping the equilibrium image (image-equilibrium ) should either have Sr-only text, an aria-label or alt text on the image that indicates where the link navigate the user(not describes the image).

  • I would not use <section> to wrap class="eth-price", You can use unordered list<ul> to wrap class="price". In each <li> should be <svg> and <p>, then you may use flex properties to align them centrally.

  • The avatar's alt should not be empty . You can use the creator's name Jules Wyvern. Read more how to write an alt text

  • To use more semantic tags , you may use <figure> and <figcaption> for the avatar's part.

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  • 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. You can have a look at my solution here, it might help.

  • On the hover on the image , the icon view is missing . You can use CSS for it.

  Aside these, your solution is good. Hopefully this feedback helps

  Marked as helpful

  1

  ---

  

  Dan•300

  @dtp27Posted over 2 years ago

  @PhoenixDev22 Thanks!! This has all been super helpful!

  I have a question on the list over the section -> My understand is that a list (unordered or ordered) is for sets of related items. It seems to me that the price and the time remaining are related in the larger picture (as far as both in the component) but not very related within the component itself. Though admittedly I don't know much about NFT's so maybe they are related. Also, when do you recommend using a section as opposed to not using a section?

  Thanks!

  0