3 Column Preview Card Component

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @RyanFloresTT 👋🏻

  I've got some suggestions to help you fix the accessibility issues and some other things.

  • In your markup, <div class="row">...</div> should be <main class="row">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • For the car icons, add aria-hidden="true”, because they for decoration. You can read more about aria-hidden here. Also, I suggest putting them in <img> tags, so all together will look like this:

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

  • Also, I suggest implementing :hover state, which you can find in design folder active-state image, after you implement it you can also add transition: all 0.2s; to the button and the links, this will make :hover smoother. -Lastly, I won't go into details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.

  I hope this was helpful 👨🏻‍💻 If you want to get better at responsive websites, learn mobile first workflow, there are a thousand of articles about it. All in all you did a nice job, for the second job. Cheers 👾

  Marked as helpful

  2

  ---

  

  Ryan Flores•60

  @RyanFloresTTPosted about 3 years ago

  @kens-visuals Thank you for the advice and the tip on learning mobile first! I will definitely be reading up on Aria and the CSS article.

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @RyanFloresTT you're welcome 😇

  1