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
• Acknowledgments

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: https://www.frontendmentor.io/solutions/four-card-feature-section-completed-using-only-css-LT2Tmf9L2
• Live Site URL: https://ameyadeokule.github.io/four-feature-card/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid

What I learned

Working with CSS Grid and converting the layout for mobile devices and also using a SUDO class to get some details correctly

Continued development

I want to integrate SASS into this webpage and in future convert it to React SPA

Useful resources

• CSS Tricks for Grid - Helped to understand CSS grid fragments

• CSS Tricks Pseudo classes selector - Helped me to understand ::before and ::after sudo classes and how to style them.

Author

• Name - [Ameya Deokule]
• Frontend Mentor - @ameyadeokule

Acknowledgments

I would like thank Kethmar Salumets @developerhabits for encouraging me to start completing challenges on Frontend Mentor.