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 - Solution

Joshua 40

@jmzarate09

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


I'll appreciate any feedback. Thank you.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Joshua!

This solution can be better if you:

  • Remove each <div> that wraps the semantic HTML. For example, remove the <div class="button">. It is not needed.
  • Directly style each element instead of selecting the element inside the <div>. For example, select or give the class attribute to the <button> element to style the button.
  • Leave the alternative text empty for all the car icons. Those are decorative images.
  • Fix the value of the target attribute. If you want the link to open in a new tab, then _blank should be the value. Then, add rel="noopener" to protect users of legacy browsers from security issues.

For your information, decorative images are images that don't add any information and serve only aesthetic purposes

I hope you find this useful.

Marked as helpful

0

@Feelshot

Posted

Hello future dev, I really liked your programming exercise! If you continue doing your exercises in this way, you will undoubtedly be a great programmer very soon. Keep trying and learning, and don't hesitate to ask for help when you need it, tag me and I'll be happy to help you!

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