Order Summary

Community feedback

• 

  Osama Elshimy•140

  @Osama-ElshimyPosted almost 2 years ago

  Nice work!

  A few points to improve:

  In HTML:

  • Every a element should have an href attribute. If the link doesn't go anywhere, assign it to # href="#"

       <div class="cancel-order">
               <a href="" class="cancel">Cancel Order</a>
       </div>
  

  • I also saw that you left an image without an alt attribute. alt attributes are essential for screenreaders. The alt attribute should be descriptive of the image.

  • You are using div elements where you don't have to, this is a bad practice. Only use div elements when you need to wrap other elements inside one container.

  • You didn't need the div element with the card class. You can remove it and add the class to the main element.

  • The div element with classes of content, order, button are not necessary.

  ---

  In CSS:

  • Never never use position: absolute and position: relative unless there is no other solution. Flexbox and Grid are much easier and much more powerful.

  • You're using position: absolute and position: relative where you don't have to. You can instead use flexbox to align and center the elements.

  • Flexbox is more than enough in one-dimensional layouts, so you didn't need to use Grid in this challenge. Grid is awesome of course, but it was not necessary.

  • You declared the universal selector * twice. You can add all the properties once like that:

  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;  // It's a good practice to set the `padding` to 0
  }
  

  • In general, you shouldn't depend on element selectors too much. Use classes and ids instead.

  I know that was too much to take in my friend. You did a great job and the learning never stops. If you need any more help, feel free to tell me in the reply.

  If you found this helpful, click the 'Mark as helpful' button.

  Happy Coding

  1