Skip to content
Submitted 5 months ago

Article design with javascript.

#accessibility
nimbo•100
@7bibi
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 one was a bit overwhelming and I struggled a lot, but I'm proud that I returned and finished it.

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

At first, Javascript's variables didn't work, because I used getByClass and getByTag to get the elements. I read that I needed to add [0] at the end because it returns a list of all the elements under that name so I learned something new.

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

I struggled with how to start designing the hidden content and the button. I'm sure there is a better way. Your insights and tips are much appreciated!

Community feedback

  • ownedbyanonymous•220
    @ownedbyanonymousPosted 5 months ago

    Great job on your project, Nimbo! Here are a couple of suggestions that could help refine your work further:

    Use of Semantic HTML: Instead of using generic <div> elements for the wrapper, consider using semantic elements like <article>. This improves the structure and accessibility of your code, making it clearer for screen readers and easier to maintain. Semantic HTML is a small change that can make a big impact on usability.

    Clickable Social Media Icons: To improve interactivity, wrap the social media icons inside <a> tags, even if they link to a dummy URL like #. This ensures they are fully clickable, providing a better user experience. Here's an example:

    <a href="#">
    <img src="icon-facebook.svg" alt="Facebook" />
</a>
    Marked as helpful
    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