NFT Preview Card Component using HTML/CSS

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.

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