Responsive NFT QR component using flexbox and feedback from community

Community feedback

• 

  Clément Creusat•1,655

  @ccreusatPosted almost 3 years ago

  Hi ! Nice job, you completed it and is good!

  Really interesting to read your notes about your experience on this challenge. That's definitely a good tip!

  I would suggest to add link on :

  • image wrapper > it could lead to another page or open a lightbox for example
  • add a link to the creator link, replace the <span> with a <a> tag
  • same for the name of this NFT

  :)

  Marked as helpful

  1

  ---

  

  Iva•120

  @IvuskaPosted almost 3 years ago

  @ccreusat

  Thank you ! I will update the solution.

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @Ivuska,

  I have some suggestions regarding your solution:

  To tackle the accessibility issues:

  • There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution).<Footer> should be in the <main >read more about A simplified web page, might look something like this:

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

  • For any decorative images, each img tag should have empty alt="" andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images in alt="Price:", alt="Remaining time:"

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

  • The avatar's alt text shouldn't be alt="author avatar" , You can use Jules Wyvern as an alt text.

  • You can read more about alt text

  • You can use an unordered list <ul> for class="priceAndTime isResponsive and in each <li>, there would be <img> and<p>(for the text ).

  • You can use border-top to the class="footer isResponsive instead of <hr/>. Overall , your solution is good with great notes.

  Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Iva•120

  @IvuskaPosted almost 3 years ago

  Hi @PhoenixDev22,

  thank you a lot for feedback and tips for useful sources! :) Will update my solution.

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Iva Good Job on challenge

  0

  ---

  

  Iva•120

  @IvuskaPosted almost 3 years ago

  Thank you @Crazimonk !

  1