Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Card Preview using html and css basic

@ChaosBlitz404

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My second challenge! I'm not sure about some stuff

  • Is the meta tag here is correct ? I didn't change it at all
  • Text font for some reason doesn't work at github ?? it works locally though
  • Maybe additional optimization? like I manually guess 20px from the outer white box to the outer image border. Is there something like automaticly do this ?

any feedback are welcome ! thanks anyway !

Community feedback

@Blackpachamame

Posted

  • You should try placing the CSS in a separate file and then import it into the HTML
  • The font does not work, because you are not importing it from anywhere, the README of the styles should give you a link to select the font from Google Fonts and the link to import it.
  • I have seen that you have used br to apply the space above and below, it is the first time I see it and I was surprised, I did not expect it haha. Anyway, it's not the right way to do it. The correct thing to do would be to remove those br, remove the margin from your pseudo id and apply a padding: 20px. This will apply that spacing around the entire card.
  • I recommend using class instead of id

The rest looks really good, keep it up! 💪

Marked as helpful

1

@ChaosBlitz404

Posted

Thx for the feedback. I appreciate it @Blackpachamame

1
Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @ChaosBlitz404!

Your solution looks great!

I have one suggestion:

  • I noticed that you set display: grid; on the body to center the card, but there are 3 rows since you added the <br> (break row) tags. This is pushing your card up.

You can fix that by adding this to the body:

    grid-template-rows: 90% 1fr;

Or you can just remove the <br> tags. 😊

I hope it helps!

Oyher than that, you did an excellent job!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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