Skip to content
Submitted 7 months ago

Blog Preview Card Using HTML & CSS

P
Babyjenx•90
@Babyjenx
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of my improvements made from my last project including using CSS Reset, accurately centering without fixed pixels, using flexbox for the first time, and using Figma Design Guides to help with measurements.

Next time, I would try to work on using rem measurements for more responsiveness. I'm not exactly sure the calculation to use to get the right number. I think it's all based off of default HTML font size of 16px but not 100% sure.

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

The most challenging part for me was getting "Learning" centered in the div. I think there was some margin overlap that was causing my padding on the text to jump significantly. One pixel of padding would end up being 20px or so. The CSS Reset eliminated this problem.

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

I can't figure out why cursor: pointer; only works sometimes? It seems glitchy, like I see it for a moment and then it disappears. Might be something with my code.

Would love to know how to calculate rem measurements!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    mohamed-fathy3010•160
    @mohamed-fathy3010

    Good job. the result looks almost identical to the design. I also like the simple animation you added for the avatar.

    • Regarding the cursor pointer glitch. I couldn't replicate it. sometimes if you hover over the edge of the element slowly you may find that the cursor doesn't change but the color does. however that happened only on chrome on lower screen sizes and it is also hard to replicate.

    • "Would love to know how to calculate rem measurements!" regarding that, personally I'd recommend sticking to the Figma design for now if you have access to it. It will show you the measurements in px but as long as you didn't change the font size in html tag the default font-size will be 16px so 1rem = 16px. in the future you will break from that px mentality the more you learn either because you memorized some commonly used rem values like .5rem = 8px and you will use it instinctively without thinking or you may use something like SASS and create a function that you will give the value in px and it will return the rem equivalent.

    If any thing try to not use the px unit when dealing with font related properties like font-size for example because the user can't change the size from preferences this way. Please refer to this article for more details about relative units vs px in font-size

    also try to limit the hovering to the content otherwise you may find the hover animation of the title or the avatar image starting while you are actually hovering over a blank space right to the element.

    Congrats for finishing the challenge and happy coding.

    Marked as helpful

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