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

Blog preview card - no media query

Untest57 30

@Untest57

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


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

@Darionvr

Posted

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 30

@Untest57

Posted

@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 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