Submitted about 2 months ago

Blog preview card - no media query

Untest57•80

@Untest57

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

It took too long, so next time I'll just implement the parts in the challenge without any additional work.

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

The task of making the a tag respond to the entire card.

.card a.link::after {
  position: absolute;
  inset: 0;
  z-index: 1 !important;
  content: "";
}

Size does not match design file.

As a result, the inline-flex parent was 3px larger.

Solved as follows:

.card .author {
  display: inline-flex;
  vertical-align: middle;
}

Community feedback

Nico Velasco•160
@DarionvrPosted about 2 months ago
Awesome! It looks exactly like the original image. I saw your code and you used the h2 tag, but there is no h1. If I’m correct, those tags should be used in a sequential manner to avoid bad practices.

Hope this article helps you :)

https://medium.com/swlh/html-heading-tags-best-practices-78a85f63df47
Marked as helpful
1
Untest57•80
@Untest57Posted about 2 months ago
@Darionvr

Thank you for your feedback.

The reason why I didn't use the h1 tag is because the h1 tag is usually in the header tag during work, so I started with the h2 tag right away.

Thanks again for the feedback.
1

Please log in to post a comment

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