3-column-preview-card-component using HTML and CSS

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Rotimi, great work, and glad to hear that you can see yourself improving every day 😊

  I think you did many things well here, including using sr-only, aria-hidden for icons, and also using a for the call to action button, and so there's not a lot to comment on. The only comment I have is just for the call to action button in mobile mode, as it looks like its width got smaller and everything looks squished to the point where the text is no readable. This could be due to the width: 3.438rem in mobile mode. I think you might not need that, so try removing it and see. Also, you can try using article instead of div for each of the cards, as they are like individual posts and can act as standalone items.

  Well done, and keep going! 😊

  11

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Rotimi , Congratulations on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code to improve the html markup/semantic:

  Improve your html markup using meaningful tags to wrap the content, you can replace the div you’ve used for each card with <article>. Remember to wrap big blocks of content with semantic tags and never divs, use divs for small blocks.

  Your solution seems fine, you did a really good job wrapping the content for these 3 cards. Something you can improve here is to use a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.

  ✌️ I hope this helps you and happy coding!

  01

  Marked as helpful