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 using CSS, HTML5 and JavaScript.

leodev• 250

@hangtime319

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

Article preview component
  • 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?

This project was very challenging, as I am a beginner in JS. I researched several solutions to implement in the project. In the next challenges where JS is used, I already have some ways to use.

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

I still haven't been able to find a solution on how to make the modal's polygon and I found it difficult to position it when it is activated.

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

I would like help with creating the modal polygon and how to simplify JS further.

Community feedback

P
Moa Davou• 310

@moadavou

Posted

Great work on this project! Here are a few suggestions for improvements:

  • The share button is not fully functional on mobile. You can make the popup visible, but it's impossible to hide it again due to the share button being hidden.

HTML

  • "Drawers" is not a sufficient alt text for the image. Try to describe it a bit more.

  • The share button must be inside a <button> element. This will make the JavaScript easier as well.

  • I don't understand why you have added a "Share-2" icon. This is not needed.

CSS

  • The share button does not change color when it's clicked. Look at the design to see how it's supposed to look.

  • You have used rem units for the font, but why not the container and margin/padding. The text overflows the container when it's increased.

  • Use rem or em for the media queries.

Marked as helpful

0
leodev• 250

@hangtime319

Posted

@moadavou Thank you very much! I will follow your tips and make the changes

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