NFT

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @xchen1778 ,

  I have some suggestions regarding your solution:

  • You can use <footer> landmark for the attribution .HTML5 landmark elements are used to improve navigation .

  • Use the <a>to wrap the main image/image-equilibrium not the icon-view

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

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

  • I would use 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 avatar's alt shouldn't be empty , you can use Jules Wyvern for it.

  • Read more how to write an alt text

  • So you can use <ul> to wrapclass="price-time" and in each <li> there would be <img > and <p>`` .

  • the link should be wrapping the main image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • Use <p> instead of header <p class="author">Creation of <a href="#">Jules Wyvern</a></p>

  • For the avatar's part , you can use <figcaption > and <figure> .

  • Use min-height: 100vh; instead of height: 100vh /using vh (viewport height) units allows the body to to grow taller if the content outgrows the visible page./

  • It's not recommended to use px for font size . Using px won't allow the user to control the font size based on their needs.

  General point : Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.(better not to style on ID'S).

  You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

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

  0