Skip to content
Submitted 8 months ago

Blog Preview Card

Maximilian Dybvik•200
@RegexRiddler
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

My working code is very close to the original design. I also used flexbox to align which I found easier and I would like to use more in the future.

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

I wanted to challenge myself to make the fonts scale without using media queries. I did this by using the clamp function:

font-size: clamp(1.25rem, 5.3vw, 1.5rem);

However I found it difficult to get the "preferred size" parameter right.

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

Are my HTML markup semantic and accessible? I used the clamp function to make my fonts size fluid, is there another, maybe better way to do this?

Community feedback

  • Jordan Davenport•970
    @jjdavenportPosted 8 months ago

    HTML is simple and easy to read, the site looks good across mobile and desktop views, at the smallest mobile view the site gets compressed a little.

    Could be improved with a fall-back font like:

    • { font-family: "Figtree", sans-serif; }

    The design is almost identical to the original, nice job!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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