Order Summary Card

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Liz, You have done a good work! 😁

  Some little tips to improve your code:

  • To add the top image in the background just put more specific background properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • use main tag to wrap the card and improve the Accessibility but not as a container of that one element or inside elements of card: main is to contain the main page content of all the html page
  • also you can use article tag instead of a simple div to the container 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 header container of image
  • remove all margin from .main-card class because with flex they are superfluous
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  1

  ---

  

  Liz•80

  @Azulio123Posted about 2 years ago

  @denielden Excellent feedback. I will get back to this project soon and update with good changes. Thanks for taking the time!

  I really like the <article> tag suggestion. I am really trying to take in all the information I can about accessibility.

  I was told if the image is purely decorative, it doesn't necessarily need an alt tag. But! I will put one regardless. I always liked it.

  <main> is for the entirety of the content of the body? Ok, nice.

  Gosh, there is still a lot to learn about the best grid to use for CSS.

  As I go along sticking things together and making them not slide all over each other, I tend to delete most of the margin and padding rules I make. So removing the margin from .main-card makes perfect sense.

  I really cannot thank you enough for taking the time. I appreciate it a lot.

  0

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @Azulio123 It was a pleasure to spend my time to help you improve!

  Yes, if the image is purely decorative it doesn't need the content of the alt tag. But remember to always put the alt tag in the images... if decorative leave the tag empty alt=""

  main is the tag that contains and indicates the main content of the page... i.e. everything that is not a header, footer or sidebar

  Keep it up Liz :)

  Marked as helpful

  0