Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column preview card component 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:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL: https://github.com/LucLhote/3-column-preview-card-component-challenge
• Live Site URL: https://luclhote.github.io/3-column-preview-card-component-challenge/

My process

Built with

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

What I learned

To achieve this design, adding an h1 level title didn't seem necessary. After submitting my work, I saw that I had an accessibility issue and the page needed an h1 title. So I added a title and hid it with CSS using the display property and the none value. I figured out that this value hides the title also from screen reader users, so I tried to find a solution online and found this article: Page Title - H1 - Best Practices

One of the proposed solutions was the following:

h1 {
  font-size: 0;
  width: 1px;
  height: 1px;
  display: inline-block;
  overflow: hidden;
  position: absolute!important;
  border: 0!important;
  padding: 0!important;
  margin: 0!important;
  clip: rect(1px,1px,1px,1px);
}

I adapted this vision with my code and it worked.

Useful resources

• Page Title - H1 - Best Practices - This helped me figure out how to visually hide the h1.

Author

• Email - [email protected]
• Frontend Mentor - @LucLhote
• LinkedIn - Luc Lhote
• freeCodeCamp - @LucLh
• freeCodeCamp Forum - @LucLh