Summary Card Component using Html5 and Css flexbox

Community feedback

• 

  Zineb Boutaa•750

  @zineb-BouPosted about 3 years ago

  Good solution on this one, it responsive down on different screen sizes.

  Here are some notes to Improve your code:

  • You are using <a> for the three buttons change , payment, and cancel, when it comes to choosing between <a> and <button> ask what is the purpose of this component if it is reorienting the user to another page it's a link if it's triggering an action so it's a button
  • The music icon it's for decoration purposes, we don't need to show it to assistive technology, set aria-hidden :true to hide it. It's important to take accessibility into consideration even if you are a newbie.
  • Instead of using a <span > for the title use <h1>, it's better to wrap the whole container inside the <main />
  • You are using <Section / > to divide your card into different parts, in this situation since it's not a page layout, it's just a component, use <div / > to divide your card. (always use the right HMTL markup for the right purpose it's so important)

  Marked as helpful

  0

  ---

  

  mona Elshikh•510

  @MonaElshikhPosted about 3 years ago

  @zineb-Bou Thanks very much vor your valuable comments . It really helps and i appreciate it. :)

  0
• 

  Akshay•810

  @akshaywebsterPosted about 3 years ago

  Hi, there!

  First of all, congrats on submitting your first challenge!

  A couple things to notice:

  1. You could've put the background svg in the body selector with background-size: contain with a background color as well.

  2. The card shadow at the bottom is missing.

  3. You coul've taken the music icon & the pricing text (the h2 & p tags) under one element and the "Change" button in another. So, that could have been two childs of the summar-card section, which would've made the entire box look like the actual design with justify-content: space-between;. Right now it's looking a bit different because the pricing text is positioned in the center of the box.

  I hope you understand what I'm trying to say and that my feedback is helpful to you.

  Have a great day!

  Marked as helpful

  0

  ---

  

  mona Elshikh•510

  @MonaElshikhPosted about 3 years ago

  @akshay1337 Thanks very much, i appreciate your feedback , it is really helps :)

  1