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

@itsmesrishti

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?

I'm proud of figuring out how to use the font files given with the project and not using google fonts cdn even though it'd have been valid to do so?!

I'm not sure how good display:grid is for centering things so maybe next time I won't go for that!

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

I wasn't initially able to figure out how to load the fonts but I didn't want to use google fonts cdn and take the easy way out so I googled and came across font-face and voila was able to use the fonts provided!

I'm also proud of figuring out how to make fonts responsive without media queries at first I thought of using vw or vh only then I thought of minmax() and then I remembered learning about clamp() so I refreshed my memory looked up the syntax again for clamp() and got to work! I was afraid though that using clamp() was extra and most people must have figured out how to do the same without using clamp() but then I saw one other person using it so now I feel less alone!

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

So I need help with getting rid of vertical scrollbar even though body is set to 100vh for desktops or mobile screens with enough height that can accomodate the whole thing without scrolling and yet a scrollbar comes. I tried some ways but had to let go eventually because nothing seemed to work.

Community feedback

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