Nft-Card Solution using visibility

Community feedback

• 

  Abdul Khaliq 🚀•72,440

  @0xabdulkhaliqPosted almost 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which lack landmark for a webpage

  ---

  • So fix it by replacing the <div class="container"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>

  ---

  • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

  ---

  CSS 🎨:

  • Removing the margin-top: 5rem from the .attribution will improve the ui

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0
• 

  Elio Flores•400

  @eliofloPosted almost 2 years ago

  Hello,

  Great job on your solution so far! I have a few suggestions to help you improve it even further:

  • Accessibility: Make sure to take a look at accessibility guidelines and run an HTML accessibility report to identify any issues that need fixing. This will ensure that your solution is inclusive and usable for everyone. Some tools HTML validator and Accessibility testing tool.

  • Alt attribute: Don't forget to set the alt attribute for any images you use. This is important for accessibility and also helps with SEO.

  • As an alternative You can use/play with opacity attribute for the overlay class.

  • Centering elements(for the overlay icon): There are multiple ways to center elements, such as using Flex, Grid, or Position. Experiment with different techniques to find what works best for your specific use case.

  I hope these suggestions are helpful to you. Keep up the great work!

  Elio Flores

  0

  ---

  

  Giulia•210

  @GiuliaT97Posted almost 2 years ago

  Thanks so much for all these tips! I didn't know the tools you suggested, I will definitely use them in future projects to make them more inclusive.@elioflo

  0