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
  • Continued development
  • 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/blog-card-using-flexbox-logical-properties-and-fluid-typography-C3XGfD0rwK)
• Live Site URL: [https://dz-blog-preview-card.vercel.app/]

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• BEM
• Logical Properties
• Custom Properties
• Variable Fonts

What I learned

In this Challenge I learn how to work with Variable Fonts, I make a muscle memory with Semantic HTML to build a card, with Logical Properties and Custom Properties.

  <article class="card">
    <img
      height="200"
      class="card__img"
      src="/assets/images/illustration-article.svg"
      alt="Colorfull code elements illustration"
    >
    <div class="card__content">
      <span class="tag">Learning</span>
      <time class="publishdate" datetime="2024-06-03" title="Published Dec 21, 2023">
        Published 21 Dec 2023
      </time>
      <h1><a href="#" class="title">HTML & CSS foundations</a></h1>
      <p class="description">
        These languages are the backbone of every website, defining structure, content, and presentation.
      </p>
    </div>
    <div class="author-info">
      <img width="32" height="32" src="/assets/images/image-avatar.webp" alt="Author of the article">
      <h2>Greg Hooper</h2>
    </div>
  </article>

@font-face {
    font-family: 'Figtree';
    font-weight: 500 800;
    font-style: normal;
    src: url(./assets/fonts/Figtree-VariableFont_wght.woff2) format('woff2');
}

Continued development

In the future I would like to continue to put in practice my HTML, CSS and JavaScript knowledge.

Useful resources

• Convert Variable Fonts - Usefull tool to convert Variable Fonts to woff2 format
• Getting started with Variable Fonts - A good video by Kevin Powell on how to getting started with Variable Fonts
• Using web fonts - An article to understand how to work with Variable Fonts by Google
• How to use fit-content - An mdn web docs to use fit-content, I used it to create the tag
• How to use box-shadow - An mdn web docs to use box-shadow, I used it to create a perfect box-shadow of the card

Author

• Frontend Mentor - @dedo-dev
• Linkedin - @daniele-zeppieri