The Amazing Order Summary

Community feedback

• 

  Jason Moody•300

  @MoodyJWPosted over 2 years ago

  Hi Hazel,

  Great job on the challenge!

  Some styling suggestions:

  • the border-radius on the hero image isn't correct, the bottom is rounded when it shouldn't be
  • you could add hover states to the other buttons
  • most of the time it's not an issue, but generally it's good practice to add a generic font-family such as serif, monospace, etc. This acts as a fallback in case the font isn't available. Here's more info
  • look into using a CSS extension like Sass
  • your CSS is a bit disorganized, which can be a hassle for people doing code review. I suggest using a formatter add-on, if you're using VSCode there's one called Prettier that's used by a lot of people

  HTML suggestions:

  • moving the footer to the bottom of the page would be ideal
  • watch out for accessibility issues
  • using HTML elements like article, header, h1, etc is a good idea because it will help people using screen readers navigate through the page. Here's a resource on it
  • I suggest using a button element for things like the cancel order action instead of just a p

  Overall you still did a great job and these suggestions won't really change much about the look of the product, but they'll make your code more accessible and legible for others. Also slick move navigating to your YT from the change anchor!

  Speaking of YT, Kevin Powell is a great resource for CSS/SCSS videos.

  Marked as helpful

  0

  ---

  

  P

  Hazel Dotson•300

  @Hazel-BlackPosted over 2 years ago

  @MoodyJW Wow Thank you so much <3 Great tips and the delivery is awesome. also yes that was a slick move tehehe :D

  1

  

  Jason Moody•300

  @MoodyJWPosted over 2 years ago

  @Hazel-Black no problem, happy to help! If you don't mind marking the comment as helpful, I would appreciate it.

  1