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

Responsive webpage built with CSS Grid

P

@amyspencerproject

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


This was a tough challenge but I gained so much experience using CSS Grid. The key lesson for me was to keep it simple and not try to use columns as margins.

Let me know what you think of my code.

Community feedback

@javascriptor1

Posted

Hi Amy ,

Nice work. I have just completed this challenge a few minutes ago.

Here are 2 improvements you can make to get even closer to the design :

1- The text on the header is spanning across 3 columns. You should keep it in 2nd column, just as the design.

Excellent work!.

Keep going 🚀

2- The gray color you have used is very hard to read(contrast ratio: 2.35)

Marked as helpful

1

P

@amyspencerproject

Posted

@javascriptor1 How did you come up with a contrast ratio?

Thank you for taking the time to look at my challenge!

0

@javascriptor1

Posted

Hi Amy@amyspencerproject ,

If you're using Google Chrome, inspect the element to open dev tools then locate the color property in the styling section.

You will then see a small box with the same color applied. Click on it to open the color picker tool.

You will then see the contrast ratio for the element with a green tick mark if your color is okay, or with red x if not.

Note: This only appears with color property, not with any other color value like background color

Rgds,

Marked as helpful

0
P

@amyspencerproject

Posted

@javascriptor1 Thanks for sharing that little tidbit :)

0
Brian 180

@brian7homas

Posted

Love your comments, very easy to follow 👍

1

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