Design comparison
Solution retrospective
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
- @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 helpful1@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
Log in with GitHubJoin 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