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
Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@lucarle

Posted

I would understand if you had the card as a <article>, but why only the text?

Overall it seems like you knew how to solve the challenge, and I found interesting the use of utility classes, but some of the values applied differ from the design. Was that a intentional choice, or did you not find them on Figma?

Also, you didn't include the hover effect.

Marked as helpful

1

@Astr0n1

Posted

Thanks for your time reviewing my solution and here i will answer your questions:

  • You are right the best practice is to make the whole card as article not only the text as i'm still getting familiar with best usage of semantic elements -the values differ from the design as i estimate it with my eye as i don't use the Figma file for special purposes when the clients cant afford a Ui or the just show you an image and tell they want a familiar object
  • I also didn't know there was a hover effect as i depended only on the design image attached with starter files

@lucarle

0

@lucarle

Posted

@Astr0n1 I'm happy you liked it.

That's cool, even without Figma you got pretty close to the design.

Marked as helpful

1

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