Submitted 7 months ago

Blog preview card

Neil•140

@neildeo

Preview site View code

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?

I solved some issues from my previous challenge attempt (centring the card nicely in the page using grid, getting Google font API to work in Safari). I'm really happy with the responsive text sizing.

One thing I'm unsure about (although it's minor) is why in the design files the image zooms in, whereas in my solution it simply widens a little bit. Would be interesting to see how others managed the size of the image.

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

Getting the Google fonts API to work in Safari was a real learning experience: so many things to go wrong with no real way to test apart from trying it out!

This stack overflow page was very helpful: https://stackoverflow.com/questions/24061808/google-font-not-working-on-safari

Having tried a few things on there, in the end it was replacing '&' with '&amp' in my link url which solved the problem.

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

I'm interested to see how I could get the image to match the design file in the mobile layout. In my solution, the dimensions are about right, but the image seems zoomed in in the design file.

Community feedback

Bernardo Poggioni•5,360
@R3ygoskiPosted 7 months ago
Hello Neil, good job, your project is very similar to the design.

About your question. The mobile design is right, it was not zoomed, at least for me, but well, if you want to make your projects more close to the design you can use a extension, it's name is PerfectPixel.

And I have a tip for your CSS, I noticed you was using px units in your font-size, It's not wrong, but it's more recommended to use rem units, because they can adapt to user font size configuration.

Edit: I forgot to mention about the HTML, your html structure is right, but it's not semantic, if you want to make it more semantic, I highly recommend to change some <div>, like <div class="container"> to <main>. If you want to see more about Semantic HTML, here's a link: W3School - Semantic HTML

And again, congratulations, your project is very good, if I said something that's unclear, please, comment below and I will try to help in the best way possible.
Marked as helpful
0

Please log in to post a comment

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