Skip to content
Submitted 10 months ago

Article Preview Component

P
Xay•240
@xayrax88
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?

This was a good review and practice. I had a fun time making this component, it seems self explanatory and was a great exercise. I would go back and implement the accessibility part, but didn't this time.

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

I had trouble with creating the social links container part that had the triangle portion when toggling the social links on and off. I had to look up how to make a triangle or shape online which I reference from this source https://css-tricks.com/snippets/css/css-triangle/ This was a great resource to implement that for the social links part. Toggling the event listener for the JS button, took a little bit of trial and error but eventually got it.

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

This was a great and fun mini exercise, although I did not make it accessibility user friendly or didn't implement any aria in the HTML part for screen readers and etc.,. No specific questions for here, I am always open to feedback.

Code

Please log in to post a comment

Log in

Community feedback

  • Talika Bajaj•670
    @Talika-Bajaj

    Hi

    Well done on completing this challenge. It looks similar to the original design. However I would like to suggest something regarding the image styles applied -

    Update the style of the drawers image and add width: 100% so that the image covers the whole area in the mobile design

    The style you have provided to the profile image is also applied to the share button image. .profile img { height: 50px; width: 50px; border-radius: 50%; }

    I suggest you should give the profile image a class or an id and directly access it so that the style is applied to that image only.

    Also on the share button, you should update the .share-icon class styles to these - border-radius: 50%; padding: 18px; border: none; cursor: pointer;

    And also update the .share-icon img style and set it to - height: 25px only.

    I hope all these style updations help you achieve the share button look similar to the design.

    Well Done. Keep it up!

    Marked as helpful
  • Ana Machado Amaral•310
    @MachadoA

    Your project is very good! Congratulations! Keep it up!

    I suggest that in the part with the link, you put the images inside the <a> and give them a CSS cursor pointer. The change could be like this, for example:

    html

    <div class="links"> <li><a href="#"><img src="./images/icon-facebook.svg" alt=""></a></li> <li><a href="#"><img src="./images/icon-pinterest.svg" alt=""></a></li> <li><a href="#"><img src="./images/icon-twitter.svg" alt=""></a></li> </div>

    It is also advisable to fill in the alt attribute of the img to support screen reader users.

    Best regards, Ana

    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