Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article preview component with interactivity using JS

P

@srijanss

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

  • I got to learn about the css transition, transform and transform-origin property.
  • I also got to learn about how to use CSS borders to create triangle shapes.
  • I learned how to add event listeners and toggle share links block based on user interactions.
  • I've also used window.innerWidth to decide on which share links styles to use for which screens. And update the viewPortWidth variable based on window resize so that screen size is updated and corresponding share link block is shown.

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

  • managing styles for popup item in both desktop and mobile layout was a bit challenging
  • I've used position property along side some calc() functions to make the popup work

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

Any feedback and comments are welcome.

Community feedback

JoyObaidu 280

@JoyObaidu

Posted

The layout looks good and I also learned from your code

1

Please log in to post a comment

Log in with GitHub
Discord logo

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