Skip to content
Submitted over 1 year ago

Responsive blog preview card using Grid

Reno G•60
@pamplito
A solution to the Blog preview card 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'm proud to have completed this challenge and, above all, to have kept looking for solutions until I finally achieved what I wanted to provide.

This chalmlenge made me learn and progress and I'm sure I'll begin the next one with more confidence.

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

I had trouble with the image's responsiveness. I wanted the height to be fixed but the sides to be responsive without distorting the image.

I finally managed to find a solution with OBJECT-FIT, which allowed me to crop the image in a fluid way.

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

As I've only recently started to learn programming on the web on my own, I'd love to get feedback and advice from more experienced people to help me progress more quickly.

Code

Please log in to post a comment

Log in

Community feedback

  • D. Jaime Blockton•180
    @digigrrl525

    I think this is bang on. Awesome job!

    Marked as helpful
  • rezanahi•60
    @rezanahi

    Great! In my opinion, it would be even better if you also add hover effects.

    Marked as helpful
  • P
    Øystein Håberg•13,280
    @Islandstone89

    Hi Reno, great job.

    You have included:

    • The main landmark
    • A proper CSS Reset
    • Custom Properties
    • font-size in rem instead of px

    Well done!

    Here are some suggestions to improve your code even further. I hope you find them helpful :)

    HTML:

    • Never have text in divs alone. "Learning" is a <p>, and I don't think it needs to be wrapped in a <div>.

    • The publish date is a good opportunity to use the <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    • Don't use words like "photo" or "image" in the alt text. A more descriptive sentence would be "Headshot of Gary Hooper".

    CSS:

    • The main shouldn't have any properties, move them to .container.

    • max-width on the card should be in rem.

    • Remove all heights in px.

    • Media queries should also be in rem.

    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