Order Summary Component with HTML, CSS, Flexbox and Grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop and mobile looks good and the layout scales very well in screen changes.

  Some suggestions would be:

  • Right now, the wave background-image is not applying. Avoid using / as the path of file, / or root path works differently in github. Instead, the, on the body tag, on your background property, use ../ on the path of the svg you are using.
  • The image on the card should use alt="" since the image is just a vector and just for decoration. If an image adds content to the website, use a descriptive alt, but if the image is just for purely decoration, better using empty alt="".
  • On the body tag, do not add width: 100vw, this will just create a horizontal scrollbar which I assume you using overflow-x: hidden to hide it. Just remove the width property and remove the overflow as well.
  • The music icon should have alt="" as well. Also, when using alt avoid adding words that relates to "graphic" like "icon, logo, image", assistive tech will handle those for you.
  • annual plan could be a heading tag since the component itself is directly related to the pricing that the user have made. Making this a heading tag, user will know much faster what was their choice of plan, if for example they have forgotten it, since they could just navigate the heading tags.
  • proceed to payment and cancel order should be using a tag and not button. Use button if it controls something, a modal like that.
  • Lastly, you don't need position: absolute on the footer :>

  Aside from those, really great job.

  Marked as helpful

  0