3-column preview card component

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, in case you want to take a look:

  HTML / ACCESSIBILITY:

  • The main content of every page (the card in this case) should be wrapped with the <main> tag.

  • Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. And it is good not to skip heading levels. Maybe it would be better to use <h2> for the types of cars and add an <h1> at the beginning of the page and hide it with CSS for example...

  • The icons are decorative images and therefore need an empty alt attribute to be ignored by a screen reader.

  • Remember that <button> should be used for any interaction that performs an action on the current page and <a> should be used for any interaction that navigates to another view. It seems that links are more appropriate in this case.

  CSS:

  • It would be good to add align-items: center to the body so they don't stretch vertically.

  • The breakpoint for moving from mobile to desktop should be higher (perhaps around 900px would be reasonable in this case). Now it doesn't look very good at certain widths eg around 600px.

  • You forgot to capitalize the headings, you can do it using text-transform: uppercase.

  I hope it’s useful : )

  Regards,

  0