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.

Design preview for the Four card feature section coding challenge

The challenge

Users should be able to:

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

Links

My process

I Started on Phone Design and I worked my way up nothing too fancy I Added Container to contain all the design and that's it.

Built with

  • Semantic HTML5
  • CSS Flexbox
  • CSS BEM Naming Convention
  • Mobile-first Approach

What I learned

I Applied what I learnt recently about BEM css naming convention and I think this BEM made my css more readable and made me understand the power of utilities classes much more.

Useful resources

  • BEM - This Helped me understand BEM idea it's very useful.

Author