3 Column Card Challenge. with HTML SCSS

Community feedback

• 

  Ken•4,915

  @kens-visuals

  Posted almost 4 years ago

  Hey @JoaquinDeveloper 👋🏻

  I have some suggestion to help you fix the accessibility, HTML and some other issues.

  • I'd suggest replacing <section>s with <div>s, because when you use <section> you have to have a heading in it. Besides that <section> is for bigger things in a layout, such as, about us section, contact us, gallery, etc. Don't forget to generate a new report once you fix the issues.
  • For the car icons, add aria-hidden="true”, because they are for decoration only. You can read more about aria-hidden here.
  • When it comes to :hover states, you can apply them directly to the class, instead of :nth-child, and in this case when you have to use different background colors use can use modifier classes to help you. If you're familiar with BEM naming convention than you know what I mean by modifier, if not check out this link.
  • For the mobile viewport width, I suggest reducing width of .card-info to 90% and adding margin-top of buttons to 100px, so you don't have too much white space at the bottom.

  I hope this was helpful 👨🏻‍💻 congrats on finishing the second project, well done. Cheers 👾

  00

  Marked as helpful
• 

  Joaquin Developer•20

  @JoaquinDeveloper

  Posted almost 4 years ago

  hey @kens_visuals 🖐🏻 , first of all thanks for taking the time to look at my work, I didn't know anything about the aria-hidden so thanks for that im implement in the future. 😋 about <section> tag I wasn't sure how to use but with your comment I have it clear. 😁

  Cheers 🙋🏻‍♂️

  00