3-column preview card component

Community feedback

• 

  Abdul Khaliq 🚀•72,360

  @0xabdulkhaliq

  Posted almost 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  DECORATIVE SVG'S ♨️:

  • The alt attribute is used to provide alternative text for images in HTML documents. The alt attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.

  ---

  • Now, when it comes to decorative SVGs, they are used purely for aesthetic purposes and do not convey any important information or functionality to the user.

  ---

  • Since these images do not convey any important information or functionality, there is no need for an alt attribute.

  ---

  • So feel free to set the alt attribute as "" for decorative svg's, because alt="" will be skipped by screen readers they will consider the image as decoration

  ---

  Example:

  <img src="images/decorative.svg" alt="">
  
  

  <img src="images/icon-luxury.svg" alt="Luxury-icon">
  👇
  <img src="images/icon-luxury.svg" alt="">
  
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  11

  Marked as helpful
• Account deletedPosted almost 2 years ago

  Hey there! 👋 Here are some recommendations for enhancing your code:

  • The “car icons” in this component are purely decorative⚠️. Their alt tag should be left blank to remove them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The headings in your component are being used incorrectly❌. Since the h1 heading can only be used once ⚠️, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading ✅ since it is reusable and it will give each heading the same level of importance.

  • For improved accessibility 📈 for your content, it is best practice ✅ to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

  • ALWAYS Implement a "Mobile First" approach 📱 > 🖥

  Mobile devices are now the dominant 👑 way in which people browse the web. So when building your content, you will start building with small screen sizes (starting at 320px) and work your way to larger screens using min-width.

  More Info: 📚

  Mobile First

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 👾

  12

  Marked as helpful
• 

  NixyMc•190

  @Nix7amcm

  Posted almost 2 years ago

  Hey @Ola135! 😊

  Excellent job with this challenge! 😃

  I have just a couple tips that might be helpful!

  First, you might consider setting your breakpoint to something around 920px, switching to column a little earlier to prevent the box width becoming too small as the screen size narrows.

  Then, within your query, to prevent the boxes then being too wide, you could set a max-width to your .card element, maybe something around 500px. You could play around with this to see what you like best!

  I hope this helps! Great work! 🚀😃👍🏻

  11

  Marked as helpful