Skip to content
Submitted 2 months ago

Blog Preview Card

Lalalaloo•40
@Lalalaloo
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that i managed to finish this really quick, and that the design matches really well

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

when i deployed the site, the images wouldn't show up, but it was a simple mistake. i forgot to put a period in front of './assets' thing.

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

Any feedback would be helpful.

Code

Please log in to post a comment

Log in

Community feedback

  • Terence Zhang•620
    @TerenceCLZhang

    Good job on completing this challenge. To further enhance your code, consider the following suggestions:

    • I would suggest using semantic HTML, such as wrapping the entire card with the <main> element. This not only improves accessibility but also helps with SEO and overall code clarity.

    • For the .container, since you're already using flex, consider utilizing the gap property to manage spacing between elements. This is a more modern and maintainable solution compared to relying solely on margin, which you can still use selectively for more precise alignment.

    • Use variables for your CSS such as --yellow: hsl(47, 88%, 63%); in the :root to improve maintainability.

    • Use a CSS reset to ensure consistency across browsers by removing default styling, giving you a cleaner foundation to build upon. I recommend this one by Josh Comeau.

    Overall, it looks pretty good. Keep up the good work!

    Marked as helpful

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