Preview Card Component built with HTML/CSS.

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Markus! 👋

  When completing challenges, avoid focusing on speed. Instead, focus on quality by testing with keyboards, zoom, and screen readers.

  A couple of things I would like to suggest:

  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen readers (spelled letter by letter).
  • For the car icons, I recommend using img elements. The circle is already on the icon itself. So, there's no need to create it.
  • Replace all the h3 with p element. Those are not headings.
  • Always specify the type of the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
  • Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. Try to look at the site on a mobile landscape view to see the issue. So, I recommend using min-height instead.

  For your information, it is possible to make the site responsive with no media queries. I recommend taking a look at my solution. I wrote the technique that I used on the README.

  I hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  P

  Markus•240

  @mhjarvisPosted almost 2 years ago

  @vanzasetia Thank you. This has been some of the best feedback I've gotten. I will take all your points into account moving forward. Thanks again.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @mhjarvis You are welcome!

  0