3-column preview card component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year 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!

  Marked as helpful

  1

  ---

  

  Ola135•60

  @Ola135Posted over 1 year ago

  Hello @0xAbdulKhalid!

  Thank you for the feedback and your time. I'll go through the code and make required changes.

  Happy coding to you too! :)

  0
• 

  バレンタイン 😈•64,190

  @VCaramesPosted over 1 year 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! 👾

  Marked as helpful

  1

  ---

  

  Ola135•60

  @Ola135Posted over 1 year ago

  Hello @vcarames!

  Thank you kindly for your feedback. It helps a lot.

  Could you please explain to me whether it is necessary to use h1 heading at least once in the project or can we skip it and just use h2 heading as you suggested?

  Thank you in advance. Happy coding to you too! ^^

  1

  

  バレンタイン 😈•64,190

  @VCaramesPosted over 1 year ago

  @Ola135

  1. headings provide structure the content. An h1 is always giving to the introductory text in your site to let users know what the page is about. Think about a book; the title is an h1, the chapters are h2 and everything else is either a paragraph.
  2. This is a component, something that is meant to be part a larger site. So in the real world it would never have an h1. On top of that, since it has multiple headings of equal importance, and h2 will do fine.

  Marked as helpful

  1
• 

  NixyMc•190

  @Nix7amcmPosted over 1 year 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! 🚀😃👍🏻

  Marked as helpful

  1

  ---

  

  Ola135•60

  @Ola135Posted over 1 year ago

  Hello @Nix7amcm !

  I am grateful for your comment. Thank you for your tips, these will definitely help.

  Wish you the best and happy coding! ^^

  1