Skip to content
Submitted 3 months ago

Article Preview Component

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

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.

Community feedback

  • Talika Bajaj•650
    @Talika-BajajPosted 3 months ago

    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
    1
    Xay•20
    @xayrax88Posted 3 months ago

    @Talika-Bajaj Thank you so much for your reply! I appreciate the feedback I will get to working on this! :)

    0
  • Ana Machado Amaral•310
    @MachadoAPosted 3 months ago

    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
    1

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