Skip to content
Submitted about 2 years ago

Article preview component

Jose Gonzalez•310
@placeteno
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

Hello! 👋🏼

This project was a lot of fun and, like in every other challenge, it pushes you to think about where and how to place your content in the component so that it looks good in both mobile and desktop views. I think there are things that can be improved and it would be even possible to code this challenge without using JavaScript, but that could be a next step in the future.

Comments and feedback are always welcome!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi, Jose! 👋

    Congratulations on finishing this challenge! 🎉 It's great to know that you were having fun while building the project. I hope that you also learned something new while building it. 🙂

    I think making the toggle functionality without JavaScript is not possible, especially when you are trying to make it accessible. You need to JavaScript to:

    • Toggle the state of the aria-expanded. aria-expanded is used to tell assistive technologies such as screen readers whether the content is expanded or collapsed.
    • Toggle the visibility of the pop-up.

    For the visibility of the pop-up, it can be possible to create it with CSS using :target pseudo-class. But, using anchor tag might not be a good idea. 🤔

    One suggestion I have is to wrap each social media icon with an anchor tag. Also, remove the word "icon" from the alternative text. There's no need to tell it because the semantic meaning of the img element is good enough.

    That's it! I hope this helps!

    Marked as helpful
    0
    Jose Gonzalez•310
    @placetenoPosted about 2 years ago

    Thank you @vanzasetia. This comment was very 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