🎴 3-Column Preview Card Component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is good and it responds well, the mobile layout is great as well.

  Regarding your question:

  • It is fine to use img tag on the icons, alternative is just creating a div to which uses that image as the background-image and on this one, both is fine, since the image is just decoration, you using alt="" on it is great.

  Some other suggestions would be:

  • I would not use section for each card, if I were to use section I would use 1 section to wrap all the cards, since it will be the card-collection-section. You use section to group related components that creates content on its own.
  • Avoid using height: 100% or height: 100vh on the html or the body or any element that is a large container. If you try to inspect your layout in dev tools at the bottom, you will notice that part of the layout is cut and can't be scrolled, since using that limits your element's height that is relative to the viewport's height, you could just remove it or replace it with min-height: 100vh, this will expand if it needs to.
  • Avoid using multiple h1 element on a webpage, always use only 1 h1. On this one, the h1 would be a screen-reader only text, have a look at Grace's solution inspect and look for the h1 element and see the css styling on it.

  Other than those, great job.

  Marked as helpful

  1