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-preview-card-main with hover and focus

@Patolin3084

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?

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-acn

Posted

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-acn

Posted

  • 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

Posted

@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

Posted

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

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