Skip to content
Submitted 10 months ago

Blog Preview Card

MELT•170
@MeltedGreenVelvet
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there!

  1. I created a list of buttons for the implied filtering system. See-- .topic-tags-list, .topic-tag, and .topic-tag-btn. I thought that if tags can be added and subtracted, a list would be preferable here. I also used buttons for in-page filtering, but I suppose anchors could be used if the filtering system is not in-page. I would like to know if this is semantically correct, and if my reasoning is sound?

  2. I had added a "line-height: 150%" to the body style, thinking it would apply to all text. This property did not affect the headings or button. I had to go back and include this property in their classes as well. Why is this?

Thank you!!

Community feedback

  • Daniel 🛸•44,270
    @danielmrz-devPosted 10 months ago

    Hello @MeltedGreenVelvet!

    Your solution looks excellent!

    I have just one suggestion:

    • Use only main to wrap the main content instead of main and article. Unless you have a specific reason to use them both, it's not necessary. The tag article would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

    As you probably know, this tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

    I hope it helps!

    Other than that, great job!

    0

Please log in to post a comment

Log in with GitHub

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