MohamedAmin324/four-card-feature-section

Frontend Mentor - Four card feature section solution

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

Table of contents

• Frontend Mentor - Four card feature section solution
  • Table of contents
  • Overview
    • The challenge
    • Solution Link
  • My process
    • Built with
    • What I learned
  • Author

Overview

A simple single page layout of a website section

The challenge

Users should be able to:

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

Solution Link

four-card-section-website-live-preview

My process

I started by identifying the components of this website section which are: header, main and four sub-sections (cards). I used BEM to add consistency to class names (hope that worked). I added the basic typography styles based on a mobile first responsive design approach then proceeded to Desktop layout using the CSS grid.

Built with

• Semantic HTML5 markup
• CSS/ SCSS
• Flex box/ Grid
• Mobile-first workflow

What I learned

My main goal was to practice my new SCSS skills and to improve my code and file structure organization. Dividing my code into components made it more easy to apply changes when necessary although it made me a little bit confused at first.

Author

• Frontend Mentor - @constantcode9909