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

using HTML,CSS,JS

@harsh72835

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


Any feedback is acceptable.

Community feedback

@Omid-Heidarzadeh

Posted

Well done you've got the job done, but at the first glance, there are a few things that seem to be better to consider. 1- Choose better (more specific) names for your CSS id & class selector. Use popular conventions like BEM. when you're designing a component it is important to choose your selectors wisely, for example, setting the width and height of all image tags probably will cause problems later. 2- Try to find a more efficient approach that makes it easier to get your design responsive. The ideal approach needs the least CSS code in @media queries. Use box model concept and wrap the neighbor elements with the same arrangement on different screen sizes with a parent element and just change the flexbox direction in @media queries to achieve the same result. 3- Pay more attention to at least simple accessibility rules like filling alt attribute of image tags. 4- Keep user needs in mind whenever you use JavaScript, make sure to check whether the user needs a different way to return to the previous state or not? in this case clicking the share button is a one-way action. you could use the class toggle method instead of adding or removing classes. As I said, you've done it already, and I hope these tips help you do it more efficiently. Best wishes.

1

@harsh72835

Posted

@Omid-Heidarzadeh thank you for your all suggestion, I will keep this in mind and try to make it better from the next project.

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