Skip to content
Submitted 6 months ago

Hover effect and responsiveness

pure-css
Eziefule Judith•120
@a2-112
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 am happy that am improving my learning experiences and knowledge in html and css,with the correction I received, I am able tobbetter my code, and it appeared very nice. Learning new things is indeed interesting

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

How to apply transition and transform to the pseudo element(hover)

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

More knowledge on transition and transform, box shadows effects.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Kamran Kiani•2,780
    @kaamiik

    Some notes:

    1. Add a favicon and title to your html head.
    1. add <svg aria-hidden="true" focusable="false" ...> to your code. because aria-hidden="true" hides the SVG from assistive technologies. focusable="false" prevents the SVG from being focusable in older browsers.
    1. Elements that have hover effect are interactive. So because you have hover effects for your h1 then It needs to be a or button. Now you have to choose between a and button. If the element take you to a new page It should be an a tag and If do an action like submit a form or add to cart then It should be a button. In your challenge you have h1 and inside the h1 you have to wrap it into a interactive element too.
    1. Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.
    1. Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.
    1. Your max-width should be in rem. No need to have max-width: 10%; in img. You only need max-width: 100%; and display: block; for your img.
    1. Do not use ID for css.
    Marked as helpful
  • mohammadshbeeb11•100
    @mohammadshbeeb11

    .

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