Skip to content
Submitted 6 months ago

Responsive Article preview, using flexbox and JS

accessibility, sass/scss
Williams Akanni•350
@shadowbanks
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I spent a lot of time trying to get the active part, this was also my first time doing something like that.

I'm proud of myself for seeing it through to the end.

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

I would like to know if how I handled the active part is fine and if there's a better approach particularly the js part.

Thank you for your time :))

Code

Please log in to post a comment

Log in

Community feedback

  • Jay Khatri•4,230
    @khatri2002

    Hi! The developed solution looks really good! Below are my UI suggestions:

    1. Use of Button Instead of Div

      • Currently, you're wrapping the share-icon image in a <div> and handling the click event on the image itself.
      • Since this element performs an action on click, a <button> element would be more appropriate.
      • Why?
        • Accessibility: Buttons are natively focusable and actionable, making them more accessible for users with assistive technologies.
        • Semantics: Buttons inherently signify interactivity, improving the semantic structure of the code.

    2. Creating a Perfect Circle for the Icon

      • Currently, you've assigned a fixed height and width to the image and used a fixed padding to align it within its parent. This results in a stretched circle and is not the recommended approach.

      • To create a perfect circle and center-align the icon:

        /* Styles for the container of the image */
height: 2rem; /* Adjust as required */
width: 2rem; /* Equal height and width */
border-radius: 50%; /* Makes the container a circle */
display: flex; /* Use Flexbox for alignment */
align-items: center; /* Vertically align the image */
justify-content: center; /* Horizontally align the image */

      • With these properties, the container will form a perfect circle, and the image inside will be perfectly center-aligned without relying on fixed height, width, or padding for the image itself.

    Great work so far! Implementing these suggestions will make the UI cleaner, more accessible, and aligned with best practices. Keep it up! 🚀

    Marked as helpful

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