Submitted about 1 year ago

Article preview component - javascript and simple animations

#accessibility

kubas33• 180

@kubas33

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

It was challenging for me.

I had troubles with positioning share window and adding triangle to this.

Beside this I didn't know about fill() property so I didn't know how to change color of svg, but visualdennis https://github.com/visualdenniss/frontendmentorProjects/tree/main/src/components/newbie/ArticlePreviewCard solution helped me.

A also trained javascript, in which I am not familiar still.

Beside all these troubles I also added some simple animations in CSS and I am almost happy with my result.

Community feedback

_nehal💎• 6,710

@NehalSahu8055

Posted about 1 year ago

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Responsive 💯
To proper align the image as per fem design. Add:

article img {
object-position: left;
}

Use some meaningful and descriptive alt for non decorative image.

I hope you find this helpful.

Happy coding😄

Marked as helpful

kubas33• 180

@kubas33

Posted about 1 year ago

@NehalSahu8055

Thanks!

I didn't know about object-position! When I was making this challenge I was thinking if exactly this is possible

_nehal💎• 6,710

@NehalSahu8055

Posted about 1 year ago

@kubas33

Tip : Generate New Screenshot after making the necessary changes.

Marked as helpful

Please log in to post a comment

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