Order Summary Component

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @stellarwobble 👋🏻

  I have some feedback to help you fix the accessibility issues and some other things.

  • First, In the HTML, <div class="main">...</div> should be <main class="main">...</main>.
  • Second, I suggest using <h2> or <p> instead of <h4>, because headings in HTML have to increase gradually, such as h1, h2, h3….. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • I have a more reliable way to position the card in the center, since positon: absolute; may cause some problems down the line, so here's my proposal:

  body {
      background-image: url('./images/pattern-background-desktop.svg');
      background-repeat: no-repeat;
      background-color: rgb(229, 237, 250);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  also I suggest resetting the initial setting of the browser like so:

  *,
  *::before,
  *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
  }
  

  • Next, the music icon, should have aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
  • One last thing, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother. You'll see what I mean when you add it.

  I hope this was helpful 👨🏻‍💻 all in all, you did a great job for the second project, keep it up, you got this. Cheers 👾

  Marked as helpful

  1
• 

  Jenni DeMuir Paquette•40

  @jennidemuirPosted about 3 years ago

  Thank you for your comment and the positivity! This is very helpful information. I especially appreciate your feedback on accessibility as that's an area I'd like to broaden my understanding.

  0