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 Card with :hover Selector

@ktqlee

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?

Saw someone used the :hover selector to add effects when the cursor points to the object in the qr_code challenge so I also try to use it here

Community feedback

@DylandeBruijn

Posted

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

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