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

Article Preview

@GomesVinicius

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Very funny to study how make triangle in tooltip info bottom.

I dont know how make to svg fill change with hover movement in tailwind css :c

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨ Add the below line to your code to meet fem design image.

img {
object-position: left;
}

➨ Add cursor: pointer; on share button. It will be more user-friendly to add it.

➨ For non-decorative image give some meaningful alt attribute.

➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

I hope you find this helpful.

Happy coding😄

1

@GomesVinicius

Posted

@NehalSahu8055

Hey 🐱.

Very thanks for the tips, helped a lot!

I really need to study more about accessibility 😁

1
_nehal💎 6,710

@NehalSahu8055

Posted

@GomesVinicius

Tip: Generate New Screenshot after making the necessary changes.

Always ready to help 🙂

1

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