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

@espringer21

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 am most proud my ability to complete the task. I think for next time i can maybe research a more sufficient way of complete the task.

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

The border width on the right and bottom , at first I thought it was a box shadow. When I went to implement it I quickly realized that wasn't right and I had to change the border width not box shadow.

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

If anyone has any tips or tricks for dealing with fonts. I understand importing the google fonts links into my html file, but I feel I am not applying the font family properly to the text.

Community feedback

Huy Phan 1,880

@huyphan2210

Posted

Hi, @espringer21

I checked out your solution and I have some thoughts:

  • Your observation about the box-shadow isn't incorrect. If you look closely at the top-right and bottom-left corners of the .card, the shadow seems slightly offset, so it’s likely not related to border-width.
  • Regarding the font, you're importing it correctly, but you might not need the italic version (1,300..900 in your Google Fonts link). You could adjust the font-weight for your paragraphs. For example, font-weight: 900 might be too heavy for the bold text—perhaps font-weight: 700 would be more appropriate. Also, consider refining the color and font-size to match the design more closely.
  • You've used <p> tags quite a bit. To improve the semantics of your HTML, try using more meaningful tags such as <label>, <h1>, <section>, <main>, or <footer>, instead of relying heavily on <p> and <div>. A more semantic structure can improve readability and accessibility.

Hope this helps!

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