Skip to content
Submitted 5 months ago

Blog card made with grid and flexbox

P
cookie-monster01•220
@cookie-monster01
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?

Learning css grid

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

Increasing padding on image on a smaller screen, and decreasing it on bigger screen size. And precise size of the blog card.

Community feedback

  • Grace•32,130
    @grace-snowPosted 5 months ago

    It looks like you're really misunderstanding image alt text in this. I recommend you read about how and when to write it. There are good posts in the discord resources channel.

    This card would never be use to serve the main heading on a page so you know it shouldn't have a h1. Use a lower importance heading level like h2 instead.

    This is also missing the most important element, functionally. The design shows the card is clickable. That means there must be a link in there somewhere leading to the blog post. So that means the heading text needs a link inside the heading tag, wrapping that blog title (because it's the destination of the link). To make the whole card clickable you then make the card position relative and add a pseudo element on the link sized and positioned to cover the area of the card.

    You don't need bootstrap in this. Remove it.

    1
    P
    cookie-monster01•220
    @cookie-monster01Posted 5 months ago

    @grace-snow Thank you for the feedback, and explaining how to make the card clickable I will give it a try. I will also look into alt-text. Could i also request a feedback on another project I did: https://www.frontendmentor.io/solutions/fylo-two-column-layout-using-grid-and-flexbox-V_8Opg3pg4

    0
  • P
    Øystein Håberg•13,220
    @Islandstone89Posted 5 months ago

    To add to the great advice from Grace:

    HTML:

    • I would wrap the date in a <time> element:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

    CSS:

    • Since Figtree is a sans-serif font, you must update font-family: "Figtree", serif to font-family: "Figtree", sans-serif.

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • font-size on .attribution must also be in rem.

    0
    P
    cookie-monster01•220
    @cookie-monster01Posted 5 months ago

    @Islandstone89 Thank you, I will keep that in mind.

    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