3-column component challenge hub using Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Fernando! 👋

  Great solution! It's great that you are using the landmark elements correctly by wrapping the card element with the main tag and wrapping the attribution with the footer tag. Also, it's great that you are hiding all the decorative images from the screen reader users. Well done! 👍

  However, there are two things that can be improved.

  • Firstly, if you want to remove the accessibility, which is not a big deal in this case, you could have a visually hidden h1 by using sr-only styling. Put the h1 as the first child of the main element. It could say 3-column preview card component challenge project.
  • Secondly, I would recommend using anchor tags or link elements for the Learn More buttons. If this is a real website, those buttons would navigate the users to a different webpage or parts of the page, which is what the link is for. The button elements are for actions like opening a modal, submitting a form, toggling element, etc.

  Overall, great work. The site has a good HTML markup, it's pretty straight forward and you might want to add a visually hidden h1 to remove the accessibility issue.

  That's it! Hope you find this useful! 😁

  Marked as helpful

  0

  ---

  

  Fernando Mendoza•160

  @whiteknight-devPosted over 2 years ago

  @vanzasetia Thank you very much I really appreciate it those advices 😄.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @KnightF2 No problem! 😄

  0