Order Summary Component using HTML, CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @salmafadlabdulrahman 👋, good job completing this challenge! 🎉

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

  • Even though this challenge is not a full page, you should use semantic tags and a title tag <h1> in your solution. Use the <main> tag to wrap all the main content in your solution instead of using <div class="container"> to improve the accessibility of the website.

  • Not all images should have alt text. The "illustration-hero" is for decoration only, it has no additional meaning to the component, 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"> .This also applies to the music icon

  • 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.

  • 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.

  • Centering the element with position would make your element behave strangely on some mobile devices, "there's a chance the content will grow to overflow the parent". You can use flexbox or grid layout to center elements. You can read more about centering in CSS here.

  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

  1

  ---

  

  salma fadl azzam•330

  @salmafadlabdulrahmanPosted almost 2 years ago

  @MelvinAguilar Thank you so much, I find your suggestions very helpful, I will be using them in my next project. 👏

  1