Frontend Mentor - Four card feature section solution

This is a solution to the Four card feature section 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:

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

Screenshot

Links

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

My process

Built with

• Semantic HTML5 markup
• Used CSS Vars, REM and EM for measurements
• Flexbox for mobile layout
• CSS Grid for Desktop layout
• Mobile-first workflow

What I learned

I'm used to pixels and this time, I tried using REM for font-sizes and EM for spacings and sizes. I learned that I can set the global font size to 62.5% thus it's easier now to convert pixel to REM.

html {
  font-size: 62.5%;
}

I also tried my best to use semantic HTML5 markup, I hope i'm using it correctly. I'm comfortable on using Flexbox but I challenged myself this time and learned how to use CSS Grid for the desktop layout. And lastly, it's my first time to do the mobile first workflow when applying the styles.

Continued development

I want to practice CSS grid more, do more challenges using mobile-first workflow and improve code accessibility, readability and maintenance.

Useful resources

• Why font-size must NEVER be in pixels - This made me think to try using REM instead of pixels.
• HTML Font Size Hack - Interesting hack
• CSS Reset - Simple CSS Reset

Author

• Website - https://azelalynetan.github.io/
• Frontend Mentor - https://www.frontendmentor.io/profile/azelalynetan
• Mastodon - https://mastodon.social/@azeltan