My Second Challenge: Blog Preview Card!

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

Hello! I'm very excited to share my solution to this challenge with you! 😊

In this challenge, I learned something new: How to work with @font-face to use fonts whose installation files are present in the project directories. 😲

This is the first time I've done this and it was really exciting and challenging to learn how to do it. I was only used to using fonts through a connection with Google Fonts, not downloaded this way.😁

These two resources helped me a lot in this challenge ✔:

Youtube Video Stackoverflow Discussion

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

I have some questions about my solution e about this challenge 🤔...

1. Is the way I used @font-face correct? Most of the examples I saw did not include more than a single file, as is the case in this example. 😕

2. Is there any way to optimize my CSS code? I think it is too long, but I have the impression that it would be possible to be more precise and reduce the number of lines. 😅

3. This was the first project in which I decided to work with box-sizing:border-box and I had some difficulties. One difficulty was that I could not get the border to be exactly 1px, as the design showed. When adding the 1px border, the content area became a decimal and the border as well (0.800). How could I solve this problem? 😭

4. Another difficulty I had, and I think it may have been because of the border-box as well, was that I could not increase the height of the image to 501px in the mobile design, it was 484px, if I am not mistaken. Is there any way to achieve this? 😣

5. At the end of the challenge page there was a text like this in the ideas section: "The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries.". I can't think of a way to do this. I even looked it up, but it seemed complex to me, using a calc function with calculations involving different units. Is there another, simpler way to get the result of this idea? 🤯