Skip to content
Submitted 3 months ago

blog-preview-card-main with hover and focus

Patolin3084•20
@Patolin3084
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I've learned a lot more about how to sort elements with flexbox, but I still need a lot of practice with this. I need a lot of help to make my designs responsive, it is still a problem for me. I have managed to get the hover to work but not the focus, I'm not sure I'm using it correctly.

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

I didn't remember how to use hover and I went over this looking for information. I also had problems adding the fonts on my computer, so I decided to do it through the link.

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

I can help beginners who have problems with flex.

Community feedback

  • thamu-acn•200
    @thamu-acnPosted 3 months ago

    Hi, I am glad to hear that my suggestions, not criticism :), was of help to you.

    The CSS :hover selector is one of the pseudo-classes that are used to style elements by selecting the element when the users hover their cursor or mouse over the element. This is before the element has been selected or focused. Please read the below link for more details.

    Mozilla Docs

    I hope this is helpful and don't hesitate to reach out if it still doesn't make sense.

    Marked as helpful
    0
  • thamu-acn•200
    @thamu-acnPosted 3 months ago
    • Author's avator is not visible even though you have added it to your HTML
    • No need to set display: flex; on <main> since it has already been set on parent container body.
    • The hover effect must be set on <h1>HTML & CSS foundations</h1> and setting font color to yellow according to active-states.jpg
    • I also noticed that on small screen size the content is overflowing, maybe setting this property to hidden might do or better wrap the text.

    Maintanability

    • I recommend adding a separate css file for styles and reference it in html page for readability and easy maintenance.

    Accessibility

    • Don't leave alt property empty on image tags as this is what is understood by screen readers
    Marked as helpful
    0
    Patolin3084•20
    @Patolin3084Posted 3 months ago

    @thamu-acn Thank you very much for taking the time to correct my work! Your criticism has been very helpful and I have already made the changes. The only thing that is not clear to me is applying the hover to the foundations of h1. I would really appreciate it if you could explain it to me better.

    0
  • Patolin3084•20
    @Patolin3084Posted 2 months ago

    Thank you very much for the link, very interesting and complete!

    0

Please log in to post a comment

Log in with GitHub

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