Skip to content
Submitted 5 months ago

Responsive Card using CSS grid

Karsten Løgstrup•90
@logstrup78
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?

It is my first project with Grid. I am used to flex, so that was a challenge.

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

I had some troubles with grid, but it was a good project to practice on.

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

Is there any easier way to make the card responsive besides using media Queries?

Community feedback

  • Sarah•580
    @AutumnsCodePosted 5 months ago

    Hi,

    well done to finish this project. There is a few things that I would have done differently:

    HTML

    • I noticed you used a few semantic HTML elements, but there is a few area that I think would made sense to use some more. I am mention this, because it provides additional information that helps define the roles and relative importance of the different parts of your page compare to non-semantic HTML.

      • For the element with the class of card, you could have use an article. If it was a whole page and the card was just one of many items one the page, you will find like <header>,<main>, and <footer> on it. And usually, you will find one of each per page. With the article-element you are able to use atleast header, footer inside an inside it to structure your HTML, and it helps with the accessibilty.
      • another semantic Element I suggest you look into, is the picture-element for bigger projects.

    ** CSS **

    • to center the content I should have used place-content: center instead of place-items: center
    Marked as helpful
    1
    Karsten Løgstrup•90
    @logstrup78Posted 5 months ago

    @AutumnsCode thank you for your comment. Can you tell me why place-content: center is better?

    0
    Sarah•580
    @AutumnsCodePosted 5 months ago

    @logstrup78 Sure, I suggest it because when I looked at your solution, the footer was still there and between the card and footer was a gap. Here a codepen to explain the different

    1
    Karsten Løgstrup•90
    @logstrup78Posted 5 months ago

    @AutumnsCode

    Thanks. I will remember that 😊

    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