Order Summary Component

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Brinda, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • img element must have an alt attribute, it's very important!
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the section container of image
  • instead of using px use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  Marked as helpful

  1

  ---

  

  Brinda AN•30

  @brinda-anPosted over 2 years ago

  @denielden Thank you so much!

  1
• 

  Martin Kamír•490

  @Martin-K-KamirPosted over 2 years ago

  Hey, Brinda! Nice work on the card.

  Couple things i found to improve:

  1. I think it's not good using of having section tag for the img header. Also i wouldn't set border top left-right radius. I would just put overflow hidden to the container of the card so nothing is overflowing.

  2. You set to card-details justify-content and align-items these properties won't work since you didn't display flex or grid. I wouldn't use these properties in this situation. What i would do is display flex, flex-direction column and gap "some value". So each item in the container have same gap. In the design demo the title have bigger gap so i would set to the title margin-bottom to give it bigger space then other elements in that container.

  3. On each text element i found you declare a font-family. Just declare font-family on the body in css. Also you set everywhere padding-bottom to make spacing between elements i would use margin-bottom instead.

  4. On the button you have box-shadow in the design demo there is blurriness on that shadow. So you may forget declare third value for the box-shadow.

  Anyway you did nice work on the card i wish you very best and have happy coding

  0