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

@BLADEHEDA

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


This challenge was quite interesting though i found some difficulties at the level of displayin the social media icons uppoon the share icon click. Any feedback would be highly welcomed .

Community feedback

romila 3,570

@romila2003

Posted

Hi @BLADEHEDA,

Congratulations for 🎉 for completing this challenge, the Article preview component looks good and it is great that you used the right semantic. There are some issues/suggestions I want to address:

  1. I noticed that you took a desktop-first approach however I would strongly suggest you follow a mobile-first approach instead as it is easier for responsiveness, and it is also best practice to do so.
  2. The font-family can be found within the style-guide that is given to you when you download the starter pack.
  3. Instead of using position: absolute; to center the card, you can use the flex property instead e.g.
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
}

To make the share-icon functional, you can use the toggle feature within JS. The toggle feature is like an on/off switch that will show the icon when click and then close the icon when clicked again.

Overall, great attempt and wish you the best for your future projects so keep coding 👍.

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