Frontend Mentor - Blog preview card solution

This is a solution to the Blog preview card challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/solution-using-flexbox-3YDpE1mtoN
• Live Site URL: https://ebogucka.github.io/blog-preview-card/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

I learned how to scale the font size with the browser size using CSS clamp(), for example:

h1 {
    /* 22px - 24px */
    font-size: clamp(1.375rem, 1.3393rem + 0.1786vw, 1.5rem);
}

Useful resources

• CSS Clamp(): The Responsive Combination We’ve All Been Waiting For - This helped me understand how to use clamp()
• Font-size Clamp Generator - This allows you to generate the preferred font size when using clamp()

Author

• GitHub - @ebogucka
• Frontend Mentor - @ebogucka