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

Hover Card with Tailwind

Diar Ihza 150

@diarih

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@manjunathagee

Posted

Hi there, Went through the code and would like to provide some feedback.

  • Learning should be a button rather than a div with styles, it's not semantic and will affect Accessibility
  • Class names are direct string no need to use curly braces to evaluate the expression className={'text-lg'} instead use className="text-lg"
  • Can use box shadow as an alternative to have shadow instead of creating extra div with positioning.

Marked as helpful

0

@SanazBHMN

Posted

@manjunathagee I had the same understanding from the very start of coding this challenge that Learning must be a button rather than a simple div, however, in the active state design of the challenge, it doesn't hold any active state. In that respect, I also concluded that it can be only a tag on the card.

0
Diar Ihza 150

@diarih

Posted

@SanazBHMN Hello, thanks for reviewing the code; I appreciate it. It might be just a simple tag component since it is inactive. However, I am open to any feedback in all regards.

0

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