Skip to content
Submitted 7 months ago

Blog Preview Card w/ clamp()

Nate Valline•420
@nvalline
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?

Working through this project continued to engrain the Frontend Mentor process as well as further build upon my HTML & CSS skills.

I took to opportunity to implement CSS clamp(), which is a feature that I have struggled to wrap my head around. I also utilized transition for the hover effect.

I am proud that I caught the change in box shadow dimensions for the different screen sizes.

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

CSS clamp() has been a feature that I have struggled with, but I did find an article that clarified a lot of the problems I was encountering. The article does have a tool to help calculate the growth value, but my math did match up!

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

General code structure and usage.

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    PREVENT LAYOUT SHIFTS 📉:

    • Your solution needs to be improved to prevent Cumulative Layout Shift (CLS) which results a visually unstable or janky website, particularly on mobile devices.
    • This can happen because of leaving the Image and/or video elements without adding explicit width and height attributes.
    • The multimedia elements like img which aren't explicitly declared with height and width attributes are usually re-sized using CSS (either on the image itself or the parent container). When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading the 'unsized images' and/or videos.
    • You may notice that when the browser fetches these images, your page content is constantly being pushed down or moved around from its original position (i.e., layout shifts) as the browser resizes the images and positions them on your page.
    • Currently the img element have no explicit width and height to prevent CLS,
    <img src="assets/illustration-article.svg" alt="">
    • Here's an example which could help you to prevent CLS,
    <img src="assets/illustration-article.svg" alt="" width="336" height="201">
    • The height and width needs to have the actual measurements of that corresponding image, Additionally we provided empty alt="" because this svg is just used for decorative purposes.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
    Nate Valline•420
    @nvallinePosted 7 months ago

    I know this is an issue when using Next.js, but I didn't realize it has also been adopted with using CSS. I haven't read the articles you provided yet, but is this now considered standard practice? @0xabdulkhalid

    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