Order summary component using CSS and flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @thgsnake👋, good job completing this challenge

  I have some suggestions you might consider to improve your code:

  • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.

  • Since the images do not contribute anything to the content, and only serve as decoration, so it can be hidden for screen-readers if aria-hidden="true" is added and its alt attribute is left empty: <img src="images/illustration-hero.svg" alt aria-hidden="true>

  • In my opinion, the "Change" element should be a button, not a link, since it should perform an action, which is to change the plan and show the new plan's price. Use buttons to perform actions such as displaying a modal, performing calculations. Use anchor tags to redirect users to a part of the page or to an external site.

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. You can read more about this problem here.

  • You do not need to set a width or maximum width for the body element, let it take up 100% of the screen, plus, if you occupy the maximum width, your component will not be centered on screens larger than 1440px.

  • Use min-height: 100vh to the body selector instead of height. This property lets you set a height and let the element grow even more if necessary.

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  2

  ---

  

  Thiago Barboza Dos Santos•190

  @thgsnakePosted almost 2 years ago

  @MelvinAguilar Thank you very much indeed. Your tips were wonderful.

  1