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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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: Github link
• Live Site URL: Four card feature section

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• CSS Grid

What I learned

I learned how to use :nth-child() to style each class element individually:

.card:nth-child(1) {
    border-top: 0.3em solid var(--cyan);
}

.card:nth-child(2) {
    border-top: 0.3em solid var(--red);
}

.card:nth-child(3) {
    border-top: 0.3em solid var(--orange);
}

.card:nth-child(4) {
    border-top: 0.3em solid var(--blue);
}

I learned how to use CSS Grid to create layout.

main {
    display: grid;
}

@media (min-width: 28em) {
    main {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 5% 35% 5% 35% 5%;
    }

    .card {
        width: 22em;
    }

    .card:nth-child(1) {
    grid-column-start: 2;
    grid-row-start: 3;
    align-self: center;
}

 .card:nth-child(2) {
    grid-column-start: 3;
    grid-row-start: 2;
    align-self: end;
}
.card:nth-child(3) {
    grid-column-start: 3;
    grid-row-start: 4;
    align-self: start;
}
.card:nth-child(4) {
    grid-column-start: 4;
    grid-row-start: 3;
    align-self: center;
}
}

Continued development

I still need to practice the positioning an element & @media. I also need to learn about responsive CSS in general & HTML5 rules.

Useful resources

• Grid Garden - This was a fun game to practice grid fundamentals.
• Flexbox Froggy - This was a fun game to practice flexbox fundamentals.

Author

• Frontend Mentor - @snigdha-sukun