Skip to content
Submitted about 2 months ago

Article preview component solution

AllisonFavour•150
@AllisonFavour
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

What are you most proud of, and what would you do differently next time?

I am most proud of starting and finishing the project, i wouldn't do anything different but stay more focused in completing any future project.

What challenges did you encounter, and how did you overcome them?

I encountered the challenge of achieving a pixel perfect design but was eventually able to scale through.

What specific areas of your project would you like help with?

Always open to suggestions and ideas. Thanks

Community feedback

  • Jay Khatri•4,250
    @khatri2002Posted about 1 month ago

    Hi @AllisonFavour!

    The developed solution looks great! Just a minor suggestion:

    Use a <button> Instead of an <img> for Click Handling

    The click event is currently handled directly on the share-icon image (<img>).
    While this works functionally, using a <button> element would be more appropriate because:

    • Semantic HTML & Accessibility:

      • Buttons are inherently interactive elements.
      • Screen readers and accessibility tools recognize <button> as a clickable action element, unlike <img>.
      • Improves keyboard navigation (users can focus and press Enter or Space to trigger the event).

    • Better UX (User Experience):

      • By default, <button> has focus styles and is easier to style consistently across browsers.
      • Users expect clickable elements to be buttons, so this improves usability.

    Hence, consider wraping the Image Inside a <button>.

    The rest of your solution looks great! Keep up the amazing work! 🚀

    0
  • P
    Ishmael Sunday•230
    @okayishmaelPosted about 1 month ago

    Nice job!

    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