3D Column card preview

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">3-column preview card component</h1>

  • Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by leaving its alt attribute empty.

    You can read more about this here 📘.

  • The <a> element is not supposed to be used inside a <button> element. The <a> element is used to create links that navigate to other pages or sections on the website, while the <button> element is used to create buttons that initiate an action or event on the page.

    Nesting an <a> element inside a <button> element can create confusion for screen readers, as it does not clearly define the purpose of the link. Also, the user could expect different behavior.

    Use only the <a> tag.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0

  ---

  

  Kevin K Wang'ombe•40

  @kevinwangombePosted almost 2 years ago

  @MelvinAguilar Thanks for all that. I wanted to use the button tags only and instead, I used both button and anchor. Will try my best to make it better.Thanks so much.

  1