Product Preview Card Component Responsive Design using Flexbox

Community feedback

• 

  Matt Seidel•570

  @mseidel819Posted over 1 year ago

  Looking at your semantic markup--

  You want to consider screen readers. If you couldn't see your page, and a robot was describing it to you, would it be clear?

  First thing, I think you should change your <div class="add-to-cart-btn"> from a div to a button. That will signal to the computer that you have a button that is supposed to do something.

  For your header elements, think about how you rank the most important things. This Can line up with font sizes, but not always. In this case, I think the first thing that the viewer needs to know is the product name- this should probably be your <h1>. after that, the <h4 class="segment">Perfume</h4> could probably be <h2>. The prices could probbly end up being <span> elements. I don't think prices are considered semantic elements. (but don't quote me on that.)

  Marked as helpful

  0