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

Cardbox using pure CSS and figure tag in HTML

@DepartureLV

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


Do you think Figure and Figcaption semantic tags are suitable for the card's image and image tag? feel free to share your thoughts!!

Community feedback

@xphstos

Posted

You should think it like this.. Does the learning tag and the published has anything to do the image? Not quite, the learning has to do with the content of the card, meaning it's a tutorial article and the publish date obviously has to do with when the article was published. The image is not even needed to give meaning to the content of the article. Figcaption should describe the contents of a figure if those are media elements and only if it gives value to the user.

In our case I don't see the value. It's plain decorative.

Marked as helpful

0

@DepartureLV

Posted

@xphstos Thank you for your feedback! In this case, should I just use a plain p tag with div if it is needed right?

0

@xphstos

Posted

@DepartureLV Yes a div or a p tag is fine. That depends on the context of the rest of site. Assuming this was one card out of many. Can something be tagged as Learning and something else at the same time? If yes.. then a div or a span tag is best suited for that. Or maybe that tag is a link that leads you to a page with articles tagged as Learning. In that case that would be either a button or a ahref element. The date could live inside a p or a div and then use the time tag for the date.

Marked as helpful

1

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