Frontend Mentor - Four card feature section solution

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

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

• Desktop Preview
• Mobile Preview

Links

• Solution URL: FrontEnd Mentor: My Solution
• Live Site URL: GitHub Page: 4 Card Feature Section

My process

Built with

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

What I learned

• Working on this project helped me understand how mobile-first workflow is easier than desktop-first.
• I also used overflow: hidden property today for the first time and I didn't know of it before so yay.
• I also used the ::before pseudoselector for the first time for the top "border":

.box::before {
  content: "";
  height: 0.25rem;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}

Continued development

I want to continue using mobile-first workflow and really get it down right.

Author

• Website - Anosha Ahmed
• Frontend Mentor - @anoshaahmed
• Twitter - @anosha1ahmed