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

P

@Carson-Haskell

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?

Implementing the Figma designs precisely, as I'm just learning how to use it.

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

HTML/CSS is still pretty straightforward for me; mainly it's just working with Figma and implementing the designs.

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

I could not figure out how to dynamically change font-size without using media queries. I normally use TailwindCSS, which makes something like that a piece of cake. Couldn't figure out how (and I don't know why you would even do it without media queries) so I just ended up using media queries. Would be curious to hear the solution though!

Community feedback

P
Geo A 140

@Geo-Bold

Posted

Hi Carson,

First let me say well done with your implementation. The solutions looks very similar to the design file. To answer your question about variable fonts, you should look into using the clamp() function. This allows you to change a value from between a minimum and maximum value using a prefered value. For example:

font-size: clamp(16px, 2vw, 32px);

It is important to note that the middle preffered value must be responsive in order to have the font size change as the screen width changes. Hope this helps!

Good luck,

Geo

0

P

@Carson-Haskell

Posted

Sweet!! I knew I could use clamp somehow, but I couldn't quite get the result I wanted. This is really helpful though, I'm gonna try it out. Thank you! @Geo-Bold

0
0xblu 130

@0xblu

Posted

foundations was in lowecase

0

P

@Carson-Haskell

Posted

@0xblu haha, thanks for the feedback! I did that on purpose because it bothered me. Technically, in a title, every word should be capitalized. I know I deviated from the design, but, I felt it was a justified deviation.

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