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

P

@Giftyaning

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 am most proud of successfully implementing a responsive design that provides a seamless user experience across both desktop and mobile devices.

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

One of the primary challenges was ensuring that the component was fully responsive and looked good on both desktop and mobile screens.

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

N/A

Community feedback

@keinermendoza

Posted

I am happy that you are improving your skills. That being said, this challenge is not yet completed. I know that sometimes it can be difficult to achieve certain features in the design, but please consider solving the following problems:

  • The font is missing. Consider using the Google Fonts CDN; they actually provided a link to the font you should use in the style guide.
  • The design is not fully responsive. Between 770px and 1230px, the design is overflowing. Avoid setting width and height at the same time in the container; when you change the screen size, the content doesn't have enough room to expand. I recommend using the Responsively App to check the design on multiple devices at the same time.
  • On small devices, the author info section is missing.
  • Try to achieve the share tooltip functionality using JavaScript instead of hover.
  • The background doesn't match the design.
  • The card color doesn't match the design.
  • Check the border-radius on the image corners

I think that one of the most difficult tasks for us as developers is to give and receive feedback. I wish you good luck on your coding journey, and I hope you have found this comment useful.

0

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