Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Section

@Clipzorama

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am happy that I was able to finish this design and also able to use grid layout. Haven't really did much projects in Grid Layouts so it was really nice to be able to do so.

What challenges did you encounter, and how did you overcome them?

Initially, I did have a small problem with the sizing of the card when it comes to grid. However, I learned that you don't have to add any widths or height to cards inside of grid-containers, as they are automatically sized.

Especially when you're using grid-row and grid-column for assigning specific positions and sizes for the divs.


#cyan {
    border-top: 4px solid var(--Cyan);
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* very useful */
    align-self: center;
}

#red {
    border-top: 4px solid var(--Red);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

#orange {
    border-top: 4px solid var(--Orange);
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

What specific areas of your project would you like help with?

Always room for improvement. Let me know what I can do to make this more optimal :)

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord