This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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

Users should be able to:

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

• Solution URL: GitHub
• Live Site URL: Live Site

• Semantic HTML5 markup
• Tailwind
• Flexbox
• CSS Grid

I started adding Tailwind to the project, and configured the colors and fonts provided in the Style Guide.

Then, I created the layout using generic tags like div and span with class names, and used ChatGPT to get suggestions of semantic HTML tags to use. With a few tweaks I got the final HTML layout for the challenge.

I adapted the Learning label to be a tag list of possible topics for the blog post, so I used an ul with flow and wrap. You can check it out uncommenting the extra li in index.html

This challenge has this following extra challenge:

The font sizes in this project a slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries.

After some research I found the CSS clamp() function which is used for Fluid Typography. It can be used for most of the places where you can specify some kind of size. This is the syntax:

.style {
  font-size: clamp(min, ideal, max);
}

The clamp() function uses the ideal value to calculate the size, so it should be a relative value such as vw, vh, rem, %, etc. If the calculated value is less than the min value, it will use the min value. Similarly, if the calculated value is greater than the max value, it will use the max value. Therefore, both min and max should be absolute values.

Let's take a look at an example from the solution:

.lg {
  font-size: clamp(1.25rem, 5vw, 1.5rem);
}

This is used for the heading, it will have a size of 5vw, but it won't resize below 20px or greater than 24px.

• MDN - MDN article with the documentation of clamp().
• Web.dev - Web.dev article explaining how min(), max() and clamp() functions work with some helpful examples

• Frontend Mentor - @fresnizky
• Twitter - @fedearg79