Skip to content
Submitted about 1 year ago

Blog Preview Card practice

DebugNinjaSlayer•100
@DebugNinjaSlayer
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?
  1. I put the illustration in an img tag, when I set the bottom margin I found that there is still a thin white line under the img tag. Then I learned that I can use display: block; to remove the extra space.
  2. I learned that @font-face can only be used to define custom fonts. font-weight in @font-face definition means the accept range of a font-face. I thought I can inherit font-weight when using the custom font and I was wrong.
  3. In the figma design, there is only the state of hover. I wonder what are the others look like, for example, active, focus, error.
  4. I learned to use object-fit when the size of the container doesn't fit the size of the image in it.
What specific areas of your project would you like help with?

I'm all ears to hear anything about this practice.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on DebugNinjaSlayer's solution.

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