Order Summary Component using HTML and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Layout in general looks great just needed for it a bit taller. Also the site right now doesn't respond well on mobile sizes, if you go to like 400px, you will see that the contents are being hidden by the screen and creating horizontal scroll.

  MikevPeeren already gave great suggestion on this one, just going to add some suggestions as well:

  • When you are deploying into github, make sure that your path for your images or files doesn't use the root path / because that won't work in github. For the background-circles to appear, you should use this value instead on the background for the body tag url(./images/pattern-background-desktop.svg).
  • Use background-size: 100% instead of cover so that it will fit nice.
  • It would be great to have a base styling of this:

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit
  }
  

  This way, handling an element specially its size will be easier because of the box-sizing

  • Always have a main element to wrap the main content of the site. For this use main tag on the .container selector.
  • Just to clarify what Mikey said about the images. When an image on the site is only acting as a decoration and not really adding any information or content to the site, you usually hide those elements for screen-reader users using alt="" and aria-hidden="true" if you are using img tag, but if you are using svg, just use aria-hidden="true".
  • For now, you can use h1 on the order summary text since an h1 is needed on the site. But if you insist on using h2 on it, then create a screen-reader only h1 on the site. Have a look at Vanza's solution on this challenge inspect the layout and see the usage of h1 as well the stylings applied to it.
  • The music-icon is only decorative so hide it using the method I mentioned above.
  • When using img tag, you don't need to add words that relates to "graphic" such as "icon, image" and others, since img is already an image so no need to describe it as one.
  • The annual-plan should be using either h2 or h3 but not h4. Do not skip a level of a heading tag.
  • Lastly, try to make the site as responsive as you can. If you are using width props, maybe you should change it to max-width so that the element won't have a fixed width and will let the element resize if needed.

  Aside from those, great job again on this one.l

  Marked as helpful

  2
• 

  MikevPeeren•2,100

  @MikevPeerenPosted almost 3 years ago

  Hey 👋

  Try to start headers with h1 rather than h2 and then increment by 1. Also leave alt text for images empty when they add nothing to screen readers also on mobile the component reaches the edge of the screen a margin or padding would solve this problem.

  I am also missing the background image 😢

  But for the rest good job 👏

  Marked as helpful

  1