Order summary component challenge hub soluciton by:Fbonilla

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks great and adaptive for mobile.

  iduaine12 already gave feedback on this one, just going to add some suggestion on the site:

  • The background-color for the overall layout should be slightly darker so that the card's white-background-color will be complemented. So on the main tag, use hsl(225, 100%, 94%) as the background-color value.
  • Avoid using height: 100vh on a large container like the main as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • If you zoom out from the layout, you will see that the content is not being centered and the wavy background is not occupying full size. You can use background-size: 100% on the main and use align-items: center on the main as well.
  • The vector/illustration on this is just decorative. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • When using img tag, you don't need to add words that relates to "graphic" such as "image" and others, since img is already an image so no need to describe it as one.
  • For every page, an h1 is needed, so for this one, you can use h1 for the order summary for now. But a better approach would be to use a screen-reader only h1. Have a look at Vanza's solution on this same challenge. Inspect the layout and see the usage of h1 as well its stylings.
  • The music-icon as well is only decorative so hide it using the above method.
  • The annual plan text could be heading tag like an h2 since it gives information on what the section would contain, hence the pricing plan.
  • For the proceed-to-payment-button, you can remove the p tag and just use the text directly as the button's text.

  Aside from those, great job again on this one.

  Marked as helpful

  0
• 

  iduaine12•140

  @iduaine12Posted about 3 years ago

  Hi @fbonilla02 to help with your html issue your button should be <button class="btn-container">Proceed to Payment</button> without the p tag.

  Hope this helps

  Marked as helpful

  0