Frontend Mentor - Four card feature section solution

This is a solution to the Four card feature section challenge on Frontend Mentor by Dacardonac. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Four card feature section solution
  • 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 see in this project:

• View the optimal layout depending on their device's screen size (Responsive)
• Styles in Components (Sass/Scss)

Screenshot

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Solution Deploy

My process

Built with

• Semantic HTML5 Markup
• CSS3 Custom Properties
• Flexbox
• Mobile-first Workflow
• Vite - Frontend Tooling
• Sass/Scss - Modules

What I learned

I learned and implemented display: grid;, along with its properties and how to use it. I also reinforced and practiced my CSS knowledge with Sass, and worked on semantic HTML while applying the BEM methodology for class naming."

You can see an example below:

<!-- Semantic Structure with BEM Methodology -->
    <section class="content">
      <article class=" content__card content__card--supervisor">
        <h2 class="content__card-title">Supervisor</h2>
        <p class="content__card-description">Monitors activity to identify project roadblocks</p>
        <figure class="content__card-image">
          <img class="content__card-image-img" src="./assets/images/icon-supervisor.svg" alt="Image of a Magnifying glass">
        </figure>
      </article>
    </section>

/* Display: grid; */
@media (min-width: 1440px) {
  .content {
    max-width: 69.375rem;
    display: grid;
    grid-template-areas:
      "          .              team                .          "
      "      supervisor         karma          calculator      ";
    grid-gap: 1.875rem;
    justify-content: center;
    align-items: center;

    &__card {
      max-width: 21.875rem;
      height: 15.625rem;
      margin: 0;
    }

    &__card-image  {
      margin-top: 2.5rem;

      &-img {
        width: 4rem;
        height: auto;
      }
    }

    &__card--supervisor {
      grid-area: supervisor;
      transform: translateY(-150px);
    }

    &__card--team {
      grid-area: team;
    }

    &__card--karma {
      grid-area: karma;
    }

    &__card--calculator {
      grid-area: calculator;
      transform: translateY(-150px);
    }
  }
}

Continued development

With this path, I want to continue learning more about Responsive Design and how to work across different devices with Flexbox and Grid, also I want continue using BEM methodology and perfect the technique in aspects like name the classes, also I want to improve in modularize the component's styles with Sass and learn about Conventional Commits.

Useful resources

• MDN - This helped me with Documentation on many topics, mostly with HTML and CSS properties.
• ChatGPT - This is an incredible Artificial Intelligence (AI) tool, ChatGPT helps me with specific topics, errors in the project and investigations.

Author

• Frontend Mentor - @Dacardonac
• LinkedIn - @Daniel Alejandro Cano Cardona

Acknowledgments

I want to thank Jairovg for the teachings and his help to complete this challenge in a good way and with good practices.