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 Preview Card with fluid text sizes

P
jasoneczek 320

@jasoneczek

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


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

For this project I learned a few new skills. I implemented the CSS clamp function for responsive text sizing without using media queries. I've used pseudo elements and selectors before, but in this project I learned how to properly build a hoverable card, by making sure the tag is wrapped within the heading element. This is also the first project where I hosted my fonts instead of linking the google fonts in my html head.

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

The most difficult challenge was implementing clamp to make my text fluid between mobile and desktop views. It took lot of trial and error to achieve the results I wanted.

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

Definitely the fluid text. At this point it "works", but I would really love feedback on my code for this, because I am sure it could be improved. But also any feedback on any other areas in my code would be greatly appreciated.

Community feedback

P

@CreativeLogic

Posted

Hi. Good job overall. However, I think the published text and date are supposed to be in black.

Marked as helpful

0

P
jasoneczek 320

@jasoneczek

Posted

Thanks @CreativeLogic you're completely right. I don't know why it looked gray to me the first time around. I appreciate your feedback, going to make this change.

0

@forhisglory85

Posted

Very good work. I couldn't tell by the preview design if the main P was suppose to be black and gray when active, or gray completely. Looks like yours is gray during active and non active states.

0

P
jasoneczek 320

@jasoneczek

Posted

Thank you for the feedback @forhisglory85. I took another look at the paragraph text for both the active and non active states. The paragraph looks gray to me on both.

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