Skip to content
Submitted 10 months ago

Responsive Blog Preview Blog UI design using html and css

#accessibility#web-components#styled-components
M.A.Askat•40
@AskatAsh
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 tried my best to make the design pixel perfect and and responsive for even the smallest devices. Added hover and active states.

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

I was getting some accessibility issues while checking with lighthouse devtool and I fixed the issues from suggestions given by lighthouse.

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

Please suggest how I should animate this UI component or to be specific what type of animation would be good.

Community feedback

  • P
    Adam C•130
    @adam-crowleyPosted about 2 months ago

    Layout looks great and is identical to the design. Accessibility looks good.

    Responsive layout is good. I would make all the text slightly smaller when the screen size is mobile.

    For animation I would just add subtle hover transitions for the color of the link elements:

      transition: color 0.2s;
  color: var(--gray-950);
}
h1 a:hover {
  color: var(--yellow);
} ```
    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