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

• GitHub Repo: https://github.com/IamAbhiDev/four-card-feature-section-master-new.github.io
• Live Site: https://iamabhidev.github.io/four-card-feature-section-master-new.github.io

My process

Built with

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

What I learned

While working on this project, I learned about analyzing the structure of the elements in a webpage and using CSS Grid to make the layout responsive. Instead of specifying margin and padding for every component to position it, I applied the Grid layout to the project for responsiveness.

Continued development

In the future, I want to use Javascript to make my webpages more interactive and appealing. I also want to keep using clamp() for fluid typography. But I know I need to improve the code and make sure the webpage works well on all devices. I'll keep learning and following best practices to make great responsive designs.

Useful resources

• Accessibility Insights - This chrome extension helped me run automated checks to test the accessibility of the site.

Author

• GitHub - @IamAbhiDev
• Frontend Mentor - @IamAbhiDev
• Twitter - @IamAbhiDev