Order summary component

Hey @mayor-creator!

Nice job on this challenge, it looks good! Don't worry, responsive design is hard to do right in the beginning, you'll get better. If you like learning from videos, I can highly recommend Kevin Powell's YouTube channel, he explains things about web development in a great way, like this one about responsive design.

I went over your code and can give you a couple of tips:

• For the title ("Order Summary"), you used an h2. Since it's the only title on the page, it would be better to use an h1. Each website should start with an h1, since it's the most important title describing the page. If there are more headings, you can lower with h2, h3, and so on.
• The design contains three interactive elements, and it was a good decision to use a button for "Proceed to Checkout". However, you didn't use interactive elements for the remaining two, which is confusing and hurts UX. Even though they are styled as links, clicking on them doesn't do anything. I recommend using a elements, for this challenge they don't need to point to anything.
• Sticking to your interactive elements such as the button, it's a good practice to think about hover and focus styles. For example, you could make the blue darker on hover and even darker on focus, so that mouse and keyboard users know that this button is currently "selected".
• You have an img.music_icon element for the music icon. In this case, I would leave the alt text empty, because it's mostly for screen reader users. They don't gain any benefit from this icon, it's purely for styling purposes and doesn't add anything to the content. So, you could write alt="" to indicate that the image is not important, or even add aria-label="hidden" to hide it from screen readers.
• On smaller screens, the card is stuck to the bottom of the browser. Adding some margin (like you did for the top) would give it more breathing room and improve the styling.

Hope these tips help you out, let me know if you have any questions :-)

Hi, Paul! 👋

Congratulations on finishing this challenge! 🎉

I recommend reading the "Responsive design ground rules" blog post. This will give you a guide on how to create a robust and predictable responsive design.

@andreasremdt has given incredible feedback and I recommend implementing them on this project. That feedback is specifically for this solution and also improving your code is something that you will often do as a developer.

Some suggestions:

• Use CSS to give underline instead of using u tag.
• There's no need to set height on the card (main). Let the elements inside it control the height of it.
• The card only needs a max-width to prevent it from filling the entire page. By using max-width the card allows to shrink if ever needed. So, set max-width and remove width.
• To make the card in the middle of the page, you can make the body element a flexbox container.

/**
 * 1. Make the card vertically center and
 *    allow the body element to grow if needed
 */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 1 */
}

• Use the em unit for media queries. It adapts when the users change their font size setting. Here are some references.
  • @media - CSS: Cascading Style Sheets | MDN #accessibility_concerns
  • PX, EM or REM Media Queries?
• Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs. I recommend reading this article about rem and em unit. This article explains both units in a simple way.

I hope this helps. Happy coding!