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: Link
• Live Site URL: Link

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• BEM naming convention
• CSS Grid
• Mobile-first workflow

What I learned

This is my first project using CSS Grid throughout.

It also showcases my ability to create high quality maintainable code using BEM naming convention and custom reusable properties in CSS

Combining the BEM naming + Custom properties + CSS Grid made me feel so happy to make this project

<div class="card-grid__card card-grid__card--cyan">
  <h3 class="card-grid__headings">Supervisor</h3>
  <p class="card-grid__paragraphs">Monitors activity to identify project roadblocks</p>
  <img class="card-grid__image" src="images/icon-supervisor.svg" alt="magnifying glass icon" />
</div>

The CSS in the media query for card grid is plain awesome!!

:root {
    --space-10px: calc((10/16) * 1rem);
}

.card-grid__card--cyan {
    background-image: linear-gradient(
        var(--color-Cyan) 2%,
        transparent 2%
    );
}

@media (min-width: 1200px){
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .card-grid__card:nth-of-type(1) {
        grid-column: 1;
        grid-row: 2 / span 2;
    }

    .card-grid__card:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .card-grid__card:nth-of-type(3) {
        grid-column: 2;
        grid-row: 3 / span 2;
    }

    .card-grid__card:nth-of-type(4) {
        grid-column: 3;
        grid-row: 2 / span 2;
    }
}

Useful resources

Pro tip: use ALL resources!!

• BEM naming style

• CSS Grid study references:

  • start here with Grid Garden
  • Article 1 : CSS Grid theory - simple version to build more knowledge
  • Article 2 : How to use CSS Grid practically - I have been referring to this so many times over so many months because its that good!
  • Article 3 : CSS Grid theory - long version for reference

• Learn to write good CSS by Kevin Powell

Author

• GitHub - Aldrin Sean Pereira
• Frontend Mentor - @AldrinSeanPereira
• LinkedIn - aldrinseanpereira

Acknowledgments

Thanks to frontend mentor and all the team in their discord server in the help section!!