Order summary card using Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,120

  @MelvinAguilarPosted about 2 years ago

  Hi @berta-rf 👋, good job completing this challenge! 🎉

  I like this solution for the challenge. I have some suggestions you might consider to improve your code:

  • In this challenge, the picture tag is not needed, since the image does not need to change depending on the viewport. This is necessary when the platform provides two or more images, for example, one for mobile and one for desktop. You can directly use the image tag in this solution.

  • 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/icon-music.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.

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  2

  ---

  

  Alvin Johnson So•40

  @alvinjohnsonsoPosted about 2 years ago

  Hi @MelvinAguilar!

  Thanks for taking the time to see my solution. I'm trying to familiarize myself working with HTML5 semantics and writing CSS. What you mentioned with the picture tag and the screen readers are a huge help to me. I'll definitely update the solution later on to apply the tips and suggestions you made 😁

  0