Order Summary solution

Community feedback

• 

  Jean Ruiz•590

  @jeancarlosruizPosted over 2 years ago

  Hey, great job completing this challenge.

  Here are some improvements you can apply in your next challenge or modify this one:

  **HTML

  • Inside of your main you can use a div with a class container, then use another div that will contain the img instead of the header, in this challenge is not necessary.

  <div class="card"> <div class="top-img"> <img src="images/illustration-hero.svg" alt=""> </div> </div>

  • Always use a <footer> tag in your attribution to avoid accessibility issues.

  • Add a type= button to your button also :), this could help with a clear definition of what the button will do.

  Besides that everything is okay and is completely responsive on my phone. Happy coding, keep going!!

  Jean Ruiz

  Marked as helpful

  0
• 

  Asha•1,210

  @livinglifemeaningPosted over 2 years ago

  I agree with the other comment- for this project, the card size doesn't have to change so have a set width and a set amount of padding within the card (or a set hight).

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi George, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • add descriptive text in the alt attribute of the image
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the header tag container of image
  • to make it look as close to the design as possible set width: 25rem to main tag and decrease border-radius
  • remove all margin from main tag
  • try to use flexbox to the body for 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

  Overall you did well 😉

  Hope this help and happy coding!

  Marked as helpful

  0