Skip to content
Submitted about 1 year ago

Article Preview Component using HTML, CSS & JavaScript

Lawrence•180
@lawlawson
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Persisting despite having quite a few issues with the layout of the popup. Also, including JavaScript for user interaction. Generally, I think I did a good job with the look of the component in relation to the design too.

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

The most difficult aspect was positioning the popup for both desktop and mobile views. I didn't get it pixel-perfect on both mobile and desktop but fairly happy with how it turned out. I did a lot of googling, using stack overflow, w3 schools and also saw some examples of how people approached their own solutions to this challenge.

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

Any ideas as to how I could improve the position of the popup so that it fits exactly like the designs. The position of the popup changes when view on large to larger screens.

Code

Please log in to post a comment

Log in

Community feedback

  • Jeffreyai7•100
    @Jeffreyai7

    Hey there,

    Good work in attempting the Challenge. I think you can make use of the Margin property in the position of the Pop-up feature when clicked and also, to make it work in a particular screen size, you can use the JS window.innerWdth property to control the changes.

    Happy Coding

  • Diogo_Belarmino•60
    @Diogo356

    It turned out cool, congratulations

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