Order Summary Card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Michael Obi! 👋

  Good to see you completing another challenge. 🙌

  One thing that I notice is the same as your previous solution is that the site is missing interactive elements. I recommend wrapping the text content with an interactive element like an anchor tag or a button (depending on what you think will happen after users click the element) to any elements that have interactivity.

  Some more feedback.

  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make screen readers ignore the image. In this case, all images are purely decorative.
  • One useful tip about image. The image is probably decorative if it does not add further meaning to the content.
  • I would recommend removing the min-height: 100vh from the .container. It makes the card has a lot of empty space on some screen sizes.
  • Also, to make the card vertically center, set justify-content: center on the body element. You can add some margin-bottom to the .container element to give some space between the attribution and the card.

  I hope this helps! Happy coding! 🙂

  Marked as helpful

  2

  ---

  

  Michael Obi•70

  @mykexiePosted over 2 years ago

  Hello Vanza Setia, I have updated the code.. when I wrap an image with anchor tag, should I remove "href"?

  which is the best way to use google fonts: import or link ?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @mykexie Why do you wrap the music icon and the illustration with an anchor tag? Of course, don't remove the href attribute. The link element needs the href attribute to make it works as a link.

  The specification says that:

  "If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents."

  "If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents."

  Use link. You will get performance benefits. You can read this article by Harry Roberts to learn more why @import is bad for performance.

  Marked as helpful

  0

  

  Michael Obi•70

  @mykexiePosted over 2 years ago

  Hello, @vanzasetia... I have seen 'img' tag wrapped with 'a' tag somewhere, I think freecodecamp.org cat photo practice...as you talked about making my page more interactive with 'a' and 'button' tags. I've made changes to the code. I will update the previous challenge soon; power failure is trying so hard to slow my progress.

  Muchos gracias

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @mykexie Hi there! I just want tell you that today and tomorrow, I would be offline. So, I can't see the updated solution.

  I hope you have a nice weekend!

  1
• 

  Michael Obi•70

  @mykexiePosted over 2 years ago

  Thank you...and a very happy weekend to you, too

  0