3-column-preview-card-component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge !

  In addition to the other suggestions I have some feedback for you if you want to improve your code.

  HTML:

  • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag. You can read more about this here.

  • Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

  <img src="./images/icon-sedans.svg" alt aria-hidden="true" class="icon"/>
  <img src="./images/icon-suvs.svg" alt aria-hidden="true" class="icon" />
  <img src="./images/icon-luxury.svg" alt aria-hidden="true" class="icon"/>
  

  CSS:

  • The process of converting pixels to meters can be automated using a Visual Studio Code extension. Just search for "Px to Rem" and a extension should appear. Ideally, you would work with pixels and then convert them to rem, so that the list of variables does not grow, as there are challenges on the platform with 60px font size.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding and Happy New Year! 🎉🎊🎁

  Marked as helpful

  2

  ---

  

  P

  dagimchi•170

  @dagimchiPosted almost 2 years ago

  @MelvinAguilar Thank you! Just made the changes and I highly appreciate your valuable feedback. And that extension sounds great because I was starting to get tired of referring to the variables and doing the calc function lol.

  Cheers Melvin~

  0
• 

  Manish Mandal•650

  @manishdevelopsPosted almost 2 years ago

  Great question @dagimchi I also had same confusion before but I when I became familiar with clamp() function all the problem solved for me. In this you will need your min and max font size and your min and max screen width .Now your font-size will automatically adjust in your specified width of screen. I will highly recommend you to use clamp() function. follow this URL...

  https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

  2

  ---

  

  P

  dagimchi•170

  @dagimchiPosted almost 2 years ago

  @Manish-d-art I'll look into it, thanks !

  1