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

Frontend Mentor - Article preview component

P

@mverma45

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 the fact that I completed the challenge.

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

I had issues with the JS, I searched YT, stackoverflow, google for the answers and asked on the discord to figure out how to get the project done.

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

I know my project isn't 100% correct, if anyone has suggestions on how to improve the project let me know.

Community feedback

@nullpuppy

Posted

Right now everything is just in the body. I'd recommend putting the preview "card" in it's own div or section (I'd recommend getting familiar with semantic html, mostly for accessibility). That'll allow you to better position and style the component on the page. Depending on your experience with flexbox and grid, it might be worth experimenting more with them to get a better understanding of how they work, and what kind of nesting/etc is/isn't required.

Your javascript isn't working at the moment because you're using getElementById, but then using a classname. You'll want to add something like id="shareButton" to the element you want to use as the share button in the html, and reference in the css as #shareButton.

Hope that helps!

Marked as helpful

0

P

@mverma45

Posted

@nullpuppy thanks for your feedback. I will work on it and get back to you.

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