Skip to content
Submitted 8 months ago

Article preview component using CSS Grid, Flex, JavaScript

Anton Vasilache•580
@Antonvasilache
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?
  • Matching the layout and the aspect ratio of the image used in the design.
  • Working with more complex CSS selectors to create the share social media tooltip.
  • Would look more into how to customize SVG images.
What challenges did you encounter, and how did you overcome them?
  • Creating the tooltip with absolute positioning and customizing it for this page - I used an ::after pseudo-element and adjusted it gradually to fit the required position.
  • Making the tooltip open and close on click with JavaScript - couldn't do it with a toggle due to selector specificity, so I used a flag variable.
  • Keeping the share button on top of the tooltip for mobile screens - the z-index helped with the arrow, but not the background.
What specific areas of your project would you like help with?

Could probably use a more efficient way of handling the click in JS, using the toggle method, instead of style. Also, configuring an svg image so that I can keep both the content and the background on top, when other elements are displayed over it.

Community feedback

  • Bartosz Dudziak•720
    @bartoszdudziak-devPosted 7 months ago

    • I would recommend to try create hidden and visible classes contain visibility property and toggle between them in JavaScript.

    • You can get nice effect when you use opacity: 0 and opacity: 1 in these classes and add some transition.

    • On my screen size the image looks a little bit squeezed. Perhaps playing with object-fit: cover could be better.

    Overall I liked your solution. It is close to the designed one. I will definitely be inspired by some of your ideas 🫡

    Marked as helpful
    1

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