Skip to content
Submitted 4 months ago

Beatiful Article Preview with Social Links Share

#accessibility#pure-css#web-components#progressive-enhancement
P
roswell•450
@welpmoz
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?

For face the next projects I will modularize more the styles for made changes in an easy way.

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

I am new using javascript, I suffer trying add interactivity to the share button. I spend some time investigating and exploring the manner javascript made changes in the DOM.

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

I need help in responsive image management. My solution in this topic is not elegant and maybe not optimal.

Community feedback

  • Ibeaka Godson•470
    @WarmarthPosted 4 months ago

    Does the solution include semantic HTML? In your html, you use h2 directly under h1. I the best tags to use is p tag and all text content of that card should be wrapped in an article tag

    Is it accessible, and what improvements could be made? Your social icons display is working properly but the icons in the component are compressed maybe a result of enforcing width on the individual icons And also using SVG in image tag works different

    Does the layout look good on a range of screen sizes? I think your grid layout was perfect as

    Is the code well-structured, readable, and reusable? Your js function with set-attribute was good

    Does the solution differ considerably from the design?

    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