Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 column preview card component

@uzzii-21

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedback is highly appreciated!

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @uzzii-21 👋🏻

I have some feedback for the project.

  • For the car icons, add aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here. Like this:
<img src="./dist/images/icon-sedans.svg" alt="icon-sedans" aria-hidden="true”>

if you noticed, I removed these width="100" height="100" inline styles, try to avoid inline styling because it's considered bad practice.

  • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother and add cursor: pointer as well.
  • Lastly, instead of using height try using min-height it is more responsive since it allows the body to grow if needed.

I hope this was helpful 👨🏻‍💻 other than that, you did a great job, well done. Cheers 👾

0

@uzzii-21

Posted

Hello @kens-visuals 🤝

I appreciate you for pointing out my mistake. And I will definitely solve those problems.

Thanks for reviewing my project and giving me a great feedback 🤩

0
P
Ken 4,915

@kens-visuals

Posted

@uzzii-21 you're welcome 😇 I'd really appreciate if you could mark the comment as helpful 🙃

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord