Skip to content
Submitted 7 months ago

ArticlePreviewCard

gauravk2203•310
@gauravk2203
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I began by designing the mobile view first, ensuring it was responsive and could scale up to the desktop view. Working with CSS Grid was a great experience, as it helped me understand layout flexibility better. Although I know I made a few mistakes during the process, I’m choosing not to fix them right now. I’m submitting the project as is and will focus on improving it in the future when I revisit it. This experience has been valuable, and I look forward to refining it later.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Adam•340
    @nadam-design

    Hi @gauravk2203!

    I saw your solution and have a few observations:

    • Social icons issue: When I tap the share icon on mobile, the social media options appear. However, if I increase the viewport size while the share menu is active, the layout breaks, and the author section disappears. I understand that this isn't typical user behavior, but such issues can arise during testing and should be addressed.
    • Padding mismatch: The padding doesn't fully align with the design. As a frontend developer, it's important to ensure the final result matches the design as closely as possible. Don't settle for "close enough"; strive to replicate the design exactly! Aim for perfection!
    • SVG optimization: If you're working with vector icons (SVG), using them inline can be a great way to reduce the number of requests (each img creates a separate request). This approach can optimize performance.
    • Flexbox and best practices: I noticed that justify-content: space-evenly; might not be necessary in this case. Additionally, avoid using !important. For instance, you already declared .authordetails as a flex object earlier. There's no need to repeat this within a media query, especially with !important. Try to avoid using !important. While it can be useful and has its place, in this case, it’s unnecessary and only adds complexity.

    Keep up the great work—you're doing well!

    Marked as helpful

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