Skip to content
Submitted 4 months ago

Blog preview card

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

Solution retrospective

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

HTML-- Is my use of div's acceptable? CSS-- am I using too much code to accomplish this?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Will Cooley•190
    @CooleyWC

    You could use an article tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) instead of a div for the card. I would also use section tags instead of divs for the 'info' and 'authorbox'.

    CSS: I would avoid using pixels for font-sizes - convert to rems or use clamps for better responsiveness. I usually copy clamps from this site https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12

    Also avoid setting hard widths and heights (on the container) - usually its better to use min-widths or min-widths to control the sizing.

    Hope that helps!

    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