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

Pricing component with CSS Grid

P
Corina 30

@Dangerina

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


My workflow has been to use the figma plugin through vs code to grab font styles and colors. Is there a better way to do this? I'm on a laptop and I don't like having the plugin take up so much screen space.

Misc. thoughts from this project: CSS Grid made a lot more sense to me conceptually compared to flexbox. Excited to use it more.

I think I need to work in better "chunks" in the future for the sake of my commits. I feel they were too generic and too far apart in this project. Maybe this will be easier to do with more complex projects?

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Nice well done. Just one tip

  • The margin on main, you can remove it. You already have flexbox on the body and this is holding the card in the center of the page.

I don't understand why you need a figma plugin to grab font style and colors. If you check the folder where the FEM design files are. You'll see a file style-guide.md in this file you have all the information you need regarding font style, font size, colors and so on...

Marked as helpful

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