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

Single Price Grid Component

Edi Carlos 130

@ediCarlosSilva

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone. This is my second challeng. I am not a pro user yet. So I am using the jpg files. If you could give me some tips on how to improve my code (maybe css class names patter like BEM), maybe a better html tag structure. I would be so grate. Thanks.

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Congratulations well done. I took a look at you markup and css and it's pretty good well done. Just a few suggestions.

  • When going to mobile there is no margin on the left and right side of the card. The card is stretching from side to side. Add a small margin to fix this.
  • When creating custom variables (for example for colors) this is how I do it.
:root {
--primary-cyan: hsl(179, 62%, 43%);
--primary-bright-yellow: hsl(71, 73%, 54%);
--primary-white: #fff;
--neutral-light-gray: hsl(204, 43%, 93%);
--neutral-grayish-blue: hsl(218, 22%, 67%);
}

This way it's easier to see which one is which when applying.

Marked as helpful

1

Edi Carlos 130

@ediCarlosSilva

Posted

Hi @hitmorecode

I saw that margin in the design. But I thought it wasn't necessary. I am going to do what you told about variavel names and about the margin in Mobile layout. Thanks.

0

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