Blog Preview Card

Community feedback

• 

  user2830581•90

  @user2830581Posted 2 months ago

  Hey your solution is great! Good use of semantic HTML and it follows the Figma design file well. However, I noticed a couple of things mainly in the CSS that could maybe improve your solution:

  • Responsiveness: Your solution isn't responsive for smaller screen sizes. Your blog card width is hard-coded to 384px which does follow the Figma design for large screens, but doesn't account for the mobile design also in the Figma file. You could add a media query breakpoint to fix this and test things using browser developer tools. Part of the brief also mentioned adjusting font sizes based on the screen size so they're smaller on the mobile version. This can also be done with media queries but I think it said to implement it without using them. I used clamp() to achieve this but there are other ways if you wanted to research that.
  • Redundant Variables and Classes: In :root you create a variable to --body-fs but don't use it. In your HTML the article-img class is never referenced in your CSS instead you use .blog-card > img. Removing these can help clean up your code and make it more readable and easy to maintain.
  • Heading Tag Usage: You've used a h3 tag without first having a h1 and h2 tag. These headings create a hierarchy and make code more readable. They also help assistive technology figure out where the most important information is on your page. It is best practice to change this to a h1 tag and adjust any potential styles afterwards.

  1

  ---

  

  P

  lazyneedle•60

  @Iamnotn3rdPosted 2 months ago

  @user2830581 Thanks a lot bro. Really helpful.

  1