Skip to content
Submitted over 1 year ago

Article preview component - javascript and simple animations

kubas33•180
@kubas33
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

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
    @NehalSahu8055Posted over 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
    1
    kubas33•180
    @kubas33Posted over 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

    1
    _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    @kubas33

    Tip : Generate New Screenshot after making the necessary changes.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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