Skip to content
Submitted 7 months ago

Article Preview Component

jasoneczek•320
@jasoneczek
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that I've begun the JavaScript path, and was able to achieve the basic functionality required, although, I do believe it needs some work. I learned a ton in this challenge, by getting stuck so many times, stopping to read up from many resources, asking questions, trying, failing, and trying again.

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

So many. A significant challenge was getting the positioning of the dialog in the correct spot, and then the arrow that points to the button on the desktop version in the active state. Since I decided to use just 1 button to toggle the hidden component instead of adding another button to close it, I had to refractor my html. Originally I had the avatar, author name and publication date inside a footer tag, within the card but not contained with the rest of the content. When I refractored this to be a regular div, and moved it within the same container as the other card text, I realized the dimensions of the hidden content will need to take into account the padding of the card body. With absolute positioning on the "share options" content, I used negative right, bottom, and left rem's. The desktop version was even more difficult, and I actually hope to receive advise on a better approach. My solution involves setting explicit widths and weird percentages for positioning.

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

Besides what I mentioned above, accessibility standards. I don't think my focus is correct for the social media links. I'm not sure if focus should be trapped within this div when it is active. Of course, I am always open to all feedback and suggestions for improvement.

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Currently the footer element has not been properly placed at bottom. You have used margin for .card to push the footer and tried to push a little bit to bottom.
    • So let me explain, How you can place the component at bottom with using absolute positioning for footer
    • Luckily you already used Flex layout of css to center the component, So you just want to add absolute position for <footer> element to place it in bottom of the page
    body {
  position: relative;
}
footer {
   position: absolute;
   bottom: 1em;
}
    • Now remove these styles, after removing you can able to see the changes
    .card {
  margin-bottom: 2rem;
}
    • Now your component has been properly at bottom without being stuggling with margin.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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