Frontend Mentor - Blog preview card solution

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.

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: My Solution
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties (design tokens)
• Fluid typography with clamp()
• BEM naming methodology
• CSS nesting
• Flexbox & CSS Grid

What I learned

This project served as a good exercise in translating a static design into a maintainable, fluid, semantic web component. My primary focus was implementing modern coding practices for organization and responsiveness because writing clean, scalable code is something I strive for in all my projects, and I love learning new ways that help me optimize that. This started at the base level when structuring my HTML using the naming conventions of BEM methodology.

1. Mathematically fluid typography

The text scales smoothly between mobile (375px) and desktop (1440px) viewports using clamp() functions. This eliminates the need for media queries while maintaining precise control over font sizes.

2. CSS custom properties for design tokens

All design values are centralized as CSS variables, making theming and adjustments straightforward. The typography system showcases how clamp() functions combine with font weights and line heights into reusable text presets:

--ff: 'Figtree', sans-serif;
--fw-500: 500;
--fw-800: 800;
--lh: 150%;
--clamp-1: clamp(1.25rem, 0.3756vw + 1.1616rem, 1.5rem);
--clamp-2: clamp(0.875rem, 0.1878vw + 0.8308rem, 1rem);
--clamp-3: clamp(0.75rem, 0.1878vw + 0.7058rem, 0.875rem);
--text-preset-1: var(--fw-800) var(--clamp-1) / var(--lh) var(--ff);
--text-preset-2: var(--fw-500) var(--clamp-2) / var(--lh) var(--ff);
--text-preset-3: var(--fw-500) var(--clamp-3) / var(--lh) var(--ff);
--text-preset-4: var(--fw-800) var(--clamp-3) / var(--lh) var(--ff);

These presets are then applied throughout the component:

.card__title {
  font: var(--text-preset-1); /* Fluid heading that scales from 20px to 24px */
}

Useful resources

• BEM - Went down a rabbit hole exploring the methodology's extensive documentation.

Author

• Frontend Mentor - @a1d3nmam3d0v