Skip to content
Submitted 7 months ago

Responsive blog preview card using Grid

Reno G•60
@pamplito
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • D. Jaime Blockton•180
    @digigrrl525Posted 7 months ago

    I think this is bang on. Awesome job!

    Marked as helpful
    2
    Reno G•60
    @pamplitoPosted 7 months ago

    @digigrrl525 Thank you !

    0
  • rezanahi•60
    @rezanahiPosted 7 months ago

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

    Marked as helpful
    1
  • Øystein Håberg•10,390
    @Islandstone89Posted 7 months ago

    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
    0
    Reno G•60
    @pamplitoPosted 7 months ago

    Hi @Islandstone89,

    Thank you for this great feedback. It will be really helpful. As an example, and I'm a bit ashamed of this, I didn't know about <time>. And no more properties on the .main now.

    Thanks again !

    1
    Øystein Håberg•10,390
    @Islandstone89Posted 7 months ago

    @pamplito My pleasure :)

    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