Responsive 3 Column Component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Brian! 👋

  I have some suggestions to improve this solution.

  • Remove all the <div> elements except for the card elements.
  • Use <main> element as the flex container of the cards.
  • All the anchor tags point to IDs that don't exist. None of the HTML elements that have Sedans, SUVs, and Luxury as the value of the id.
  • Don't use id selectors for styling. There are two reasons for not using ID’s to style content:
    • They mess up specificity because they are too high (the most important reason).
    • They are unique identifiers. So, they are not reusable on the same page.
  • Learn more about the use cases of id by reading — What the ID attribute is REALLY for. The article is written by @grace-snow.
  • You don't need to use !important in this case. If you start using it, it is a sign that the stylesheet is having high specificity.
  • Use single-class selectors whenever possible. This can help you produce a low-specificity stylesheet. As a result, it prevents you from having specificity issues.

  I hope you find this useful. 🙂

  Marked as helpful

  1

  ---

  

  Brian•150

  @briangestebanPosted almost 2 years ago

  Hi @vanzasetia!

  Thanks for all of these. I'll take note on all of it. Appreciated the feedback!

  1
• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • This two are not necessary ⚠️:

  <div class="flex flow content">
  <div class="flex flow">
  

  • 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/

  • It is best practice ✅ to use, classes for styling purposes, while using ids solely for JavaScript.

  If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  Happy Coding! 👾

  Marked as helpful

  1

  ---

  

  Brian•150

  @briangestebanPosted almost 2 years ago

  Hi @vcarames! Thank you for the feedback. I'll take note of these.

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have one suggestion about your code that might interest you.

  • 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 📘.

    If you want to have an <h1> you should create it but it should be visually hidden with a class like "sr-only".

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Brian•150

  @briangestebanPosted almost 2 years ago

  Hi @MelvinAguilar! Appreciated the feedback. I'll take note of it. Thank you!

  1