Skip to content
Submitted 6 months ago

Card with hover interactions

Jacqueline Bento•20
@jacquebento
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I enjoyed practicing hover and I want to learn more about focus.

What challenges did you encounter, and how did you overcome them?

I had difficulty implementing focus because in my research it was only used in inputs, so I was unable to apply it to the project and I hope to understand this better in the future.

What specific areas of your project would you like help with?

Please let me know if I did something wrong.

In what element can I add the focus property?

Code

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•8,410
    @MarziaJalili

    Hey there!

    Some sort of suggestion:

    • set the code below in the body selector to center the card:
    body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
    • Make sure that the card is the only child element of the <body>.

    If not wrapp everything nested inside <body> with the <main> element. It will look something like this:

    <body>
  <main>
    <!-- every element nested inside -->
  </main>
</body>

    Other than this your solution is spot on!

    Keep up the grind🫡

  • P
    Boris•4,110
    @makogeboris

    Great work, some suggestions

    • All content should be wrapped within landmarks. Wrap a main tag around the .card and a footer for the .attribution
    • Change the width of the .card to max-width and should be defined in rem
    • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
    • Font-sizes should be defined in rem

    Hope this helps, Good luck!

  • P
    Serhii Derkach•50
    @SerhiiDer

    all good mate, good job

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