Blog Card with :hover Selector

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 5 months ago

  Hiya @ktqlee,

  Good job on adding the hover animations to your card. I like your use of semantic elements and clear and descriptive CSS classes.

  Some friendly constructive feedback:

  • You could try adding :hover styling to your card title as well. According to the design it needs to be yellow when you hover over it and show a pointer cursor. Tip: try adding a link around your h1.

  • I really like the styling of the card when you hover over it! However when you show a pointer cursor for the whole card it communicates to the user that the whole card is clickable. At the moment nothing happens when you click on it. There are a couple things you can do. You could add a a tag around your card if you want the whole card to link to something. Another (better) solution would be to remove the pointer from the card hover styling and add hover styling + a tags to the title and author so users can navigate to a detail page and author page respectfully in a real world example. This is just to help you think about how a component would work in a real project, which is important as a developer.

  • I suggest changing your .date from a div to a p tag.

  I hope you find my feedback helpful, as always I would appreciate it if you could mark my comment as helpful when it was!

  Let me know if you have more questions and I'll try to answer them.

  Marked as helpful

  0