Frontend Mentor - Four card feature section solution

This is a solution from Dimitris Kaffes to the Four card feature section challenge on Frontend Mentor.

Table of contents

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

Overview

Mobile first design approach was implemented for this challenge.

A modern CSS reset (by Andy Bell) was implemented.

A change to a three-column, four-row grid is applied for bigger screens.

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Screenshot

Links

• Solution URL: four-card-feature-section solution on Github
• Live Site URL: four-card-feature-section live site

My process

The HTML structure was built with semantic elements.

Custom properties were used for the colors.

For the card-container a display: grid property was implemented. The grid-template-areas property was used for the grid along with the grid-area property for the grid elements. For the mobile view a single column was set.

A media query was used to change the bigger screen layout to a three-column, four-row grid.

Built with

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

What I learned

How to implement a more complex grid structure using the grid-template-areas.

Continued development

Further practise complex grid structures.

Useful resources

• MDN - Grid template areas - The MDN reference on Grid template areas.

Author

• Frontend Mentor - @dkaffes