Submitted 8 months ago

Fluid animated Blog Preview Card

Dmytro•70

@alkersan

Preview site View code

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?

In this exercise, I used fluid fonts and margins, instead of media queries. For example, to accommodate very small viewports, I want the margins to gradually disappear and the font size to shrink:

const Wrapper = styled.article`
  // From 0 to 24px on screens below 375px
  margin-inline: clamp(0rem, -7.5rem + 37.5vw, 1.5rem);
`;

const Title = styled.h1`
  // Grow from 20 to 24px on vewports between 375 to 450px */
  font-size: clamp(1.25rem, 0rem + 5.333vw, 1.5rem);
`;

Another new thing was the animation. I didn't want the shadow to disappear instantly in the active state but to subtly move under the card. It was pretty simple to achieve with the transition of the filter property.

const Wrapper = styled.article`
  --shadow-offset: 8px;
  filter: drop-shadow(
    var(--shadow-offset) var(--shadow-offset) 0 var(--color-black)
  );
  transition: filter 200ms;
  
  &:hover {
    --shadow-offset: 0;
  }
`;

Community feedback

Grace•31,270
@grace-snowPosted 8 months ago
There are a couple of issues I can spot in this. It looks good overall but not on my phone screen because it's hitting screen edges on all sides. There should always be a little space around components.

Other issues

this is a blog card that would sit within another web page, probably alongside other blog cards. It would never act as a page title. Therefore it should not be using a h1. A h2 would be more appropriate.

the link must not wrap around the whole card. This is a serious accessibility problem. The link should be inside the card heading (wrapping the blog title). Then you add a pseudo element off that link that covers the whole card to make the whole thing clickable.

the sections inside the card are unnecessary. If you need anything at all, use a div as the only sectioning you're adding relates to layout not meaning. Think of sections as always needing a h2 and you're likely to use them more appropriately.

personally I would consider the author image as meaningful content that should have an alt description.

remember you don't need to wrap images in the picture element when there is only one image source.
Marked as helpful
0
Dmytro•70
@alkersanPosted 8 months ago
@grace-snow Thank you, Grace. I really appreciate the work you're doing here! I've been following your other reviews, to spot other mistakes I'm making for sure.
0
Dmytro•70
@alkersanPosted 8 months ago
@grace-snow, from your experience, is it still relevant today to account for screen sizes of 320px? Most of the resources I looked at target 375px.
0

Please log in to post a comment

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